Chart.js: 一个简单的 JS Chart Library

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

底下是 Chart.js 所提供的 6 中 Charts的实例图形，包括了折线图、柱形图、圆饼图等，这样很容易在html网页中实现动态图的效果:

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 把动画关掉。

然后就可以动态增加数据点：