圖表匯總

原文摘自:https://www.bbsmax.com/A/D854eq2vdE/

不管是哪個領(lǐng)域的開發(fā),都有機會用到圖表來做統(tǒng)計分析,以更直觀的表現(xiàn)形式來代替?zhèn)鹘y(tǒng)的文字。在以前,圖表控件主要有使用程序代碼生成的靜態(tài)圖片,或者是使用flash實現(xiàn)的圖表控件。

在HTML5非常流行的當(dāng)下,現(xiàn)代瀏覽器提供越來越強大的功能,涌現(xiàn)出許多優(yōu)秀的圖表控件,它們基于Canvas/SVG技術(shù)來繪制圖表(低版本IE使用VML技術(shù)),不再需要flash等額外的插件,提供豐富的表現(xiàn)形式以及交互方式,而且性能更加優(yōu)越。

對于不支持Canvas的瀏覽器(主要是針對IE),一般都是使用excanvas來適配,它會自動轉(zhuǎn)化成vml來兼容。

Rapha?l

主頁:http://raphaeljs.com/

一個小型的js庫,但是功能非常強大,可以用它在頁面上繪制任意類型的圖形,以及對圖形進行一些操作。

D3

主頁:http://d3js.org/

以數(shù)據(jù)驅(qū)動的方式來構(gòu)建可視化圖表,但是操作起來并不簡單,而且只支持現(xiàn)代瀏覽器(古董瀏覽器就白白吧)

Highcharts

主頁:http://www.highcharts.com

純js實現(xiàn),兼容所有現(xiàn)代瀏覽器,包括iPhone/iPad的移動瀏覽器,甚至包括古董的IE6。

主要使用SVG技術(shù)來渲染,IE8及以下使用VML技術(shù)。內(nèi)置jQuery的支持,對于Mootools和PrototypeJS也提供適配。更詳細的兼容性請看:http://www.highcharts.com/documentation/compatibility

支持折線圖、樣條圖、面積圖、面積樣條圖、柱形圖、條形圖、餅圖、散點圖、極坐標(biāo)圖、儀表圖、范圍圖表系列等圖表類型。

Chart.js

主頁:http://www.chartjs.org/

輕量級的js控件(4.5k),不依賴任何js庫如jQuery等,有較多的選項可以控制,良好的表現(xiàn)效果。

主要提供折線圖、條形圖、雷達圖、餅圖、極坐標(biāo)圖、圓環(huán)圖。

gRapha?l

主頁:http://g.raphaeljs.com/

基于raphaeljs創(chuàng)建折線圖、條形圖、柱狀圖、餅狀圖等,兼容所有主流瀏覽器。

RGraph

主頁:http://www.rgraph.net/

基于HTML5 Canvas,支持超過20種不同類型的圖表:條形、現(xiàn)狀、餅圖、儀表圖,用于計劃管理的甘特圖、漏斗圖、瀑布圖等。

morris.js

主頁:http://www.oesmith.co.uk/morris.js/

基于jQuery和Raphaeljs,支持折線圖、柱狀圖、面積圖、圓環(huán)圖等。

xCharts

主頁:http://tenxer.github.io/xcharts/

基于D3的圖表,支持折線圖、柱狀圖、時序圖等。

dhtmlxChart

主頁:http://dhtmlx.com/docs/products/dhtmlxChart

跨瀏覽器的HTML5圖表,支持折線圖、柱狀圖、面積圖、餅圖等,支持XML/JSON等格式的數(shù)據(jù)源。此外,還有dhtmlxGantt專門用于顯示甘特圖。

GoJS

主頁:http://gojs.net/

使用canvas,用于創(chuàng)建交互式圖表(主要是在網(wǎng)頁中連接各種元素),功能相當(dāng)強大。

jsPlumb

主頁:http://jsplumbtoolkit.com

用于在網(wǎng)頁中連接UI元素,支持主流瀏覽器。

InfoVis

主頁:http://philogb.github.io/jit/

用于創(chuàng)建各種交互式圖表,如面積圖、條形圖和餅圖,但主要是用于創(chuàng)建一些圖形,并對他們進行連接。

Flot

主頁:http://www.flotcharts.org/

基于jQuery的圖表庫,支持折線圖、柱形圖、時序圖等,并可以通過插件擴展不同的圖表類型。

Cubism.js

主頁:http://square.github.io/cubism/

D3的插件,用于顯示時序圖。

peity

主頁:http://benpickles.github.io/peity/

jQuery插件,生成迷你的折線圖、餅圖、條形圖、時序圖等,使用非常靈活。

jQuery Sparklines

jQuery插件,用于生成迷你圖表如折線圖、柱狀圖等。

Timeline

主頁:http://almende.github.io/chap-links-library/timeline.html

交互式的時間軸圖表,可以自由移動、拖動、放大以及在時間軸中編輯。

Smoothie Charts

主頁:http://smoothiecharts.org/

迷你的時序圖

jQuery.Gantt

主頁:https://github.com/thegrubbsian/jquery.ganttView

基于jQuery的甘特圖插件,支持編輯、縮放等。

jQuery.ganttView

主頁:https://github.com/thegrubbsian/jquery.ganttView

基于jQuery的甘特圖插件,支持拖拽以及調(diào)整大小。

JointJS

主頁:http://jointjs.com/

用于創(chuàng)建各種圖表并對它們進行連接,支持所有現(xiàn)代標(biāo)準(zhǔn)瀏覽器,但是對古董瀏覽器支持不太好(ie9-)。

arbor.js

主頁:http://arborjs.org/

用于創(chuàng)建動態(tài)的連接圖,在IE下無法工作。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容