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

Question

我正在开发一个使用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。还有许多其他类似的问题，但它并没有帮助我解决这个问题。所以我决定在这里提出一个问题。

Answer 1

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

导入重叠图表：

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, Maps, World, Usa, Charts, gantt, Widgets, Vml, FusionTheme, Zoomline, Zoomscatter, Column2D, Overlappedbar2d);

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

如需更多信息，请访问以下网址：fusioncharts react error loading chunks failed