Chart.js | HTML5 圖表繪製工具庫(知識整理)

Chart.js | HTML5 圖表繪製工具庫(知識整理)

Chart.js:用不同的方式讓你的資料變得視覺化。每種型別的圖表都有動畫效果,並且看上去非常棒,即便是在retina螢幕上。基於HTML5 canvas技術,Chart.js不依賴任何外部工具庫,輕量級(壓縮之後僅有4.5k)。值得推薦學習!

GitHub原始碼: https://github.com/nnnick/Chart.js

Chart.js文件:http://www.bootcss.com/p/chart.js/


步驟:

html部分:

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

javascript部分:

  1. 引入Chart.js檔案;
  2. 建立圖表:例項化Chart物件(獲取DOM節點取得2d context環境後例項化);
  3. 例項化Chart物件後就繼續建立具體型別的圖表了;

曲線圖(Line chart):

html:

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

javascript:(引入及兩種使用方式)

<script src="js/Chart.min.js"></script>
<script type="text/javascript">
//方式一:
var ctx = document.getElementById("myChart").getContext("2d");;
var MyNewChart = new Chart(ctx).Line(data); //這種方式是隻載入資料集,(預設options)不修改預設引數(簡稱法一)
//資料結構(資料引數設定)
var data = {
//折線圖需要為每個資料點設定一標籤。這是顯示在X軸上。
labels: ["January", "February", "March", "April", "May", "June", "July"],
//資料集(y軸資料範圍隨資料集合中的data中的最大或最小資料而動態改變的)
datasets: [{
fillColor: "rgba(220,220,220,0.5)", //背景填充色
strokeColor: "rgba(220,220,220,1)", //路徑顏色
pointColor: "rgba(220,220,220,1)", //資料點顏色
pointStrokeColor: "#fff", //資料點邊框顏色
data: [10, 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, 200]
}]
};
</script>

資料結構:

//資料結構(資料引數設定)
var data = {
//折線圖需要為每個資料點設定一標籤。這是顯示在X軸上。
labels: ["January", "February", "March", "April", "May", "June", "July"],
//資料集(y軸資料範圍隨資料集合中的data中的最大或最小資料而動態改變的)
datasets: [{
fillColor: "rgba(220,220,220,0.5)", //背景填充色
strokeColor: "rgba(220,220,220,1)", //路徑顏色
pointColor: "rgba(220,220,220,1)", //資料點顏色
pointStrokeColor: "#fff", //資料點邊框顏色
data: [10, 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, 200]
}]
};

圖示引數:

 Line.defaults = {
//網格線是否在資料線的上面
scaleOverlay : false,
//是否用硬編碼重寫y軸網格線
scaleOverride : false,
//** Required if scaleOverride is true **
//y軸刻度的個數
scaleSteps : null,
//y軸每個刻度的寬度
scaleStepWidth : 20,
// Y 軸的起始值
scaleStartValue : null,
// Y/X軸的顏色
scaleLineColor: "rgba(0,0,0,.1)",   
// X,Y軸的寬度
scaleLineWidth: 1,
// 刻度是否顯示標籤, 即Y軸上是否顯示文字
scaleShowLabels: true,
// Y軸上的刻度,即文字
scaleLabel: "<%=value%>",
// 字型
scaleFontFamily: "'Arial'",
// 文字大小
scaleFontSize: 16,
// 文字樣式
scaleFontStyle: "normal",
// 文字顏色
scaleFontColor: "#666",
// 是否顯示網格
scaleShowGridLines: true,
// 網格顏色
scaleGridLineColor: "rgba(0,0,0,.05)",
// 網格寬度
scaleGridLineWidth:2,
// 是否使用貝塞爾曲線? 即:線條是否彎曲
bezierCurve: true,
// 是否顯示點數
pointDot: true,
// 圓點的大小
pointDotRadius:5,
// 圓點的筆觸寬度, 即:圓點外層白色大小
pointDotStrokeWidth: 2,
// 資料集行程(連線路徑)
datasetStroke: true,
// 線條的寬度, 即:資料集
datasetStrokeWidth: 2,
// 是否填充資料集
datasetFill: true,
// 是否執行動畫
animation: true,
// 動畫的時間
animationSteps: 60,
// 動畫的特效
animationEasing: "easeOutQuart",
// 動畫完成時的執行函式
/*onAnimationComplete: null*/
}

(表示剛接觸Chart.js,看到這圖表引數整個人都懵了,還全程英文註釋,呵呵~)

理解完圖表引數後,就可以自定義圖表引數啦,下面來看看具體事例用法:

html部分和js檔案引入部分省略:(之後的圖表型別也同樣省略!)

