如何使用React Fusion Charts修复漏斗图的ChunkLoadError？

问题描述

我正在尝试使用React中的以下组件（通过多个父组件呈现）从Fusion Charts呈现Funnel Chart：

import React,{ Component } from "react";

import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";

// Resolves charts dependency
charts(FusionCharts);

const dataSource = {
  chart: {
    caption: "Website visits",subcaption: "Purchase - Conversion analysis for last year",decimals: "1",showvalues: "1",plottooltext: "$label: <b>$dataValue</b>",plotfillalpha: "70",theme: "fusion",streamlineddata: "0"
  },data: [
    {
      label: "Website Visits",value: "17362"
    },{
      label: "Downloads",value: "8039"
    },{
      label: "Checked Pricing",value: "5509"
    },{
      label: "Asked for Quotation",value: "3962"
    },{
      label: "Purchased",value: "2397"
    }
  ]
};

export default class FunnelChart extends React.Component {
  render() {
    return (
      <ReactFusioncharts
        type="funnel"
        width="100%"
        height="100%"
        dataFormat="JSON"
        dataSource={dataSource}
      />
    );
  }
}

页面加载时，我在浏览器控制台中收到此错误：

Uncaught SyntaxError: Unexpected token '<'
4.js:35464 Uncaught (in promise) Error: ChunkLoadError: Loading chunk 5 Failed.
(missing: http://localhost:8000/dashboards/fusioncharts.widgets.js)
    at Function.a.e (4.js:35464)
    at d (4.js:35464)
    at Function.<anonymous> (4.js:35464)
    at i (4.js:35464)
    at o (4.js:35464)
    at f (4.js:35464)
    at e.t.chartType (4.js:35464)
    at new e (4.js:35464)
    at new h (4.js:35464)
    at ReactFC.renderChart (4.js:122201)
    at 4.js:35464

我尝试添加行import "fusioncharts/fusioncharts.widgets";，它消除了错误，但图表未显示。关于如何解决此问题的任何想法？

解决方法

上述问题的解决方案是您从“fusioncharts/fusioncharts.charts”导入图表，而不是从“fusion-charts/fusion-charts.widgets”导入图表。 上述原因是漏斗是从“fusion-charts/fusion charts.widgets”导出的（你可以检查这个，只需转到node_modules并在那个find widgets文件夹中找到fusion-charts）而不是从“fusion-charts” /fusion-charts.charts”。有关信息，您可以查看 Fusion 文档。

,

将导入语句替换为以下代码，并重新加载应用程序以清除浏览器缓存

import FusionCharts from 'fusioncharts';
import Widgets from 'fusioncharts/fusioncharts.widget';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts,Widgets,FusionTheme);