世界地图路径数据反应高图表

我正在查看反应highmaps文档,看起来他们已经硬编码/保存了地图数据:

https://github.com/kirjs/react-highcharts https://github.com/kirjs/react-highcharts/tree/master/demo/src/mapdata

我在很多小教程中看到,虽然数据来自高地图,只需传递这样的密钥

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

请参见此处的示例:http://jsfiddle.net/gh/get/jquery/3.1.1/highcharts/highcharts/tree/master/samples/maps/tooltip/usehtml/

但考虑到我正在编写一个纯粹的reactJS/nodeJS应用程序,我想知道是否有一种纯粹的反应来吸引世界地图的路径数据？这是部署在某处的高地图吗？

根据官方的Highcharts文档,您必须手动包含地图脚本:

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

正如您在上面提到的小提琴中所看到的,它们包含带有脚本标记的地图:

由于上面的脚本包含,地图可用Highcharts.maps['custom/world'].

因此,在React模块中,您必须手动添加所需的地图,就像您提到的演示一样.例如,如果要添加世界地图,则:

从这里获取它:https://code.highcharts.com/mapdata/custom/world.js

更换Highcharts.maps["custom/world"] =用module.exports =在上面的文件.

在组件中加载地图 const map = require('./maps/world');

然后你可以在配置中引用它 mapData: map

我知道您想跳过上述过程,但目前没有任何包含地图的React模块.

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

然而,这是一种不好的做法,因为您的React的组件将取决于该映射脚本.

良好的做法是通过包管理器管理您的供应商模块并引用组件中的模块.以这种方式,组件是自描述的