汇总图反应错误加载块失败

Question

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。

但是我的控制台出现了错误。

错误：

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

我是否需要分别安装动力图或树状图。

PLease看一看

我查了一下他们说的

请注意，为了渲染树状图，您需要导入fusioncharts.js，然后需要导入fusioncharts.powercharts.js，然后需要包含fusioncharts.treemap.js以呈现需要导入fusioncharts.js的热图图，然后是fusioncharts.powercharts.js​。

在那里我需要导入而不是ale来理解

Answer 1

如附图所示，医生负责反应。

https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react

的末尾呈现图表部分。您可以看到特定图表类型的特定导入。

我希望它能帮到你。

Answer 2

为了呈现拖动节点图，需要在app.js中导入以下内容

import FusionCharts from 'fusioncharts';
import PowerCharts from 'fusioncharts/fusioncharts.powercharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, PowerCharts, FusionTheme);

为了呈现树状图，您需要导入以下内容

import FusionCharts from 'fusioncharts';
import PowerCharts from 'fusioncharts/fusioncharts.powercharts';
import TreeMap from 'fusioncharts/fusioncharts.treemap';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, PowerCharts ,TreeMap,FusionTheme);