统计图标操作之Chart

女爷i 2022-06-08 06:11 155阅读 0赞

#### 前言：之前介绍了统计图标操作的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>

#### 效果图 ####

![SouthEast][]

[SouthEast]: /images/20220608/d827d25ed05c4bae830a88baa949996e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关利用 QT 实现 Icon Donut Chart 图标甜甜圈图

利用 QT 实现 Icon Donut Chart 图标甜甜圈图甜甜圈图是一种常见的数据可视化类型，它可以展示不同数据集之间的比例关系。在这篇文章中，我们将介绍如何使用 Q

﹏ヽ暗。殇╰゛Y/ 2024年03月23日 23:48/ 0 赞/ 19 阅读

相关 XCL-Charts 画柱状图，线等统计图。

https://github.com/xcltapestry/XCL-Charts XCL-Charts XCL-Charts V2.4 Android开源图表库(

女爷i/ 2024年02月17日 23:11/ 0 赞/ 49 阅读

相关新增字体图标操作

字体图标更换流程 1. 下载项目中原有的selection.json文件 2. 登录icomoon.io/app/\/select/font，步骤二选择import i

短命女/ 2023年08月17日 16:59/ 0 赞/ 98 阅读

相关多个版本的统计图工具【Chart Tools】

最近项目中要使用数据统计柱状图和饼状图. 虽然Asp.net下也能实现Graphics画图并再次集成生成数据统计功能. 但总体感觉在美观度和简洁上总是达有点差强人意. 很粗糙.

古城微笑少年丶/ 2022年10月02日 02:48/ 0 赞/ 198 阅读

相关 asp.net 学习之路之chart控件

关于这个chart控件的使用，笔者还没掌握。看看下面的效果吧。 ![Center][] 这里显示的是柱状图，我们可以通过修改其属性，根据需求显示数据，比如饼状图，折

古城微笑少年丶/ 2022年08月08日 12:46/ 0 赞/ 447 阅读

相关数字统计之统计页码

问题描述：一本书的页码从自然数1开始计数，直到自然数n。书的页码按照通常的习惯编排，每个页码都不包含多余的前导数字0。例如，第6页用数字6表示，而不是06或006等。数字计

傷城~/ 2022年08月02日 06:40/ 0 赞/ 191 阅读

相关统计图标操作之Chart

前言：之前介绍了统计图标操作的G2，这一个插件个人认为功能相对不如G2插件强大，但是这一个插件的大小略微小一点为398k，大小还是不可忽视。另外这一个插件自己可以操作的空间相

女爷i/ 2022年06月08日 06:11/ 0 赞/ 156 阅读

相关统计图表操作之G2

前言：最近在做一个东西的时候，需要对于用户数据，以及其他相关的数据进行图表统计，所以自己在网上找了一下插件，发现了G2，这的确是一个好东西，功能强大，但是唯一不足的时候该插件

╰半橙微兮°/ 2022年06月08日 06:08/ 0 赞/ 209 阅读

相关 chart图表

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Bertha 。/ 2022年01月27日 15:39/ 0 赞/ 342 阅读

相关 flutter 图表插件之fl_chart

前言：之前很少接触图表功能，以为图表这种功能只能在H5上才能发挥得淋漓尽致，可谁曾料想，早有大神先把强大的chart图表功能给移植到flutter端上了，而且两端都可适用，

妖狐艹你老母/ 2021年09月02日 04:44/ 0 赞/ 645 阅读