開發(fā)人員很多時候需要使用圖表來表現(xiàn)一些數(shù)據(jù),而一張圖表往往能夠比幾行密密麻麻的數(shù)字表格更能直觀地展示數(shù)據(jù)內(nèi)容。隨著Web技術(shù)的發(fā)展,從傳統(tǒng)只能依 靠于flash、IE的vml,各個瀏覽器尚不統(tǒng)一的svg,到如今規(guī)范統(tǒng)一的canvas、svg為代表的html5技術(shù),表現(xiàn)點、線、面要素的技術(shù)已 經(jīng)越來越規(guī)范成熟。我在本篇文章中收集了10款免費開源且比較優(yōu)秀的圖表制作插件,以供各位參考。
1,ichartjs(國產(chǎn))
ichartjs是一款優(yōu)秀的國產(chǎn)開源插件,作者是王鶴,英文名taylor,畢業(yè)于南昌大學(xué)軟件工程專業(yè)。
ichartjs 是一款基于HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標(biāo)簽繪制各式圖形。 ichartjs致力于為您的應(yīng)用提供簡單、直觀、可交互的體驗級圖表組件。是WEB/APP圖表展示方面的解決方案 。如果你正在開發(fā)HTML5的應(yīng)用,ichartjs正好適合您。 ichartjs目前支持餅圖、環(huán)形圖、折線圖、面積圖、柱形圖、條形圖。ichartjs是基于Apache License 2.0協(xié)議的開源項目。
2,echarts(國產(chǎn))
Echarts是百度前端團隊做的基于html5-canvas的開源圖表繪制組件。
幾個特性如下:
拖拽重計算:拖拽重計算特性(專利)帶來了數(shù)據(jù)統(tǒng)計圖表從未有過的用戶體驗,允許用戶對統(tǒng)計數(shù)據(jù)進行有效的提取、整合,甚至在多個圖表間交換數(shù)據(jù),賦予了用戶對數(shù)據(jù)進行挖掘、整合的能力。
大規(guī)模數(shù)據(jù)模式:如何展現(xiàn)成千上百萬的數(shù)據(jù)?貌似除了用專業(yè)的統(tǒng)計工具(如MATLAB)外別無選擇?不,在擁有眾多交互特性下ECharts依然可以做到直角系圖表(折、柱、散點、K線)20萬數(shù)據(jù)秒級出圖。
值域漫游:基于坐標(biāo)的圖表(如地圖、散點圖)通過色彩變化表現(xiàn)數(shù)值的大小能直觀形象的展示數(shù)據(jù)分布。但如何聚焦到我所關(guān)心的數(shù)值上?ECharts擁有值域漫游的功能,讓你可以輕松進行數(shù)值篩選。
3,Loongchart(國產(chǎn))
LoongChart是一款基于HTML5-Canvas的開源信息圖表繪制組件,難能可貴的是該插件能夠兼容IE7、IE8,但動畫效果較差,靜態(tài)顯示效果基本滿足要求。
有以下特點:
純html5及Javascript,跨平臺,原生支持現(xiàn)代瀏覽器,兼容IE7、IE8,不依賴任何框架;
支持多種常用繪圖類型;
支持組合圖;
支持核心代碼內(nèi)的語言設(shè)定(用于錯誤提示);
支持動畫(可關(guān)閉);
支持皮膚設(shè)定以及自定義定制皮膚功能;
部分圖形支持3D圖
支持自定義繪圖;
記錄最終繪制的圖形中的各元素位置、大小等信息,以供查詢;
支持直接導(dǎo)出圖片(非全部均瀏覽器支持);
LoongChart官網(wǎng)有一個比較貼心的功能,它支持在線修改選項和查看選項,并可以實時顯示修改選項后的效果。如果用戶找到合適的選項,就可以直接查看實時選項并復(fù)制到自己的項目中,非常方便。