目录
五、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://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的方案:https://www.highcharts.com.cn/docs/install-fro