- 收費角度
- 兼容性
- 難易程度
- 適用場景
是否收費
- Echarts 完全免費,代碼開源。
- D3 完全免費,代碼開源。
- Highcharts 非商業免費,商業需授權,代碼開源。
兼容性
- Highcharts 兼容 IE6 及以上的所有主流瀏覽器,支持移動端縮放、手勢操作。
- Echarts 兼容 IE6 及以上的所有主流瀏覽器,支持移動端的縮放和手勢操作。
- D3 兼容IE9 及以上的所有主流瀏覽器,支持移動端的縮放和手勢操作。
難易程度
- 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標籤