jQuery 實現Bootstrap Chart 圖表

標籤：方法   alt   canvas   element   img   介紹   ant   color   boot   

很多時候我們製作報表的時候需要圖表，如果你使用bootstrap開發你的網站，如果你需要使用圖表，那麼最簡單的方法就是就是使用bootstrap 的chart.js來實現圖表,下面介紹方法

1、引入chart.js

1	<script src="Chart.js"></script>

2、建立圖表

為了建立圖表，我們要執行個體化一個Chart對象。為了完成前面的步驟，首先需要需要傳入一個繪製圖表的2d context。

1	<canvas id="myChart" width="400" height="400"></canvas>

123	//Get the context of the canvas element we want to selectvar ctx = document.getElementById("myChart").getContext("2d");var myNewChart = new Chart(ctx).PolarArea(data);

當我們完成了在指定的canvas上執行個體化Chart對象之後，Chart.js會自動針對retina螢幕做縮放。
Chart對象設定完成後，我們就可以繼續建立Chart.js中提供的具體類型的圖表了

使用jQuery chart 繪製柱狀圖（Bar chart）

123456789101112131415161718

new Chart(ctx).Bar(data,options); //資料結構var data = {labels : ["January","February","March","April","May","June","July"],datasets : [{fillColor : "rgba(220,220,220,0.5)",strokeColor : "rgba(220,220,220,1)",data : [65,59,90,81,56,55,40]},{fillColor : "rgba(151,187,205,0.5)",strokeColor : "rgba(151,187,205,1)",data : [28,48,40,19,96,27,100]}]}

效果如所示：

使用jQuery chart 繪製曲線圖（Line chart）

123456789101112131415161718192021

new Chart(ctx).Line(data,options);//資料結構var data = {labels : ["January","February","March","April","May","June","July"],datasets : [{fillColor : "rgba(220,220,220,0.5)",strokeColor : "rgba(220,220,220,1)",pointColor : "rgba(220,220,220,1)",pointStrokeColor : "#fff",data : [65,59,90,81,56,55,40]},{fillColor : "rgba(151,187,205,0.5)",strokeColor : "rgba(151,187,205,1)",pointColor : "rgba(151,187,205,1)",pointStrokeColor : "#fff",data : [28,48,40,19,96,27,100]}]}

效果如所示：

使用jQuery chart 極地地區圖（Polar area chart）

12345678910111213141516171819202122232425262728

new Chart(ctx).PolarArea(data,options);//資料結構var data = [{value : 30,color: "#D97041"},{value : 90,color: "#C7604C"},{value : 24,color: "#21323D"},{value : 58,color: "#9D9B7F"},{value : 82,color: "#7D4F6D"},{value : 8,color: "#584A5E"}]

效果如所示：

這裡只是幾個例子，更多的例子可以參考 Bootstrap Chart.js 中文文檔

jQuery 實現Bootstrap Chart 圖表