统计图标操作之Chart

最新推荐文章于 2021-10-14 13:53:18 发布

输出是最好的学习

最新推荐文章于 2021-10-14 13:53:18 发布

阅读量507

点赞数

分类专栏：前端文章标签：插件 chart canvas

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/78011731

版权

前端专栏收录该内容

72 篇文章 1 订阅

订阅专栏

前言：之前介绍了统计图标操作的G2，这一个插件个人认为功能相对不如G2插件强大，但是这一个插件的大小略微小一点为398k，大小还是不可忽视。另外这一个插件自己可以操作的空间相对大很多，不过都不是自己的理想选择。虽然好用，但是代价相对太大，所以还是得学好canvas，自己写啊。

插件官方地址

http://www.chartjs.org/docs/latest/

简单的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
        #container {
            width: 800px;
            margin: 100px auto;
        }
    </style>
    <script type="text/javascript" src="chart.js"></script>
</head>
<body>
    <div id="container">
        <canvas id="canvas" width="400" height="200"></canvas>
    </div>
    <script type="text/javascript">
        // 获取画布
        var oCanvas = document.getElementById("canvas").getContext('2d');
        // 创建对象
        var oChart = new Chart(oCanvas, {
            type: 'line', //图标类型
            data : {
                labels: ['2013', '2014', '2015', '2016', '2017', '2018'], //x轴
                datasets: [{
                    label: '时间-销量', //title
                    data: [110, 130, 250, 50, 320, 45], //数据
                    backgroundColor: [ //背景颜色,可以不设置，为默认
                        'rgba(255, 99, 132, 0.2)',
                    ],
                    borderColor: [ //边框颜色,可以不设置，为默认
                        'rgba(255,99,132,1)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
            }
        })
    </script>
</body>
</html>

效果图

输出是最好的学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
统计图标操作之Chart

前言：之前介绍了统计图标操作的G2，这一个插件个人认为功能相对不如G2插件强大，但是这一个插件的大小略微小一点为398k，大小还是不可忽视。另外这一个插件自己可以操作的空间相对大很多，不过都不是自己的理想选择。虽然好用，但是代价相对太大，所以还是得学好canvas，自己写啊。插件官方地址http://www.chartjs.org/docs/latest/简单的demo<!DOCTYPE html>
复制链接

扫一扫