2023-02-18
0
0 前端数据可视化插件有很多，但我用过的只有Highcharts（ https://www.hcharts.cn/）、Echarts（ http://echarts.baidu.com/）和D3（ https://d3js.org/），
Web开发过程中选择使用哪一个插件是很重要的问题。就我个人而言，一般会从以下几点考虑。
1.兼容性
使用一个插件之前必须要先评估一下它对浏览器的兼容性，不然写完了发现没法儿用就得不偿失了。
经过多次尝试，我初步判断这三个插件的兼容性是这样的：
Highcharts 兼容 IE6 及以上的所有主流浏览器，完美支持移动端缩放、手势操作。
Echarts 兼容 IE6 及以上的所有主流浏览器，同样支持移动端的缩放和手势操作。
D3 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。
也就是说， 这三个插件都兼容IE9及以上的所有主流浏览器，但如果开发需求中包括IE7/IE8，那么就只能选择Highcharts或者Echarts了。
2.是否免费/开源
Highcharts 非商业免费，商业需授权，代码开源。
Echarts 完全免费，代码开源。
D3 完全免费，代码开源。
考虑到 Highcharts用于商业用途时还需要授权，而其它两个都不需要，那么在其他条件都相同的情况下，可以考虑用另外两个插件。
3.难易程度
Highcharts 基于SVG，方便自己定制，但图表类型有限。
Echarts 基于Canvas，适用于数据量比较大的情况。
D3.v3 基于SVG，方便自己定制；D3.v4支持Canvas+SVG，如果计算比较密集，也可以选择用Canvas。除此之外，D3图表类型非常丰富，几乎可以满足所有开发需求，但代码相对于以上两个插件来说，会稍微难一点。
而这些都是基于SVG 和Canvas的，那么下边是他们的区别
Canvas
依赖分辨率
不支持事件处理器
文本渲染力弱
能够以 .png 或 .jpg 的格式保存结果图形
最合适图像密集型的游戏，其中许多的对象会被频繁的重绘
SVG
不依赖分辨率
支持事件处理器
最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
不适合游戏的应用
复杂度高会减慢渲染的速度
以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入 或者 直接在html文件中引入SVG标签
