D3js & Highcharts & echarts

 
  First let's talk about the difference between Canvas and Svg 
 

  
   Canvas:

  
   pixel-based

  
   single html, similar to drawing on canvas

  
   Echarts draws based on Canvas

  
   Svg:

  
   object model

  
   multiple graphic elements

  
   High fidelity even with amplification without distortion

 
  castrates 
 

 
  First, let's have a general understanding of the history of echarts:  
 

 
  echarts is a chart library developed by Baidu's front-end.  
 

 
  Support column chart, pie chart, K-line chart, map chart, heat map, line chart  
 

 
  Mainly use canvas to draw. 
 

 
  Official website:  
  http://echarts.baidu.com/index.html

 
  Official website example:  
  http://echarts.baidu.com/examples.html

 
  API Documentation:  
  http://echarts.baidu.com/api.html#echarts

 
  Resource download:  
  http://echarts.baidu.com/download.html

 
  Get started with ECharts in 5 minutes:  
  http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

 
  highchart 
 

 
  highcharts is a chart library developed by a foreign company, mainly using svg drawing.  
 

 
  There are also many supported charts and powerful functions. 
 

 
  Official website  
  :  
  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开发过程中选择使用哪一个插件是很重要的问题。大多情况一般会从以下几点考虑。 
 

 
兼容性 
 

 
  使用一个插件之前必须要先评估一下它对浏览器的兼容性，不然写完了发现没法儿用就得不偿失了。 
 

 
  经过多次尝试，我初步判断这三个插件的兼容性是这样的： 
 

Highcharts 兼容 IE6 及以上的所有主流浏览器，完美支持移动端缩放、手势操作。
Echarts 兼容 IE6 及以上的所有主流浏览器，同样支持移动端的缩放和手势操作。
D3 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。

 
  也就是说，这三个插件都兼容IE9及以上的所有主流浏览器，但如果开发需求中包括IE7/IE8，那么就只能选择Highcharts或者Echarts了。 
 

 
是否免费/开源 
 

Highcharts 非商业免费，商业需授权，代码开源。
Echarts 完全免费，代码开源。
D3 完全免费，代码开源。

 
  考虑到Highcharts用于商业用途时还需要授权，而其它两个都不需要，那么在其他条件都相同的情况下，可以考虑用另外两个插件。 
 

 
难易程度 
 

Highcharts 基于SVG，方便自己定制，但图表类型有限。
Echarts 基于Canvas，适用于数据量比较大的情况。
D3.v3 基于SVG，方便自己定制；D3.v4支持Canvas+SVG，如果计算比较密集，也可以选择用Canvas。除此之外，D3图表类型非常丰富，几乎可以满足所有开发需求，但代码相对于以上两个插件来说，会稍微难一点。

 
  基于此，如果你能力很强，可以直接用D3。反之，如果你是一个初学者或者对于这方面没那么熟悉，那么就要从这几点来考虑了：如果数据量比较大，可以考虑Echarts；如果只是一些简单的数据，且客户对界面定制较多，则可以考虑使用highcharts；如果前两者都不能满足需求，那么就只能用D3来一点一点做了。 
 

 
  （前端小白，如有错误，欢迎指正~~，） 
 

（PS:好久没更了，最近在看这几个的官方文档，有点晕。。。）

D3js & Highcharts & echarts

Guess you like