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 把動畫關掉。
然後就可以動態增加資料點囉：
沒有留言:
張貼留言
注意：只有此網誌的成員可以留言。