我正在尝试使用 FusionCharts 在我的 React 应用程序中创建热图，但遇到了一些问题。
这是我的代码：
import React from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';
ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
const dataSource = {
"chart": {
"caption": "Sales of Liquor",
"subCaption": "Top 5 stores in last month by state",
"entityFillHoverColor": "#cccccc",
"numberScaleValue": "1,1000,1000",
"numberScaleUnit": "K,M,B",
"numberPrefix": "$",
"showLabels": "1",
"theme": "fusion"
},
"colorrange": {
"gradient": "1",
"minvalue": "0",
"code": "#e44a00",
"startlabel": "Poor",
"endlabel": "Good",
"color": [{
"maxvalue": "56580",
"code": "#f8bd19"
}, {
"maxvalue": "100000",
"code": "#6baa01"
}]
},
"data": [{
"id": "HI",
"value": "3189"
}, {
"id": "DC",
"value": "2879"
}, {
"id": "MD",
"value": "920"
}, {
"id": "DE",
"value": "4607"
}, {
"id": "RI",
"value": "4890"
}]
}
const HeatmapComponent = () => (
<div>
<ReactFC
type="heatmap"
width="100%"
height="400"
dataFormat="JSON"
dataSource={dataSource}
/>
</div>
);
export default HeatmapComponent;
我收到以下错误：
Uncaught (in promise) Error: ChunkLoadError: Loading chunk 4 failed.
(error: http://localhost:3000/main/fusioncharts.powercharts.js)
at a.e (fusioncharts.js:13:2215)
at h (fusioncharts.js:13:62601)
at Function.<anonymous> (fusioncharts.js:13:63900)
at i (fusioncharts.js:13:182570)
at o (fusioncharts.js:13:182814)
at d (fusioncharts.js:13:184030)
at t2.chartType (fusioncharts.js:13:89022)
at new e2 (fusioncharts.js:13:81081)
at new f (fusioncharts.js:13:65848)
at ReactFC2.renderChart (ReactFC.js:319:23)
at fusioncharts.js:13:76816
我似乎无法弄清楚出了什么问题。我已确保导入所有必要的 FusionCharts 组件和库。关于可能导致此问题的原因以及如何解决它有什么想法吗？
以下是我正在使用的软件包版本：
"react": "^18.2.0",
"fusioncharts": "^3.20.0",
"react-fusioncharts": "^4.0.0",
提前致谢！
import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";
// Resolves charts dependancy
charts(FusionCharts);
const dataSource = {
chart: {
theme: "candy",
caption: "Social Media Impact on Well-Being",
showvalues: "0",
subcaption: "Britain, 2017",
showplotborder: "1",
plotbordercolor: "#FFFFFF",
plotborderthickness: "3",
showshadow: "0",
placexaxislabelsontop: "1",
labelfontsize: "16",
showtooltip: "0",
usehovereffect: "0"
},
dataset: [
{
data: [
{
rowid: "Sleep",
columnid: "Instagram",
value: "-6"
},
{
rowid: "Sleep",
columnid: "Snapchat",
value: "-7"
},
{
rowid: "Sleep",
columnid: "Facebook",
value: "-8"
},
{
rowid: "Sleep",
columnid: "Twitter",
value: "-5"
},
{
rowid: "Fear of missing out",
columnid: "Instagram",
value: "-5"
},
{
rowid: "Fear of missing out",
columnid: "Snapchat",
value: "-7"
},
{
rowid: "Fear of missing out",
columnid: "Facebook",
value: "-4"
},
{
rowid: "Fear of missing out",
columnid: "Twitter",
value: "-3"
},
{
rowid: "Bullying",
columnid: "Instagram",
value: "-3"
},
{
rowid: "Bullying",
columnid: "Snapchat",
value: "-4"
},
{
rowid: "Bullying",
columnid: "Facebook",
value: "-5"
},
{
rowid: "Bullying",
columnid: "Twitter",
value: "-4"
},
{
rowid: "Body image",
columnid: "Instagram",
value: "-6"
},
{
rowid: "Body image",
columnid: "Snapchat",
value: "-3"
},
{
rowid: "Body image",
columnid: "Facebook",
value: "-4"
},
{
rowid: "Body image",
columnid: "Twitter",
value: "-2"
},
{
rowid: "Anxiety",
columnid: "Instagram",
value: "-3"
},
{
rowid: "Anxiety",
columnid: "Snapchat",
value: "-2"
},
{
rowid: "Anxiety",
columnid: "Facebook",
value: "-3"
},
{
rowid: "Anxiety",
columnid: "Twitter",
value: "-2"
},
{
rowid: "Depression",
columnid: "Instagram",
value: "3"
},
{
rowid: "Depression",
columnid: "Snapchat",
value: "-2"
},
{
rowid: "Depression",
columnid: "Facebook",
value: "-3"
},
{
rowid: "Depression",
columnid: "Twitter",
value: "-2"
},
{
rowid: "Loneliness",
columnid: "Instagram",
value: "-2"
},
{
rowid: "Loneliness",
columnid: "Snapchat",
value: "-1"
},
{
rowid: "Loneliness",
columnid: "Facebook",
value: "-2"
},
{
rowid: "Loneliness",
columnid: "Twitter",
value: "-1"
},
{
rowid: "Access to health advice",
columnid: "Instagram",
value: "1"
},
{
rowid: "Access to health advice",
columnid: "Snapchat",
value: "-1"
},
{
rowid: "Access to health advice",
columnid: "Facebook",
value: "3"
},
{
rowid: "Access to health advice",
columnid: "Twitter",
value: "2"
},
{
rowid: "Real-world relationships",
columnid: "Instagram",
value: "2"
},
{
rowid: "Real-world relationships",
columnid: "Snapchat",
value: "4"
},
{
rowid: "Real-world relationships",
columnid: "Facebook",
value: "3"
},
{
rowid: "Real-world relationships",
columnid: "Twitter",
value: "1"
},
{
rowid: "Awareness of people's health",
columnid: "Instagram",
value: "4"
},
{
rowid: "Awareness of people's health",
columnid: "Snapchat",
value: "2"
},
{
rowid: "Awareness of people's health",
columnid: "Facebook",
value: "5"
},
{
rowid: "Awareness of people's health",
columnid: "Twitter",
value: "4"
},
{
rowid: "Community building",
columnid: "Instagram",
value: "4"
},
{
rowid: "Community building",
columnid: "Snapchat",
value: "2"
},
{
rowid: "Community building",
columnid: "Facebook",
value: "5"
},
{
rowid: "Community building",
columnid: "Twitter",
value: "4"
},
{
rowid: "Emotional support",
columnid: "Instagram",
value: "4"
},
{
rowid: "Emotional support",
columnid: "Snapchat",
value: "4"
},
{
rowid: "Emotional support",
columnid: "Facebook",
value: "6"
},
{
rowid: "Emotional support",
columnid: "Twitter",
value: "4"
},
{
rowid: "Self-identity",
columnid: "Instagram",
value: "5"
},
{
rowid: "Self-identity",
columnid: "Snapchat",
value: "4"
},
{
rowid: "Self-identity",
columnid: "Facebook",
value: "2"
},
{
rowid: "Self-identity",
columnid: "Twitter",
value: "4"
},
{
rowid: "Self-expression",
columnid: "Instagram",
value: "7"
},
{
rowid: "Self-expression",
columnid: "Snapchat",
value: "5"
},
{
rowid: "Self-expression",
columnid: "Facebook",
value: "6"
},
{
rowid: "Self-expression",
columnid: "Twitter",
value: "8"
}
]
}
],
colorrange: {
gradient: "1",
minvalue: "-8",
code: "#862d2d",
startlabel: "Negative",
endlabel: "Positive",
color: [
{
code: "#ff9933",
maxvalue: "-4"
},
{
code: "#FFFFFF",
maxvalue: "0"
},
{
code: "#9ae5e5",
maxvalue: "4"
},
{
code: "#004d4d",
maxvalue: "8"
}
]
}
};
class MyComponent extends React.Component {
render() {
return (
<ReactFusioncharts
type="heatmap"
width="100%"
height="100%"
dataFormat="JSON"
dataSource={dataSource}
/>
);
}
}
根据 React 的融合图表文档 - https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react