世界地图路径数据反应高图表 [英] World map paths data in react high charts

问题描述

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

I am looking at the react highmaps documentation and it seems like they have hardcoded/saved the map data:

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

我在许多小教程中看到，虽然数据来自高地图本身只需传递一个这样的键

I see in a lot of little tutorials though that the data comes from high maps itself by just passing a key like this

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

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

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

But given that I am writing a pure reactJS/ nodeJS app, I was wondering if there is a way in pure react to pull in the path data for world maps? Is this deployed to react high maps somewhere?

推荐答案

根据官方Highcharts文档你必须手动包含地图脚本：

According the official Highcharts documentation you have to manualy include the map script:

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

In short, the GeoJSON version of the map is loaded in a script tag in the page. This GeoJSON object is then registered to the Highcharts.maps object, and applied to the mapData option in the chart setup.

正如你在，它们包括带有脚本标签的地图：

As you can see in the fiddle you mentioned, they included the map with the script tag:

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

由于上面的脚本包含，地图可在 Highcharts.maps中找到['custom / world'] 。

Because of the above script include, the map is available in Highcharts.maps['custom/world'].

所以在React模块中你必须手动添加所需的地图，就像你提到的演示一样。例如，如果您要添加世界地图，则：

So in the React module you have to manually add the desired maps, like in the demo you mentioned. For example, if you want to add the World map, then:

1. 从此处获取： https://code.highcharts.com/mapdata/custom/world.js


2. 在上面的文件中用 module.exports = 替换 Highcharts.maps [custom / world] = 。


3. 在组件中加载地图 const map = require（'./ maps / world'）;


4. 然后你可以在配置中引用它 mapData：map

1. Get it from here: https://code.highcharts.com/mapdata/custom/world.js
2. Replace Highcharts.maps["custom/world"] = with module.exports = in the above file.
3. Load the map in your component const map = require('./maps/world');
4. Then you can reference it in the config mapData: map

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

I understand that you want to skip the above process, but currently there isn't any React module that includes the map.

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

Actually there is a hackish way you can do it ... In your html file, where the react scripts are included, there you can include world.js script tag, but first you have to make sure that Highcharts.maps object array exist. In that fashion you'll use the maps externally.

然而，这是一个不良做法，因为你的React的组件将取决于地图脚本。

However this is a bad practice, because of your React's components will be dependend on that map script.

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

Good practice is to manage your vendor modules via package manager and reference the modules in the components. In that way the components are self-descriptive

这篇关于世界地图路径数据反应高图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！