Chart.js | HTML5 圖表繪製工具庫（知識整理、中文注釋、中文文檔）

標籤：eps   英文   lte   on()   class   tip   cas   dataset   分代   

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

GitHub源碼： https://github.com/nnnick/Chart.jsChart.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:

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等資料檔案或變數。在多處實戰中可能需要用到資料圖表，呈現給使用者更好的使用者體驗，此次學習簡記以便日後複習、使用！

　

Chart.js | HTML5 圖表繪製工具庫（知識整理、中文注釋、中文文檔）