数据可视化工具D3js HighchartsEcharts
首先先说一下Canvas和Svg的区别
Canvas:
基于像素
单个html,类似于在画布上画画
Echarts基于Canvas画图
Svg:
基于对象模型
多个图形元素
高保真 即放大也不会失真
echarts
先大体了解一下echarts的历史：
echarts是百度公司前端开发的一个图表库。
支持柱状图、饼状图、k线图、map图、热导向图、折线图
主要采用canvas画图。
官方网站： http://echarts.baidu.com/index.html
官网实例： http://echarts.baidu.com/examples.html
API文档： http://echarts.baidu.com/api.html#echarts
资源下载： http://echarts.baidu.com/download.html
5 分钟上手 ECharts： http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
highchart
highcharts是国外的一家公司开发的图表库，主要采用svg画图。
支持的图表也很多，功能也比较强大。
官方网站 ： http://www.hcharts.cn/
D3.js
3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术结合起来, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化.
官方网站： https://d3js.org/
推荐学习网站： http://www.cnblogs.com/tanlujia/p/6376686.html
Web开发过程中选择使用哪一个插件是很重要的问题。大多情况一般会从以下几点考虑。
1.兼容性
使用一个插件之前必须要先评估一下它对浏览器的兼容性，不然写完了发现没法儿用就得不偿失了。
经过多次尝试，我初步判断这三个插件的兼容性是这样的：
- Highcharts 兼容 IE6 及以上的所有主流浏览器，完美支持移动端缩放、手势操作。
- Echarts 兼容 IE6 及以上的所有主流浏览器，同样支持移动端的缩放和手势操作。
- D3 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。
- Highcharts 非商业免费，商业需授权，代码开源。
- Echarts 完全免费，代码开源。
- D3 完全免费，代码开源。
- Highcharts 基于SVG，方便自己定制，但图表类型有限。
- Echarts 基于Canvas，适用于数据量比较大的情况。
- D3.v3 基于SVG，方便自己定制；D3.v4支持Canvas+SVG，如果计算比较密集，也可以选择用Canvas。除此之外，D3图表类型非常丰富，几乎可以满足所有开发需求，但代码相对于以上两个插件来说，会稍微难一点。
（PS:好久没更了，最近在看这几个的官方文档，有点晕。。。）
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！