<script type="text/javascript">
//同樣資料引數設定
var data = {
//折線圖需要為每個資料點設定一標籤。這是顯示在X軸上。
labels: ["January", "February", "March", "April", "May", "June", "July"],
//這邊的thisId分別對應labels的id
thisIds : [12,22,50,44,99,3,67],
//資料集(y軸資料範圍隨資料集合中的data中的最大或最小資料而動態改變的)
datasets: [{
fillColor: "rgba(220,220,220,0.5)", //背景填充色
strokeColor: "rgba(220,220,220,1)", //路徑顏色
pointColor: "rgba(220,220,220,1)", //資料點顏色
pointStrokeColor: "#fff", //資料點邊框顏色
data: [10, 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, 200]
}]
};
window.onload = function() {
var ctx = document.getElementById("myChart").getContext("2d");;
//方式二:傳入物件字面量去修改預設圖示引數,自定義圖表
var MyNewChart = new Chart(ctx).Line(data, {
// 網格顏色
scaleGridLineColor: "rgba(255,0,0,1)",
// Y/X軸的顏色
scaleLineColor: "rgba(0,0,0,.1)",
// 文字大小
scaleFontSize: 16,
// 文字顏色
scaleFontColor: "#666",
// 網格顏色
scaleGridLineColor: "rgba(0,0,0,.05)",
// 是否使用貝塞爾曲線? 即:線條是否彎曲
// 是否執行動畫
animation: true,
// 動畫的時間
animationSteps: 60,
// 動畫完成時的執行函式
onAnimationComplete: function(){
console.log("給x軸的lable對應的id:");
console.log(data.thisIds);
}
});
}
</script>

效果圖:

曲線圖


柱狀圖:

new Chart(ctx).Bar(data,options);//簡記,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]
}
]
}

圖示引數:

Bar.defaults = {
//網格線是否在資料線的上面
scaleOverlay : false,
//是否用硬編碼重寫y軸網格線
scaleOverride : false,
//** Required if scaleOverride is true **
//y軸刻度的個數
scaleSteps : null,
//y軸每個刻度的寬度
scaleStepWidth : null, 
//Y軸起始值
scaleStartValue: null,
// Y/X軸的顏色
scaleLineColor: "rgba(0,0,0,.1)",
// X,Y軸的寬度
scaleLineWidth: 1,
// 刻度是否顯示標籤, 即Y軸上是否顯示文字
scaleShowLabels: false,
// Y軸上的刻度,即文字
scaleLabel: "<%=value%>",
// 字型
scaleFontFamily: "'Arial'",
// 文字大小
scaleFontSize: 12,
// 文字樣式
scaleFontStyle: "normal",
// 文字顏色 
scaleFontColor: "#666",
// 是否顯示網格
scaleShowGridLines: true,
// 網格顏色
scaleGridLineColor: "rgba(0,0,0,.05)",
// 網格寬度
scaleGridLineWidth: 1,
//Bar Chart圖表特定引數:
//是否繪製柱狀條的邊框
barShowStroke : true,
//柱狀條邊框的寬度
barStrokeWidth : 2,
//柱狀條組之間的間距(過大或過小會出現重疊偏移錯位的效果,請控制合理數值)
barValueSpacing :5,
//每組柱狀條組中柱狀條之間的間距
barDatasetSpacing :5,
// 是否顯示提示
showTooltips: true, 
// 是否執行動畫
animation: true,
// 動畫的時間
animationSteps: 60,
// 動畫的特效
animationEasing: "easeOutQuart",
// 動畫完成時的執行函式
onAnimationComplete: null
}

部分javascript例項

var barChart = new Chart(ctx).Bar(data, {
scaleLabel: "$" "<%=value%>",
//是否繪製柱狀條的邊框
barShowStroke: true,
//柱狀條邊框的寬度
barStrokeWidth: 2,
//柱狀條組之間的間距(過大或過小會出現重疊偏移錯位的效果,請控制合理數值)
barValueSpacing: 5,
//每組柱狀條組中柱狀條之間的間距
barDatasetSpacing: 5,
});

效果圖:
柱狀圖效果


餅圖:

javascript:

new Chart(ctx).Pie(data,options);

資料結構:

var data=[
{
value:40,
color:"#21F0EA",//背景色
highlight:"#79E8E5",//高亮背景顏色
label:'javascript'//文字標籤
},{
value:60,
color:"#E0E4CC",
highlight:"#EAEDD8",
label:'jquery'
},{
value:100,
color:"#69D2E7",
highlight:"#83E5F7",
label:'html'
}
];

圖示引數:

Pie.defaults = {
//是否顯示每段行程(即扇形區,不為true則無法看到後面設定的邊框顏色)
segmentShowStroke : true,
//設定每段行程的邊框顏色
segmentStrokeColor : "red",
//心啊是每段扇區邊框的寬度
segmentStrokeWidth :2,
//Boolean - 是否執行動畫
animation : true,
//Number - 動畫時間
animationSteps : 100,
//String - 動畫的效果
animationEasing : "easeOutBounce",
//Boolean -是否旋轉動畫
animateRotate : true,
//Boolean - 是否動畫縮放餅圖中心(效果不錯)
animateScale : true,
//Function - 火動畫完成時執行的函式
onAnimationComplete : null
}

