2013年9月7日 星期六

Chart.js: 一個簡單的 JS Chart Library

Chart.js 是一個 Open Source 的 JavaScript Chart Library。它一共有 6 種 Chart,全都是 HTML5 based。

底下是 Chart.js 所提供的 6 種 Charts:

Line Chart

image
Bar Chart
image
Radar Chart
image
Pie Chart
image
Polar Area Chart
image
Doughnut Chart
image
快速上手

你可以到 github 下載 Chart.js: https://github.com/nnnick/Chart.js。Chart.js 只需要一個 .js 檔,你可以選擇一般版的 Chart.js,也可以選擇瘦身版的 Chart.min.js。

從 github 下載後,在 samples 資料夾就有 6 種 Chart 的範例。比如打開 samples/line.html 後,瀏覽器馬上就會畫出這樣一張 Line Chart:

image

line.html 的內容如下 (JavaScript 部份):

如何動態增加資料點?

Chart.js 沒有提供動態增加資料點的方法,這實在有點可惜。不過,我花了點時間研究了一下,發現還是有解。我的方法是這樣:在修改 datasets 的內容後,就再呼叫 new Chart() 重新產生 Chart。程式碼範例如下:

有一點要特別注意,因為 Chart.js 在畫圖時會有動畫,所以必須把 animation 設成 flase 把動畫關掉。

然後就可以動態增加資料點囉:

image

沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。