摘要：概述是一個(gè)圖表庫，使用元素來展示各式各樣的客戶端圖表，支持折線圖柱形圖雷達(dá)圖餅圖環(huán)形圖等。比較輕量版本僅，且不依賴其他庫。附上解決思路是每次切換時(shí)移除舊的畫布并新建畫布，代碼如下外的容器節(jié)點(diǎn)

Chart.js是一個(gè)HTML5圖表庫，使用canvas元素來展示各式各樣的客戶端圖表，支持折線圖、柱形圖、雷達(dá)圖、餅圖、環(huán)形圖等。在每種圖表中，還包含了大量的自定義選項(xiàng)，包括動(dòng)畫展示形式。 Chart.js比較輕量（gzip版本僅4.5k），且不依賴其他庫。
Chart.js官網(wǎng): http://www.chartjs.org/

npm:npm install chart.js --save
Bower:bower install chart.js --save
CDN:https://cdnjs.com/libraries/Chart.js

ES6:

import Chart from "chart.js";
let myChart = new Chart(ctx, {...});

Script Tag:

Common JS:

var Chart = require("chart.js");
var myChart = new Chart(ctx, {...});

Require JS:

require(["path/to/chartjs/dist/Chart.js"], function(Chart){
    var myChart = new Chart(ctx, {...});
});

在線查看鏈接：https://codepen.io/lilywang/f...

new Chart(ctx, {
    type: "MyType",
    data: data,
    options: options
});

["line","bar", "radar", "polarArea", "doughnut", "pie", "bubble"]

由于圖表type不同，data的配置也就不同，這里以折線圖的使用方法舉例:

var myLineChart = new Chart(ctx, {
    type: "line",
    data: {
        labels: "red",
        backgroundColor: "blue",//填充色
        borderColor: "green",//曲線邊框色,
        borderWidth: 2,//曲線的寬度
        borderDash: [2, 3],
        fill: true, //
        pointBackgroundColor: "purple",//數(shù)據(jù)點(diǎn)的填充色
        pointBorderColor: "blue",//數(shù)據(jù)點(diǎn)邊框顏色
        pointBorderWidth: 2,//數(shù)據(jù)點(diǎn)邊框的寬度
        pointRadius: 2, //數(shù)據(jù)點(diǎn)的大小
        pointStyle:"circle",//"cross""crossRot""dash""line""rect""rectRounded""rectRot""star""triangle"
        showLine: true, //如果為false,兩數(shù)據(jù)點(diǎn)之間的線不會(huì)渲染
        spanGaps: true, //如果為false,NaN data會(huì)在折線上有斷點(diǎn)
        steppedLine: true,//可選值[false, true, "before", "after"],為true,折線圖的曲線會(huì)成直角，
        //將要在圖上展示的數(shù)據(jù)，數(shù)組中的每一個(gè)object代表一條線
        datasets: [{
　　　　　　　// 顏色的使用類似于CSS，你也可以使用RGB、HEX或者HSL
　　　　　　　// rgba顏色中最后一個(gè)值代表透明度
　　　　　　　// 填充顏色
            fillColor : "rgba(220,220,220,0.5)",
　　　　　　　// 線的顏色
            strokeColor : "rgba(220,220,220,1)",
　　　　　　　// 點(diǎn)的填充顏色
            pointColor : "rgba(220,220,220,1)",
　　　　　　　　// 點(diǎn)的邊線顏色
            pointStrokeColor : "#fff",
　　　　　　　　// 與x軸標(biāo)示對(duì)應(yīng)的數(shù)據(jù)
            data : [65,59,90,81,56,55,40]
        },{
            fillColor : "rgba(151,187,205,0)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }]
    }
    options: {
        responsive: true,//圖表是否響應(yīng)式
        //圖表標(biāo)題相關(guān)配置  
        title: {
            display: true,
            text: "狀態(tài)歷史圖",
            fontFamily: "Helvetica",
            padding: 20,
            fontSize: 16,
            lineHeight: 1.2,
        },
        //圖例
        legend: {
            display: false,
        },
        tooltips: {
            titleFontFamily: "Helvetica Neue",
            titleFontSize: 14,
            yPadding: 14,
            xPadding: 8,
            bodyFontSize: 14,
            titleMarginBottom: 10,
            position: "nearest",//tooltips就近顯示
            callbacks: {
                //可自定義tooltips上顯示的文字
                label(tooltipItem, data) {
                    return `狀態(tài): ${tooltipItem.yLabel === 0 ? "離線" : "在線"}`;
                }
            }
    
        },
        //坐標(biāo)軸
        scales: {
            scaleLabel: {
                display: true,
                labelString: "狀態(tài)"
            },
            ticks: {
                fontSize: 18,
                fontColor: "red",
            },
            //y軸配置
            yAxes: [{
                type: "linear",
                labels: [0，1],//y軸上的顯示的數(shù)據(jù)
                beginAtZero: true,//是否從零開始
                //軸文字控制
                ticks: {
                    //可自定義y軸顯示上顯示的文字
                    callback(value, index, values) {
                        return value === 0 ? "離線" : "在線" 
                    },
                    min: 0,//最小值，記得軸的type要為linear
                    max: 1,//最大值，記得軸的type要為linear
                    stepSize: 1,//數(shù)字之間的間隔,設(shè)置之后例如: [2,3,4]
                }
            }],
            //x軸配置
            xAxes: [{
                type: "category",
                labels: dateList,
                distribution: "linear"
            }]
        },
        //整個(gè)圖表配置
        layout: {
            //設(shè)置圖表的padding值
            padding: {
                left: 50,
                right: 0,
                top: 20,
                bottom: 0
            }
        }
    }
});

還有其它類型的圖表配置就不一一贅述了，使用方式都大同小異。

在切換時(shí)間重新渲染圖表時(shí)遇到，當(dāng)切換到昨天，鼠標(biāo)hover圖表時(shí)，圖表上折線會(huì)出現(xiàn)今天的折線，猜測原因是在切換tab的時(shí)候上一個(gè)Chart實(shí)例還存在，導(dǎo)致沖突出現(xiàn)這個(gè)問題。附上解決思路是:每次切換tab時(shí)移除舊的canvas畫布并新建畫布，代碼如下:

resetCanvas() {
    let html = ""
    let chartsContainer = document.getElementById("chartsContainer");//canvas外的容器
    let myChart = document.getElementById("myChart")//canvas節(jié)點(diǎn)
    statusCharts.removeChild(myChart);
    statusCharts.innerHTML = html
    myChart = document.getElementById("myChart");
    statusCharts.appendChild(myChart);
},