漂亮的 canvas 圖表 plugin- Chart.js

Chart.js 是一支用 html5 的 canvas 畫出漂亮圖表的plugin，目前提供了六種圖表類型，使用方法只要將網頁上的檔案抓下來，參考一下就可以了。
Plugin網址: Chart.js

要注意的是要支援html5 canvas 才能正常使用這支plugin，所以如果你的瀏覽器是ie，就很有可能沒辦法使用。

這邊就放他的bar的參考code給大家看一下。

view plaincopy to clipboardprint

1. var barChartData = {   
2.             labels : ["January","February","March","April","May","June","July"],   
3.             datasets : [   
4.                 {   
5.                     fillColor : "rgba(220,220,220,0.5)",   
6.                     strokeColor : "rgba(220,220,220,1)",   
7.                     data : [65,59,90,81,56,55,40]   
8.                 },   
9.                 {   
10.                     fillColor : "rgba(151,187,205,0.5)",   
11.                     strokeColor : "rgba(151,187,205,1)",   
12.                     data : [28,48,40,19,96,27,100]   
13.                 }   
14.             ]   
15.                
16.         }   
17.   
18.     var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);  

Demo: bar

他的文件也寫得滿完整的，有需要可以研究看看。
Chart.js Documentation