21個(gè)實(shí)用的Javascript數(shù)據(jù)圖表插件

六月 16, 2015

評(píng)論 (2)

Sponsor

今天主要和大家分享一些統(tǒng)計(jì)圖表相關(guān)的JS插件，圖表通常用在網(wǎng)站后臺(tái)界面，作為一種可視化數(shù)據(jù)形式展示，能讓用戶直觀的查看統(tǒng)計(jì)信息，然而圖表在WEB上實(shí)現(xiàn)是比較復(fù)雜的，特別有些要實(shí)現(xiàn)移動(dòng)端顯示，這樣的前端代碼編寫難度較高，所以如果能使用一些圖表庫(kù)就方便多了。

在本文我們精選了21個(gè)優(yōu)秀的Javascript數(shù)據(jù)圖表插件，支持很多不同類型的圖表庫(kù)，而且多數(shù)是開源代碼，可以免費(fèi)使用，值得前端人員收藏。

Chartist.js

Chartist 是一個(gè)響應(yīng)式圖表庫(kù)，支持桌面和移動(dòng)平臺(tái)使用，支持CSS動(dòng)畫，但兼容性需要在IE9以上，其它流行的瀏覽器一般都兼容了。 版權(quán):?免費(fèi)使用

ECharts

ECharts，縮寫來(lái)自Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器(IE6/7/8/9/10/11，chrome，firefox，Safari等)，底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

支持折線圖(區(qū)域圖)、柱狀圖(條狀圖)、散點(diǎn)圖(氣泡圖)、K線圖、餅圖(環(huán)形圖)、雷達(dá)圖(填充雷達(dá)圖)、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時(shí)提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等7個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)。

FusionCharts

版權(quán): 免費(fèi)個(gè)人使用，商業(yè)用途需付費(fèi)

Dygraphs

要在IE8以上才能正常瀏覽 版權(quán):免費(fèi)使用

Chart.js

Chart.js 是一個(gè)輕量的圖表庫(kù)，大小只有11KB，圖表設(shè)計(jì)簡(jiǎn)約，速度快，如果用于一些小型數(shù)據(jù)展示，我想這個(gè)很適合。 版權(quán):?免費(fèi)使用

Google Charts

Highcharts

版本：個(gè)人免費(fèi)使用，商業(yè)用途需付費(fèi)

Flot

版權(quán)：免費(fèi)使用

D3.js

版權(quán)：免費(fèi)使用

n3-charts

版權(quán)：免費(fèi)使用

NVD3

版權(quán)：免費(fèi)使用

Ember Charts

版權(quán)：免費(fèi)使用

jQuery Sparklines

版權(quán)：免費(fèi)使用

Sigma.js

版權(quán)：免費(fèi)使用

Morris.js

版權(quán)：免費(fèi)使用

Cytoscape.js

版權(quán)：免費(fèi)使用

C3.js

版權(quán)：免費(fèi)使用

Rickshaw

版權(quán)：免費(fèi)使用

Cubism.js

版權(quán)：免費(fèi)使用

Plottable.js

版權(quán)：免費(fèi)使用

Canvas.js

版權(quán)：免費(fèi)個(gè)人使用，商業(yè)需付費(fèi)

如果有更好的Javascript圖表插件，歡迎在下方留言處分享給大家：)

推薦：查看最受歡迎的 301 個(gè)設(shè)計(jì)網(wǎng)站 → http://hao.shejidaren.com

交流：結(jié)交更多有才華的設(shè)計(jì)師？請(qǐng)加入U(xiǎn)I設(shè)計(jì)QQ群，與50000名設(shè)計(jì)師交流設(shè)計(jì)。

贊助商鏈接

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關(guān)注我們的微博，謝謝支持。

版權(quán)：除非注明，本站文章均為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)聯(lián)系我們授權(quán)，否則禁止轉(zhuǎn)載。

斷天涯大蝦 -

2016 年 11 月 06 日 下午 8:47

不錯(cuò)不錯(cuò)，如果也包含了FlexChart圖表控件的介紹，就更好了

Win7en樂園 -

2015 年 06 月 17 日 上午 10:49

學(xué)習(xí)了哈！

{ 發(fā)表評(píng)論 }

姓 名 (必填)

郵 件 (必填)

網(wǎng) 站

總結(jié)

以上是生活随笔為你收集整理的sparklines插件_21个实用的Javascript数据图表插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。