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

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

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

Line Chart	Bar Chart
Radar Chart	Pie Chart
Polar Area Chart	Doughnut Chart

快速上手

你可以到 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:

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

如何動態增加資料點？

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

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

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