2013年3月25日 星期一

漂亮的 canvas 圖表 plugin- Chart.js

chartjs

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

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

這邊就放他的bar的參考code給大家看一下。
  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
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...