部分javascript例項:

var ctx=document.getElementById("pieChart").getContext("2d");
window.pieChart=new Chart(ctx).Pie(data,{
//是否顯示每段行程(即扇形區,不為true則無法看到後面設定的邊框顏色)
segmentShowStroke : true,
//設定每段行程的邊框顏色
segmentStrokeColor : "red",
//每段扇區邊框的寬度
segmentStrokeWidth :2,
//Boolean - 是否執行動畫
animation : true,
//Number - 動畫時間
animationSteps : 100,
//String - 動畫的效果
animationEasing : "easeOutBounce",
//Boolean -是否旋轉動畫
animateRotate : true,
//Boolean - 是否動畫縮放餅圖中心(效果不錯)
animateScale : true,
//Function - 動畫完成時執行的函式
//onAnimationComplete : null
});

效果圖:
餅圖效果圖


環形圖:

javascript:

new Chart(ctx).Doughnut(data,options);

資料結構:

//資料結構(與餅圖相似)
var data = [{
value: 30,
color: "#F7464A",
highlight: "#FA7C7C",
label: "angularJS"
}, {
value: 50,
color: "#E2EAE9",
highlight: "#F2F5F5",
label: "juqery"
}, {
value: 100,
color: "#D4CCC5",
hightlight: "#DBD6D1",
label: "javascript"
}, {
value: 40,
color: "#949FB1",
highlight: "#AFBCCE",
label: "nodeJS"
}, {
value: 120,
color: "#4D5360",
highlight: "#767C86",
label: "html"
}];

圖示引數:

Doughnut.defaults={
//是否顯示每段行程(即環形區,不為true則無法看到後面設定的邊框顏色)
segmentShowStroke: true,
//設定每段行程的邊框顏色
segmentStrokeColor: "#fff",
//設定每段環形的邊框寬度
segmentStrokeWidth: 2,
//圖示中心剪下圓的比例(0為餅圖,接近100則環形寬度越小)
percentageInnerCutout: 50,
//是否執行動畫
animation: true,
//執行動畫時間
animationSteps: 100,
//動畫特效
animationEasing: "easeOutBounce",
//是否旋轉動畫
animateRotate: true,
//是否縮放圖表中心
animateScale: true,
//動畫完成時的回撥函式
//                      onAnimationComplete: null
}

效果圖:
環形圖效果


Chart.js總共有六大圖表:除此之外,還有剩下兩種:雷達圖或蛛網圖、極地區域圖,讀者請自行參考:Chart.js中文文件


那麼,問題來了!?圖表的圖例怎麼辦?這貨在應用中也是很常用的!經過多次的查閱,找到以下方法實現圖例部分,膜拜一下各路大神先!除此之外,還可以動畫完成後將各組資料自動顯示,而不用手動檢視各組資料!
直接上各部分程式碼:
html部分:

<h2>柱狀圖</h2>
<canvas id="barChart" width="400" height="300"></canvas>
<!--這裡新增了用來放置圖例的div標籤-->
<div id="legend"></div>

css部分:(不設定基礎樣式的話,可能看不出預期的效果)

        <style>
ul,li{
list-style-type:none;;
}
ul>li{
margin:5px auto;
font-family: "微軟雅黑";
}
span{
display: inline-block;
width:20px;height:20px;line-height: 20px;
vertical-align:middle;
margin-right:5px;
}
</style>

javascript部分:

window.onload = function() {
var ctx = document.getElementById("barChart").getContext("2d");
var barChart = new Chart(ctx).Bar(data, {
showTooltips: false, // 是否顯示提示,這裡需要設定為false
//模板
legendTemplate: 
'<ul class=\"<%=name.toLowerCase()%>-legend\">' 
'<% for (var i=0; i<datasets.length; i  ){%>' 
'<li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span>' 
'<%if(datasets[i].label){%><%=datasets[i].label%><%}%></li>' 
'<%}%>' 
'</ul>',
onAnimationComplete: function() {//動畫完成後顯示對應的資料
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.datasets.forEach(function(dataset) {
dataset.bars.forEach(function(bar) {
ctx.fillText(bar.value, bar.x, bar.y);
});
});
}
});
var legend = document.getElementById('legend');
// 圖例
legend.innerHTML = barChart.generateLegend();
}
//資料結構:
var data = {
labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40],
label: "本月銷售額"//圖例標籤
},{
fillColor: "#69D2E7",
strokeColor: "#B2E5ED",
data: [54, 99, 72, 61, 86, 65, 84],
label: "本季度銷售額"
}]
};

效果圖:
改良柱狀圖


總結:
Chart.js中的六種圖表,js部分大致分為資料結構、圖表引數(通用引數以及各自特有引數)和例項化引用三大部分,而資料的動態載入可在資料結構中的data屬性傳入json等資料檔案或變數。在多處實戰中可能需要用到資料圖表,呈現給使用者更好的使用者體驗,此次學習簡記以便日後複習、使用!