使用融合图未在反应中加载地图

Question

我需要在我的反应应用程序中使用融合图表库集成地图。通过包含融合图表库的纱线配置组件安装融合图表库后，但是当我渲染地图时，它显示以下错误

出现错误后，我只是查看节点模块并检查文件是否存在，但似乎它不存在，但我的融合图表安装成功，没有错误那么这是怎么回事？

这是我的代码

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.worldwithcountries';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);

class MapChart extends Component {
    state = {
        dataSource: {
            "chart": {
                showCanvasBorder: true,
                canvasBorderColor: "#000000",
                canvasBorderThickness: 1,
                showBorder: true,
                borderColor: "#000000",
                fillColor: "#f1f1f1",
                caption: "* USA traffic not displayed on Heat Map",
                includevalueinlabels: "1",
                showHoverEffect: false,
                showEntityHoverEffect: false,
                theme: "fusion",
            },
            data: [
                {
                    "id": "27",
                    "value": "8",
                    "color" : "#f65122"
                },
                {
                    "id": "159",
                    "value": "3",
                    "color" : "#fcc50b"
                },
                {
                    "id": "142",
                    "value": "3",
                    "color" : "#f65122"
                },
                {
                    "id": "141",
                    "value": "9",
                    "color" : "#f3172d"
                },
                {
                    "id": "173",
                    "value": "9",
                    "color" : "#f3172d"
                },
                {
                    "id": "113",
                    "value": "5",
                    "color" : "#f65122"
                },
                {
                    "id": "193",
                    "value": "5",
                    "color" : "#f65122"
                },
                {
                    "id": "122",
                    "value": "9",
                    "color" : "#f65122"
                }
            ]
        }
    }

    render() {
        return (
            <React.Fragment>
                <div style={{ width: '100%', margin: '20px', textAlign: 'center' }}><button><Link to="/">Back to home</Link></button></div>
                <div style={{ textAlign: 'center' }}>
                    <ReactFC
                        type="worldwithcountries"
                        width="80%"
                        height="500"
                        dataFormat="JSON"
                        dataSource={this.state.dataSource} />
                </div>
            </React.Fragment>);
    }
}

export default MapChart;

对于这个问题的任何帮助将不胜感激。谢谢！

Answer 1

Fusion Maps XT 提供交互式地图，可以有效地绘制地理数据，例如按地区划分的收入、按州划分的人口、调查和选举结果。您还可以在地图上放置标记以查明办公地点和航线等地点。它拥有超过 1000 张地图，包括各大洲、主要国家和美国所有州。

Fusion 图表库最初没有提供任何地图集合。每当您在初始基础上安装融合图表库时，它在包的地图文件夹中只有很少的地图文件。由于这个原因，您的文件在整个包中不可用。他们在他们的官方页面上提供了链接，可以下载所有与融合地图相关的地图。

要渲染这些地图，您需要从此处下载地图定义文件并将地图文件夹复制粘贴到您的融合图表目录中。

请按步骤操作

1. 打开链接https://www.fusioncharts.com/download/map-definition-files
2. 单击下载地图定义文件(https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip)，其中包含 Fusion Maps XT 中可用的所有地图的集合所有 Fusion Maps XT 中可用的地图
3. 下载后，从此下载包中复制 /maps 文件夹并将其粘贴到您的融合图表文件夹中。
4. 现在运行您现有的应用程序，将找到该文件并且您的反应应用程序将按预期工作。

每个信息都已在融合图表的官方网站上定义但方式不正确，因此在之前定义的链接的帮助下，您将直接重定向到该说明页面。

在 GitHub 上，我使用 fusionchart 库创建了一个包含地图的存储库，因此您可以下载该存储库并检查地图的确切功能。

GitHub Repository

Answer 2

由于您在应用程序中使用国家地图来渲染世界，因此您需要导入 fusioncharts.worldwithcounties.js，但是，如果您通过 npm 安装 FusionCharts，它的地图文件夹中没有 worldwithcountries 文件，要获取您需要的文件需要安装fusionmaps，这里是链接-https://www.npmjs.com/package/fusionmaps 这将安装所有地图定义文件，然后您可以使用以下命令：

import World from 'fusionmaps/maps/fusioncharts.worldwithcountries';