React.js：FusionCharts 中的块加载错误 fusioncharts.overlappedbar2d.js

如何解决React.js：FusionCharts 中的块加载错误 fusioncharts.overlappedbar2d.js

我正在开发一个使用 next.js 和 FusionCharts 开发的 Web 应用程序。目前，App 中已经配置了很多其他的 FusionChart 类型。我需要实现如下文档中的重叠条形图。

https://www.fusioncharts.com/charts/column-bar-charts/overlapping-bars-chart?framework=react

但我遇到了如下错误：

Error: ChunkLoadError: Loading chunk 11 Failed.
(error: http://localhost:3000/dashboard/6687/fusioncharts.overlappedbar2d.js)
    at Function.a.e (webpack-internal:///./node_modules/fusioncharts/fusioncharts.js:13:2029)
    at d (webpack-internal:///./node_modules/fusioncharts/fusioncharts.js:13:56980)
    at Function.eval (webpack-internal:///./node_modules/fusioncharts/fusioncharts.js:13:57704)
    at i (webpack-internal:///./node_modules/fusioncharts/fusioncharts.js:13:172154)

下面是代码（只添加了必要的代码）：

import React,{ PureComponent } from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import World from 'fusioncharts/maps/fusioncharts.world';
import Maps from 'fusioncharts/fusioncharts.maps';
import Usa from 'fusioncharts/maps/fusioncharts.usa';
import Widgets from 'fusioncharts/fusioncharts.widgets';
import Zoomline from 'fusioncharts/fusioncharts.zoomline';
import Zoomscatter from 'fusioncharts/fusioncharts.zoomscatter';
import Vml from 'fusioncharts/fusioncharts.vml';
import gantt from 'fusioncharts/fusioncharts.gantt';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import derieveBaseUrl from '../../helpers/generateEndpoint';


ReactFC.fcRoot(FusionCharts,Maps,World,Usa,Charts,gantt,Widgets,Vml,FusionTheme,Zoomline,Zoomscatter,Column2D);

render() {
    return (
      <ReactFusioncharts
        type="overlappedbar2d"
        width="100%"
        height="100%"
        dataFormat="JSON"
        dataSource={dataSource}
      />
    );
  }

我使用的是 FusioChart V. 3.15.3。 还有很多其他类似的问题，但它没有帮助我解决这个问题。所以我决定在这里提出一个问题。

解决方法

我能够解决问题。我所做的是：

导入重叠图表：

import Overlappedbar2d from 'fusioncharts/fusioncharts.overlappedbar2d';

并在 ReactFC 中使用它：

ReactFC.fcRoot(FusionCharts,Maps,World,Usa,Charts,gantt,Widgets,Vml,FusionTheme,Zoomline,Zoomscatter,Column2D,Overlappedbar2d);

最终代码应该这样更新。

import React,{ PureComponent } from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import World from 'fusioncharts/maps/fusioncharts.world';
import Maps from 'fusioncharts/fusioncharts.maps';
import Usa from 'fusioncharts/maps/fusioncharts.usa';
import Widgets from 'fusioncharts/fusioncharts.widgets';
import Zoomline from 'fusioncharts/fusioncharts.zoomline';
import Zoomscatter from 'fusioncharts/fusioncharts.zoomscatter';
import Vml from 'fusioncharts/fusioncharts.vml';
import gantt from 'fusioncharts/fusioncharts.gantt';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import derieveBaseUrl from '../../helpers/generateEndpoint';
import Overlappedbar2d from 'fusioncharts/fusioncharts.overlappedbar2d';


ReactFC.fcRoot(FusionCharts,Overlappedbar2d);

render() {
    return (
      <ReactFusioncharts
        type="overlappedbar2d"
        width="100%"
        height="100%"
        dataFormat="JSON"
        dataSource={dataSource}
      />
    );
  }

有关更多信息，请参阅以下内容： fusioncharts react error loading chunks failed