如何解决如何使用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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。