不管是哪個領域的開發,都有機會用到圖表來做統計分析,以更直觀的表現形式來代替傳統的文字。在以前,圖表控件主要有使用程序代碼生成的靜態圖片,或者是使用flash實現的圖表控件。
在HTML5非常流行的當下,現代瀏覽器提供越來越強大的功能,涌現出許多優秀的圖表控件,它們基於Canvas/SVG技術來繪制圖表(低版本IE使用VML技術),不再需要flash等額外的插件,提供豐富的表現形式以及交互方式,而且性能更加優越。
對於不支持Canvas的瀏覽器(主要是針對IE),一般都是使用excanvas來適配,它會自動轉化成vml來兼容。
Raphaël
一個小型的js庫,但是功能非常強大,可以用它在頁面上繪制任意類型的圖形,以及對圖形進行一些操作。
D3
以數據驅動的方式來構建可視化圖表,但是操作起來並不簡單,而且只支持現代瀏覽器(古董瀏覽器就白白吧)
Highcharts
純js實現,兼容所有現代瀏覽器,包括iPhone/iPad的移動瀏覽器,甚至包括古董的IE6。
主要使用SVG技術來渲染,IE8及以下使用VML技術。內置jQuery的支持,對於Mootools和PrototypeJS也提供適配。更詳細的兼容性請看:http://www.highcharts.com/documentation/compatibility
支持折線圖、樣條圖、面積圖、面積樣條圖、柱形圖、條形圖、餅圖、散點圖、極坐標圖、儀表圖、范圍圖表系列等圖表類型。
Chart.js
輕量級的js控件(4.5k),不依賴任何js庫如jQuery等,有較多的選項可以控制,良好的表現效果。
主要提供折線圖、條形圖、雷達圖、餅圖、極坐標圖、圓環圖。
gRaphaël
基於raphaeljs創建折線圖、條形圖、柱狀圖、餅狀圖等,兼容所有主流瀏覽器。
RGraph
基於HTML5 Canvas,支持超過20種不同類型的圖表:條形、現狀、餅圖、儀表圖,用於計划管理的甘特圖、漏斗圖、瀑布圖等。
morris.js
主頁:http://www.oesmith.co.uk/morris.js/
基於jQuery和Raphaeljs,支持折線圖、柱狀圖、面積圖、圓環圖等。
xCharts
主頁:http://tenxer.github.io/xcharts/
基於D3的圖表,支持折線圖、柱狀圖、時序圖等。
dhtmlxChart
主頁:http://dhtmlx.com/docs/products/dhtmlxChart
跨瀏覽器的HTML5圖表,支持折線圖、柱狀圖、面積圖、餅圖等,支持XML/JSON等格式的數據源。此外,還有dhtmlxGantt專門用於顯示甘特圖。
GoJS
使用canvas,用於創建交互式圖表(主要是在網頁中連接各種元素),功能相當強大。
jsPlumb
用於在網頁中連接UI元素,支持主流瀏覽器。
InfoVis
主頁:http://philogb.github.io/jit/
用於創建各種交互式圖表,如面積圖、條形圖和餅圖,但主要是用於創建一些圖形,並對他們進行連接。
Flot
基於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
迷你的時序圖
jQuery.Gantt
主頁:https://github.com/thegrubbsian/jquery.ganttView
基於jQuery的甘特圖插件,支持編輯、縮放等。
jQuery.ganttView
主頁:https://github.com/thegrubbsian/jquery.ganttView
基於jQuery的甘特圖插件,支持拖拽以及調整大小。
JointJS
用於創建各種圖表並對它們進行連接,支持所有現代標准瀏覽器,但是對古董瀏覽器支持不太好(ie9-)。
arbor.js
用於創建動態的連接圖,在IE下無法工作。