Chart.js輕量級HTML5圖表繪制工具庫（知識整理）
Chart.js：用不同的方式讓你的數(shù)據(jù)變得可視化。每種類型的圖表都有動畫效果，并且看上去非常棒，即便是在retina屏幕上。基于HTML5 canvas技術，Chart.js不依賴任何外部工具庫，輕量級（壓縮之后僅有4.5k）。值得推薦學習！
創(chuàng)新互聯(lián)公司是一家專注于成都網站建設、網站制作與策劃設計,同德網站建設哪家好?創(chuàng)新互聯(lián)公司做網站,專注于網站建設10年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:同德等地區(qū)。同德做網站價格咨詢:18980820575
GitHub源碼： https://github.com/nnnick/Chart.js
Chart.js文檔：http://www.bootcss.com/p/chart.js/
步驟：
html部分：
javascript部分：
- 引入Chart.js文件；
- 創(chuàng)建圖表：實例化Chart對象（獲取DOM節(jié)點取得2d context環(huán)境后實例化）；
- 實例化Chart對象后就繼續(xù)創(chuàng)建具體類型的圖表了；
曲線圖（Line chart）：
html:
javascript:(引入及兩種使用方式)
數(shù)據(jù)結構：
//數(shù)據(jù)結構（數(shù)據(jù)參數(shù)設置）
var data = {
//折線圖需要為每個數(shù)據(jù)點設置一標簽。這是顯示在X軸上。
labels: ["January", "February", "March", "April", "May", "June", "July"],
//數(shù)據(jù)集（y軸數(shù)據(jù)范圍隨數(shù)據(jù)集合中的data中的最大或最小數(shù)據(jù)而動態(tài)改變的）
datasets: [{
fillColor: "rgba(220,220,220,0.5)", //背景填充色
strokeColor: "rgba(220,220,220,1)", //路徑顏色
pointColor: "rgba(220,220,220,1)", //數(shù)據(jù)點顏色
pointStrokeColor: "#fff", //數(shù)據(jù)點邊框顏色
data: [10, 59, 90, 81, 56, 55, 40] //對象數(shù)據(jù)
}, {
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]
}]
};圖標參數(shù)：
Line.defaults = {
//網格線是否在數(shù)據(jù)線的上面
scaleOverlay : false,
//是否用硬編碼重寫y軸網格線
scaleOverride : false,
//** Required if scaleOverride is true **
//y軸刻度的個數(shù)
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,
// 是否顯示點數(shù)
pointDot: true,
// 圓點的大小
pointDotRadius:5,
// 圓點的筆觸寬度, 即:圓點外層白色大小
pointDotStrokeWidth: 2,
// 數(shù)據(jù)集行程(連線路徑)
datasetStroke: true,
// 線條的寬度, 即:數(shù)據(jù)集
datasetStrokeWidth: 2,
// 是否填充數(shù)據(jù)集
datasetFill: true,
// 是否執(zhí)行動畫
animation: true,
// 動畫的時間
animationSteps: 60,
// 動畫的特效
animationEasing: "easeOutQuart",
// 動畫完成時的執(zhí)行函數(shù)
/*onAnimationComplete: null*/
}（表示剛接觸Chart.js，看到這圖表參數(shù)整個人都懵了，還全程英文注釋，呵呵~）
理解完圖表參數(shù)后，就可以自定義圖表參數(shù)啦，下面來看看具體事例用法：
html部分和js文件引入部分省略：（之后的圖表類型也同樣省略!）
效果圖：
柱狀圖：
new Chart(ctx).Bar(data,options);//簡記，options可缺省
數(shù)據(jù)結構：
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]
}
]
}圖標參數(shù)：
Bar.defaults = {
//網格線是否在數(shù)據(jù)線的上面
scaleOverlay : false,
//是否用硬編碼重寫y軸網格線
scaleOverride : false,
//** Required if scaleOverride is true **
//y軸刻度的個數(shù)
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圖表特定參數(shù)：
//是否繪制柱狀條的邊框
barShowStroke : true,
//柱狀條邊框的寬度
barStrokeWidth : 2,
//柱狀條組之間的間距(過大或過小會出現(xiàn)重疊偏移錯位的效果，請控制合理數(shù)值)
barValueSpacing :5,
//每組柱狀條組中柱狀條之間的間距
barDatasetSpacing :5,
// 是否顯示提示
showTooltips: true,
// 是否執(zhí)行動畫
animation: true,
// 動畫的時間
animationSteps: 60,
// 動畫的特效
animationEasing: "easeOutQuart",
// 動畫完成時的執(zhí)行函數(shù)
onAnimationComplete: null
}部分javascript實例
var barChart = new Chart(ctx).Bar(data, {
scaleLabel: "$"+"<%=value%>",
//是否繪制柱狀條的邊框
barShowStroke: true,
//柱狀條邊框的寬度
barStrokeWidth: 2,
//柱狀條組之間的間距(過大或過小會出現(xiàn)重疊偏移錯位的效果，請控制合理數(shù)值)
barValueSpacing: 5,
//每組柱狀條組中柱狀條之間的間距
barDatasetSpacing: 5,
});效果圖：
餅圖：
javascript:
new Chart(ctx).Pie(data,options);
數(shù)據(jù)結構：
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'
}
];圖標參數(shù)：
Pie.defaults = {
//是否顯示每段行程（即扇形區(qū)，不為true則無法看到后面設置的邊框顏色）
segmentShowStroke : true,
//設置每段行程的邊框顏色
segmentStrokeColor : "red",
//心啊是每段扇區(qū)邊框的寬度
segmentStrokeWidth :2,
//Boolean - 是否執(zhí)行動畫
animation : true,
//Number - 動畫時間
animationSteps : 100,
//String - 動畫的效果
animationEasing : "easeOutBounce",
//Boolean -是否旋轉動畫
animateRotate : true,
//Boolean - 是否動畫縮放餅圖中心（效果不錯）
animateScale : true,
//Function - 火動畫完成時執(zhí)行的函數(shù)
onAnimationComplete : null
}部分javascript實例：
var ctx=document.getElementById("pieChart").getContext("2d");
window.pieChart=new Chart(ctx).Pie(data,{
//是否顯示每段行程（即扇形區(qū)，不為true則無法看到后面設置的邊框顏色）
segmentShowStroke : true,
//設置每段行程的邊框顏色
segmentStrokeColor : "red",
//每段扇區(qū)邊框的寬度
segmentStrokeWidth :2,
//Boolean - 是否執(zhí)行動畫
animation : true,
//Number - 動畫時間
animationSteps : 100,
//String - 動畫的效果
animationEasing : "easeOutBounce",
//Boolean -是否旋轉動畫
animateRotate : true,
//Boolean - 是否動畫縮放餅圖中心（效果不錯）
animateScale : true,
//Function - 動畫完成時執(zhí)行的函數(shù)
//onAnimationComplete : null
});效果圖：
環(huán)形圖：
javascript:
new Chart(ctx).Doughnut(data,options);
數(shù)據(jù)結構：
//數(shù)據(jù)結構（與餅圖相似）
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"
}];圖標參數(shù)：
Doughnut.defaults={
//是否顯示每段行程（即環(huán)形區(qū)，不為true則無法看到后面設置的邊框顏色）
segmentShowStroke: true,
//設置每段行程的邊框顏色
segmentStrokeColor: "#fff",
//設置每段環(huán)形的邊框寬度
segmentStrokeWidth: 2,
//圖標中心剪切圓的比例（0為餅圖，接近100則環(huán)形寬度越?。? percentageInnerCutout: 50,
//是否執(zhí)行動畫
animation: true,
//執(zhí)行動畫時間
animationSteps: 100,
//動畫特效
animationEasing: "easeOutBounce",
//是否旋轉動畫
animateRotate: true,
//是否縮放圖表中心
animateScale: true,
//動畫完成時的回調函數(shù)
// onAnimationComplete: null
}效果圖：
Chart.js總共有六大圖表：除此之外，還有剩下兩種：雷達圖或蛛網圖、極地區(qū)域圖，讀者請自行參考：Chart.js中文文檔
那么，問題來了?。繄D表的圖例怎么辦？這貨在應用中也是很常用的！經過多次的查閱，找到以下方法實現(xiàn)圖例部分，膜拜一下各路大神先！除此之外，還可以動畫完成后將各組數(shù)據(jù)自動顯示，而不用手動查看各組數(shù)據(jù)！
直接上各部分代碼：
html部分：
柱狀圖
css部分：（不設置基礎樣式的話，可能看不出預期的效果）
javascript部分：
window.onload = function() {
var ctx = document.getElementById("barChart").getContext("2d");
var barChart = new Chart(ctx).Bar(data, {
showTooltips: false, // 是否顯示提示,這里需要設置為false
//模板
legendTemplate:
'- -legend\">'+
'<% for (var i=0; i
- \">'+ '<%if(datasets[i].label){%><%=datasets[i].label%><%}%> '+ '<%}%>'+ '
效果圖：
總結：
Chart.js中的六種圖表，js部分大致分為數(shù)據(jù)結構、圖表參數(shù)（通用參數(shù)以及各自特有參數(shù)）和實例化引用三大部分，而數(shù)據(jù)的動態(tài)加載可在數(shù)據(jù)結構中的data屬性傳入json等數(shù)據(jù)文件或變量。在多處實戰(zhàn)中可能需要用到數(shù)據(jù)圖表，呈現(xiàn)給用戶更好的用戶體驗，此次學習簡記以便日后復習、使用！希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
網頁題目：Chart.js輕量級HTML5圖表繪制工具庫（知識整理）
當前網址：http://m.jiaotiyi.com/article/ipijps.html