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}
      />
    );
  }

更多信息请参考下方：

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

React.js: chunk load error fusioncharts.overlappedbar2d.js in FusionCharts

javascript

fusioncharts

reactjs

next.js