Javascript react高图表中的世界地图路径数据

我正在查看react highmaps文档，似乎他们已经硬编码/保存了地图数据

我在很多小教程中看到，数据来自high maps本身，只需传递这样一个键

mapData: Highcharts.maps['custom/world'],

参见示例

但是考虑到我正在编写一个纯reactJS/nodeJS应用程序，我想知道在纯react中是否有一种方法可以为世界地图提取路径数据？这是为了在某个地方对高级贴图做出反应而部署的吗？

根据需要，您必须手动包括贴图脚本：

简而言之，地图的GeoJSON版本加载在中的脚本标记中 这一页。然后将此GeoJSON对象注册到 Highcharts.maps对象，并应用于图表中的mapData选项 设置

正如您在前面提到的中所看到的，它们包括带有脚本标记的地图：

<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

由于上面的脚本include，该映射在

Highcharts.maps['custom/world']

中可用

因此，在React模块中，您必须手动添加所需的贴图，如您提到的演示中所示。例如，如果要添加世界地图，则：

从这里获取：

将上述文件中的

Highcharts.maps[“custom/world”]=

替换为

module.exports=

在组件中加载映射

const map=require（'./maps/world'）

然后您可以在config

mapData:map

我知道您想跳过上述过程，但目前没有任何包含map的React模块

---

事实上，有一种黑客的方式可以做到这一点。。。在包含react脚本的html文件中，可以包含world.js脚本标记，但首先必须确保Highcharts.maps对象数组存在。以这种方式，您将在外部使用贴图

但是，这是一种不良做法，因为React的组件将依赖于该映射脚本

---

良好做法是通过package manager管理供应商模块，并参考组件中的模块。通过这种方式，组件是自描述性的

我找到了另一种渲染贴图的方法

series: [{
          data: Highcharts.geojson(Highcharts.maps['https://code.highcharts.com/mapdata/cou ... /us-all.js']),
          name: 'USA',
          dataLabels: {
            enabled: true,
            format: '{point.properties.postal-code}'
          }
}]

基本上调用js源url来创建地图，但我更喜欢使用Jordan Enev的方式

我看了之后，highcharts已经提供了地图集合，您可以安装dependency@highcharts/map集合

之后你可以试试

import React, { Component } from 'react';
import Highcharts from 'highcharts/highmaps';
import exporting from 'highcharts/modules/exporting';
...
...
exporting(Highcharts);
window.Highcharts = Highcharts;
require('@highcharts/map-collection/countries/id/id-all');
...
...
class Choroplethmap extends Component {
...
...
...
}
export default Choroplethmap;

这个问题已经就此提出

---

干杯，

地图现在可从npm获得。您可以将它们直接导入组件，并通过options对象将其传递给Highcharts

npm i@highcharts/map collection

从“@highcharts/map collection/custom/world.geo.json”导入mapDataWorld

series: [
  {
    mapData: mapDataWorld,
    name: "Asia",
    data: data
  }
]

---

我不确定我是否理解你的问题。highcharts react中地图的数据只是一个对象，可以在必要时导入。因此，如果需要，请将其作为常规模块导入。当我使用npm安装highcharts时，highcharts.maps对象为空。HighSoft从2018年6月6日起确认，他们的地图集在npm上不可用。如需进一步参考，请阅读以下链接的评论：@Jordan Enev给出了您案例的唯一解决方案。地图现在可在npm上获得<代码>npm i@highcharts/地图收藏谢谢！这正是我要问的。可悲的是，没有办法做到这一点@es3735746实际上有一种黑客的方式可以做到这一点。。。在包含react脚本的html文件中，可以包含world.js脚本标记，但首先必须确保存在

Highcharts.maps

对象数组。以这种方式，您将在外部使用贴图。但是，这是一种不好的做法，因为您的React组件将依赖于该映射脚本。好的做法是通过package manager管理您的供应商模块，并参考组件中的模块。这样，组件是自描述性的。