本文介绍了fusioncharts 反应错误加载块失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";
import React from 'react';
// Resolves charts dependancy
charts(FusionCharts);
const dataSource = {
chart: {
caption: "Amazon Prime Video Categorization",
theme: "fusion",
viewmode: "1",
showrestorebtn: "0",
valuefontcolor: "#FFFFFF",
yaxismaxvalue: "1000",
yaxisminvalue: "0",
divlinealpha: "0"
},
dataset: [
{
data: [
{
id: "01",
label: "Home",
x: "50",
y: "900",
shape: "rectangle",
width: "80",
height: "40"
},
{
id: "02",
label: "TV Shows",
x: "20",
y: "500",
shape: "rectangle",
width: "80",
height: "40"
},
{
id: "02.1",
label: "Thriller",
x: "2",
y: "100",
shape: "rectangle",
width: "60",
height: "40"
},
{
id: "02.2",
label: "Drama",
x: "12",
y: "100",
shape: "rectangle",
width: "60",
height: "40"
},
{
id: "02.3",
label: "Comedy",
x: "22",
y: "100",
shape: "rectangle",
width: "60",
height: "40"
},
{
id: "03",
label: "Movies",
x: "50",
y: "500",
shape: "rectangle",
width: "80",
height: "40"
},
{
id: "03.1",
label: "Drama",
x: "35",
y: "100",
shape: "rectangle",
width: "60",
height: "40"
},
{
id: "03.2",
label: "Action",
x: "45",
y: "100",
shape: "rectangle",
width: "60",
height: "40"
},
{
id: "03.3",
label: "Horror",
x: "55",
y: "100",
shape: "rectangle",
width: "60",
height: "40"
},
{
id: "03.5",
label: "Thriller",
x: "65",
y: "100",
shape: "rectangle",
width: "60",
height: "40"
},
{
id: "04",
label: "Kids",
x: "80",
y: "500",
shape: "rectangle",
width: "80",
height: "40"
},
{
id: "04.1",
label: "Fantasy",
x: "80",
y: "100",
shape: "rectangle",
width: "60",
height: "40"
},
{
id: "04.2",
label: "Anime Cartoons",
x: "90",
y: "100",
shape: "rectangle",
width: "60",
height: "40"
}
]
}
],
connectors: [
{
stdthickness: "1.5",
connector: [
{
from: "01",
to: "03",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "01",
to: "04",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "01",
to: "02",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "01.02",
to: "04",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "01.01",
to: "02",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "02",
to: "02.1",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "02",
to: "02.2",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "02",
to: "02.3",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "03",
to: "03.1",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "03",
to: "03.2",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "03",
to: "03.3",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "03",
to: "03.4",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "03",
to: "03.5",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "03",
to: "03.6",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "04",
to: "04.1",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
},
{
from: "04",
to: "04.2",
arrowatstart: "0",
arrowatend: "1",
alpha: "100"
}
]
}
]
};
export default class HeatMap extends React.Component {
render() {
return (
<ReactFusioncharts
type="dragnode"
width="100%"
height="100%"
dataFormat="JSON"
dataSource={dataSource}
/>
);
}
}
这里我使用的是带有 react 的 fusioncharts.
Here i am using fusioncharts with react.
但是我的控制台出现以下错误.
But i am getting below error in my console.
错误:
Uncaught SyntaxError: Unexpected token <
fusioncharts.js:2202 Uncaught (in promise) Error: Error: Loading chunk 4 failed.
(missing: http://localhost:3000/fusioncharts.powercharts.js)
at HTMLScriptElement.a (fusioncharts.js:103)
at fusioncharts.js:2202
我是否需要为此单独安装 powercharts 或 treemaps.
Do i need to install powercharts or treemaps separately for this.
请看
我和他们说的fusionchart团队核实过
I checked with fusionchart team they are saying
请注意，为了渲染树状图，您需要导入fusioncharts.js，然后是fusioncharts.powercharts.js，之后您需要包含fusioncharts.treemap.js为了渲染热图图表，您需要导入fusioncharts.js，然后是fusioncharts.powercharts.js
我需要导入而不是啤酒的地方来理解
where i need to import not ale to understand
推荐答案
根据针对 react 的 fusioncharts 文档.
As per fusioncharts doc for react.
https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react
渲染图表部分结束.您可以查看特定图表类型的特定导入.
End of the Render the chart section. You can see the specific imports for specific chart types.
希望能帮到你.
这篇关于fusioncharts 反应错误加载块失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！