使用熔合图不加载地图

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

融合地图XT提供交互式地图来绘制地理数据，如按地区划分的收入、按州分列的人口、有效的调查和选举结果。您还可以在地图上放置标记，以精确定位办公地点和飞行路线。它有1000多张地图，包括各大洲、主要国家和所有美国国家。

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

要呈现这些地图，您需要从这里下载地图定义文件，并在您的融合图表目录中复制粘贴映射文件夹。

请按照步骤

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

每个信息已经定义在它的融合图表的官方网站，但不是以适当的方式，所以在链接的帮助下，之前定义的，你将直接重定向到那个指令页面。

在GitHub上，我使用聚束图库创建了一个带有地图图表的存储库，这样您就可以下载该存储库并检查地图图表的确切功能。

GitHub仓库

Answer 2

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

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