React中使用FusionCharts创建热力图时遇ChunkLoadError问题

问题 #

在React应用中使用FusionCharts创建热力图时出现加载错误，代码如下：

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

使用的包版本：

"react": "^18.2.0",
"fusioncharts": "^3.20.0",
"react-fusioncharts": "^4.0.0",

已尝试官网模板、简化实现、参考Stack Overflow文章，均无效。询问问题原因及解决方法。

原因分析 #

热力图（heatmap）属于FusionCharts的PowerCharts套件，而非当前导入的fusioncharts.charts基础图表套件。代码仅加载了基础图表库，缺少PowerCharts的依赖，导致运行时尝试动态加载fusioncharts.powercharts.js失败。

解决方法 #

1. 导入PowerCharts套件 #

修改代码，新增PowerCharts的导入并加入初始化：

import React from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
// 新增PowerCharts导入
import PowerCharts from 'fusioncharts/fusioncharts.powercharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

// 将PowerCharts加入fcRoot初始化
ReactFC.fcRoot(FusionCharts, Charts, PowerCharts, FusionTheme);

2. 清理缓存并重启项目 #

• 删除项目的node_modules文件夹和package-lock.json（或yarn.lock）
• 重新执行npm install（或yarn install）
• 重启开发服务器，确保新依赖被正确打包加载

3. 验证图表类型 #

保持ReactFC组件的type属性为heatmap，无需修改。

内容的提问来源于stack exchange，提问作者bluepilot999