javascript - React highcharts中的世界地图路径数据

Question

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

Link 1

Link 2

我在很多小教程中看到数据来自高 map 本身，只需传递这样的键即可

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

参见示例 here

但鉴于我正在编写一个纯 reactJS/nodeJS 应用程序，我想知道是否有一种纯 react 方法来提取世界地图的路径数据？这是为了在某处对高 map 使用react吗？

Answer 1

根据official Highcharts documentation您必须手动包含 map 脚本:

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.

正如您在 the fiddle 中看到的那样您提到过，他们将 map 包含在脚本标签中:

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

由于上述脚本包含， map 在 Highcharts.maps['custom/world'] 中可用。

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

1. 从这里获取:https://code.highcharts.com/mapdata/custom/world.js
2. 将上述文件中的 Highcharts.maps["custom/world"] = 替换为 module.exports =。
3. 在你的组件中加载 map const map = require('./maps/world');
4. 然后你可以在配置中引用它mapData:map

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

---

实际上，您可以通过一种骇人听闻的方式来做到这一点...在包含 react 脚本的 html 文件中，您可以包含 world.js 脚本标记，但首先您必须确保 Highcharts.maps 对象数组存在。以这种方式，您将在外部使用 map 。

但是这是一个不好的做法，因为您的 React 的组件将依赖于该 map 脚本。

良好做法是通过包管理器管理您的 vendor 模块并引用组件中的模块。这样，组件是自描述的