Javascript chart plugins 介紹

在這個資訊爆炸的時代,我們可以藉由 Google 大神找出許多 plugins,但你仍需花時間過濾這些資源的可用性,像是版本是否持續更新、瀏覽器版本支援程度、不同裝置間適應性等等。

這次我們整理出三款的圖表 plugins 給你,除了版本持續在更新、支援 RWD 外,更提供線上編輯的服務,當你需要一份資料圖表時,可以先在線上預覽樣式,客製屬於你的專屬圖表。

 

 

Highcharts

輕量級的大小提供良好效能,樣式簡潔簡單,IE9 以下的用戶支援,若使用者需在舊版本作業,Highcharts 是個好的選擇,Highcharts也提供了不同瀏覽器間的繪圖技術及性能,供開發者作為參考。

CHARTIST.JS

CHARTIST.JS 圖表為SVG 格式,支援 Sass 架構,CSS 和 JavaScript 分離,不只程式碼清楚,CSS 可依照個人化調整樣式、動畫及響應式設計( media queries ),10KB的大小使用上非常方便。

Canvas.JS

Canvas.JS 提供簡單的 API 讓你好上手,除此之外他們更強調跨裝置、平台特性,擁有比傳統 Flash / SVG 更佳的體驗,對主流的瀏覽器及大量資料轉換是個好選擇,需注意的是 Canvas 為 HTML5中的新特性,所以並非所有瀏覽器都有良好支援。

Canvas.JS 提供 24種不同類型圖表,選好 Demo 後就可以進行線上編輯,但 Canvas.JS 並非完全免費,若有商業用途則需付費使用。

善用 plugins 可以加速我們的下班速度 開發速度,但使用 plugins 前別忘了注意使用文件、支援環境、 github issue 等等,了解這組套件特性,才不會發生使用 plugins 卻做更多事情的窘境。