很多時候我們制作報表的時候需要圖表，如果你使用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> |
1 2 3 |
//Get the context of the canvas element we want to select
var 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）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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 中文文檔