0%

一文入门chart.js的折线图

一文入门chart.js的折线图

首先,需要在页面中创建一个canvas
IP签名

<canvas id="myChart"></canvas>

然后需要在页面中引用Chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

现在我们就可以创建一个图表了,在页面中添加以下脚本:

<script>
var ctx = document.getElementById('myChart');
var chart = new Chart(ctx, {
    // 要创建的图表类型
    type: 'line',

    // 数据集
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // 配置选项
    options: {}
});
</script>

注意: labels是指x坐标轴.可以是分类类型, 也可以是数值. datasets的data列表长度要与labels一致.

参考:https://chartjs.bootcss.com/docs/getting-started/, https://www.chartjs.org/docs/latest/samples/line/line.html

原文博主: 热衷开源的宝藏Boy
原文链接: http://www.fangzengye.com/article/1633522094
版权声明: 自由转载-非商用-禁止演绎-保持署名| CC BY-NC-ND 3.0

评论区