如何使用 React Fusion 图表修复漏斗图的 ChunkLoadError?
How to fix a ChunkLoadError for a Funnel chart with React Fusion Charts?
我正在尝试使用 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.图表”。有关信息,您可以查看 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);
我正在尝试使用 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.图表”。有关信息,您可以查看 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);