chart.js轻量级图表插件使用

Posted 2020-12-18 life最初的起点

项目中引入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
    });
}