码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-07-26 01:51:57      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:idt   style   text   ext   linechart   var   pat   ntb   arc   

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

 

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

标签:idt   style   text   ext   linechart   var   pat   ntb   arc   

原文地址:https://www.cnblogs.com/life-fxl/p/13378486.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!