1. The front end data visualization plug: Highcharts, Echarts and D3 (difference)

Front-end data visualization plug-in has a lot, but I only used Highcharts ( https://www.hcharts.cn/ ), Echarts ( http://echarts.baidu.com/ ) and D3 ( https://d3js.org / ),

Web development process to choose which one to use plug-in is a very important issue. For me personally, generally consider the following points.

 

1. Compatibility

You must first assess the compatibility before using a browser plug-in, or found not finished with the children more harm than good.

After several attempts, my initial judgment compatibility of these three plug-ins like this:

1. Highcharts compatible with IE6 and above all major browsers, the perfect support for mobile end zoom, gestures.
2. Echarts compatible with IE6 and above all major browsers, mobile terminal also supports zooming and gesture.
3. D3 is compatible with IE9 and above all major browsers, compatibility for mobile terminals also ibid.

 

In other words, these three plug-ins are compatible with IE9 and above all major browsers, but if the development needs include IE7 / IE8, then you can only choose a Highcharts or Echarts.

 

2. Are Free / Open Source

1. Highcharts free for non-commercial, business needs authorization code is open source.
2. Echarts totally free, open source code.
3. D3 totally free, open source code.

 

Considering the Highcharts authorization will also be required for commercial use, while the other two do not need, then, all other things being equal, the other two could be considered plug.

 

3. The degree of difficulty

1. Highcharts based on SVG, customize their own convenience, but limited the chart type.
2. Echarts based Canvas, a case for the larger amount of data.
3. D3.v3 based on SVG, to facilitate their custom; D3.v4 support Canvas + SVG, if the calculation-intensive, you can also choose to use Canvas. In addition, D3 chart type is very rich, almost all developed to meet the demand, but the code with respect to two or more plug-ins, it will be a little bit difficult.

　　Based on this, if you are strong, you can directly use D3. On the other hand, if you are a beginner or not so familiar in this regard, then they would have to consider these points: if a large amount of data can be considered Echarts; if only some simple data, and customer interface customization than and more, consider using highcharts; if the first two can not meet the demand, then you can only use a little bit D3 to do.

 

general:

　　1, the development time is short, so it limits the use of D3.js.

　　2, to try to reduce the cost of development, so it can not be used hightcharts.js (hightcharts is a free personal, commercial paid framework). Therefore, under the repeated comparison of the final choice echarts.js