專案中引入Chart.js

<script src="path/to/Chart.min.js"></script>

1.建立html標籤

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

2.建立一個chart類的例項

var lineChartData = {
    //X座標資料
    labels: ["週一", "週二", "週三", "週四", "週五", "週六", "週末"],
    datasets: [{
        //統計表的背景顏色
        fillColor: "
 
rgba(0,0,255,0)",
        //統計表畫筆顏色
        strokeColor: "#f60",
        //點的顏色
        pointColor: "#000;",
        //點邊框的顏色
        pointStrokeColor: "red",
        //滑鼠觸發時點的顏色
        pointHighlightFill: "red",
        //滑鼠觸發時點邊框的顏色
        pointHighlightStroke: "#000",
        //Y座標資料
        data: [300, 555, 655, 714, 899
 
, 905, 1000]
    }, {
        fillColor: "rgba(0,255,0,0)",
        strokeColor: "rgba(92, 184, 92, 1)",
        pointColor: "rgba(23, 126, 23, 1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [314, 455, 755, 814, 999
 
, 905, 1000]
    }, {
        fillColor: "rgba(255,0,0,0)",
        strokeColor: "blue",
        pointColor: "rgba(23, 126, 23, 1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [114, 255, 455, 414, 599, 605, 500]
    }]

}

window.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}