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

Question

我正在尝试使用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";行，它删除了错误，但没有显示图表。你有什么办法让我解决这个问题吗？

Answer 1

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

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

Answer 2

上述问题的解决方案是从"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文档。