Hicharts实现世界地图思路及踩过的坑（含中文GeoJSON数据集及详细代码）

目录

一、图表库的比较

二、Geojson世界地图数据集及中文翻译

三、Highcharts实现世界地图（含详细代码）

四、实现过程中踩过的坑

五、Highcharts legend图例禁止点击事件的探索及解决

---

目开发中，遇到一个需求，在世界地图相应国家中，标注相应参数。最后做出的效果如下图所示，这是符合需求的。接下来我会写一下实现思路以及在实现到发布过程中，遇到的问题。

一、图表库的比较

提到世界地图，我们应该很快想到几个库。

（1）Echarts：这个库我们并不陌生，官方给出的介绍是：ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

具体的特性及相关介绍可查看官网：https://echarts.apache.org/zh/feature.html，介绍的很详细。

（2）Highcharts：Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表。本次来写地图相关的内容，我才知道Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库。

非常牛非常好用, 但是它部分功能是要收费的, 使用之前要让公司帮你买好相应的功能才能用于商用。

同样，具体的内容可查看官网：https://www.highcharts.com.cn/docs/start-introduction

（3）G2：G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

https://www.yuque.com/antv/g2-docs/get-started

（4）D3：D3.js是一个基于数据操作文档的 JavaScript 库。D3帮助您使用 HTML、SVG 和 CSS 使数据栩栩如生。D3 对 Web 标准的强调为您提供现代浏览器的全部功能，而无需将自己束缚在专有框架中，结合了强大的可视化组件和数据驱动的 DOM 操作方法。

https://d3js.org/

图表库的比较：

https://www.cnblogs.com/duole/p/11050784.html这篇文章总结了近20个图表库

	DataV	AntV	Echarts	Highcharts	D3js
特性	（1）DataV是一个基于Vue的数据可视化组件库（当然也有React版本） （2）提供用于提升页面视觉效果的SVG边框和装饰 （3）提供常用的图表如折线图等	（1）AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。 （2）G2本身是一门图形语法，简易性和灵活性是在于你学习了这么语法之后，你能够所思即所得，用图形去表达。而他的难点是在于简易性和灵活性建立在学习了语法之后，G2的定位不是一门开箱即用的框架。	ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。	让数据可视化更简单 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库	D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。 D3.js 是一个免费的JavaScript库，可以帮助您使用数据创建图像。该工具使您能够将任意数据连接到文档对象模型（DOM），然后将数据驱动的转换应用于文档。通过DOM编程API，程序员可以将文档作为对象访问。
官方地址	http://datav.jiaminghi.com/guide/	https://antv.vision/zh	https://echarts.apache.org/zh/index.html	https://www.highcharts.com.cn/docs/how-to-create-plugins	https://d3js.org/
收费情况	阿里 免费	阿里系 免费	百度 开源免费	美国 商用的话需要付费	免费

https://zhidao.baidu.com/question/1769581487310244460.html

二、Geojson世界地图数据集及中文翻译

Highcharts官方提供的数据集地址为：https://img.hcharts.cn/mapdata/

如何使用数据集及数据集字段解析？https://www.highcharts.com.cn/docs/mapdata/

上述提到了，Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件。在实现地图的时候，要使用Highmaps，Highmaps 是继承自 Highcharts 的专门用于地图的图表插件。Highmaps 除了根据值展示地理区域色块外，还支持线段（可以表示公路，河流等）、点（城市，兴趣点等）等其他地理元素。

使用Highmaps：https://www.highcharts.com.cn/docs/highmaps-started

引入Highcharts的方案：