Chart.js图标绘制工具库

文章目录

• 前言
• [一、Chart.js 是什么？](#一、Chart.js 是什么？)
• 二、使用步骤
• • 1.html部分
  • 2.js部分
  • 标记点样式
  • [3. Chart.js能绘制哪些图标](#3. Chart.js能绘制哪些图标)
• 三、常用图标的大致使用方法
• • 曲线图
• [四、Chart.js 在 Vue3 中怎么使用？](#四、Chart.js 在 Vue3 中怎么使用？)
• • [1. 安装](#1. 安装)
  • [2. 在vue组件中使用](#2. 在vue组件中使用)
• 总结

---

前言

在我的健康情况监视系统中，我需要大量用到图标绘制，Chart.js 是个十分便利的工具

---

一、Chart.js 是什么？

hart.js 是一个 前端数据可视化图表库，

简单说，它是一个 用来画图表的 JavaScript 工具。

他比ECharts、D3 更简单，而且和vue3完全兼容，有丰富的插件、动画效果。

二、使用步骤

1.html部分

代码如下（示例）：

<canvas id="myChart" width="400" height="400"></canvas>

2.js部分

1. 引入Chart.js文件；
2. 创建图表：实例化Chart对象（获取DOM节点取得2d context环境后实例化）；
3. 实例化Chart对象后就继续创建具体类型的图表了；

new Chart(canvasDOM, {
  type: "line",   // 图表类型
  data: { ... },  // 数据
  options: { ... } // 配置项
});

• type ：图表类型，如 line、bar、pie...
• data：图表的数据
• options：控制图表样式：坐标轴，动画，网格，提示，交互（hover），颜色

标记点样式

3. Chart.js能绘制哪些图标

图表类型	用途（你项目里能用在哪里）
Line（折线图）	睡眠趋势、心率变化
Bar（柱状图）	日步数统计、周运动量
Pie（饼图）	每日营养分布
Doughnut（环形图）	目标达成度
Radar（雷达图）	综合健康评分
Polar Area	饮食结构
Bubble	多维数据
Scatter	心率 vs 步数关系

三、常用图标的大致使用方法

曲线图

我在我的项目中准备用曲线图来展现用户一周内用户运动量的变化，而在以前腾讯天气的项目中我也用chart.js实现了一周内温度变化的曲线图，大致构建方法如下

1. html

<canvas id="myChart" width="600" height="400"></canvas>

2. js

<script type="text/javascript">
    //方式一：
    var ctx = document.getElementById("myChart").getContext("2d");;
    var MyNewChart = new Chart(ctx).Line(data); //这种方式是只加载数据集，（缺省options）不修改默认参数（简称法一）

    //数据结构（数据参数设置）
    var data = {
        //折线图需要为每个数据点设置一标签。这是显示在X轴上。
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
        datasets: [{
                    fillColor: "rgba(220,220,220,0.5)", //背景填充色
                    strokeColor: "rgba(220,220,220,1)", //路径颜色
                    pointColor: "rgba(220,220,220,1)", //数据点颜色
                    pointStrokeColor: "#fff", //数据点边框颜色
                    data: [10, 59, 90, 81, 56, 55, 40] //对象数据
                }, {
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    data: [28, 48, 40, 19, 96, 27, 200]
                }]
            };

</script>

3. 数据结构

//数据结构（数据参数设置）
    var data = {
        //折线图需要为每个数据点设置一标签。这是显示在X轴上。
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        //数据集（y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的）
        datasets: [{
                    fillColor: "rgba(220,220,220,0.5)", //背景填充色
                    strokeColor: "rgba(220,220,220,1)", //路径颜色
                    pointColor: "rgba(220,220,220,1)", //数据点颜色
                    pointStrokeColor: "#fff", //数据点边框颜色
                    data: [10, 59, 90, 81, 56, 55, 40] //对象数据
                }, {
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    data: [28, 48, 40, 19, 96, 27, 200]
                }]
            };

4. 图标参数

 Line.defaults = {
                //网格线是否在数据线的上面
                scaleOverlay : false,

                //是否用硬编码重写y轴网格线
                scaleOverride : false,

                //** Required if scaleOverride is true **
                //y轴刻度的个数
                scaleSteps : null,

                //y轴每个刻度的宽度
                scaleStepWidth : 20,

                // Y 轴的起始值
                scaleStartValue : null,
                // Y/X轴的颜色
                scaleLineColor: "rgba(0,0,0,.1)",   
                // X,Y轴的宽度
                scaleLineWidth: 1,
                // 刻度是否显示标签, 即Y轴上是否显示文字
                scaleShowLabels: true,
                // Y轴上的刻度,即文字
                scaleLabel: "<%=value%>",
                // 字体
                scaleFontFamily: "'Arial'",
                // 文字大小
                scaleFontSize: 16,
                // 文字样式
                scaleFontStyle: "normal",
                // 文字颜色
                scaleFontColor: "#666",
                // 是否显示网格
                scaleShowGridLines: true,
                // 网格颜色
                scaleGridLineColor: "rgba(0,0,0,.05)",
                // 网格宽度
                scaleGridLineWidth:2,
                // 是否使用贝塞尔曲线? 即:线条是否弯曲
                bezierCurve: true,
                // 是否显示点数
                pointDot: true,
                // 圆点的大小
                pointDotRadius:5,
                // 圆点的笔触宽度, 即:圆点外层白色大小
                pointDotStrokeWidth: 2,
                // 数据集行程(连线路径)
                datasetStroke: true,
                // 线条的宽度, 即:数据集
                datasetStrokeWidth: 2,
                // 是否填充数据集
                datasetFill: true,
                // 是否执行动画
                animation: true,
                // 动画的时间
                animationSteps: 60,
                // 动画的特效
                animationEasing: "easeOutQuart",
                // 动画完成时的执行函数
                /*onAnimationComplete: null*/
            }

结合以上代码就可以构建出一个符合我们预期的双曲线图表，这样我们就简单地使用了Chart.js完成了图标的构建。

四、Chart.js 在 Vue3 中怎么使用？

1. 安装

npm install chart.js

2. 在vue组件中使用

<template>
  <canvas ref="canvas"></canvas>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { Chart } from "chart.js/auto"

const canvas = ref(null)

onMounted(() => {
  new Chart(canvas.value, {
    type: "bar",
    data: {
      labels: ["Mon", "Tue", "Wed"],
      datasets: [{
        label: "步数",
        data: [3000, 5000, 7000],
      }]
    }
  })
})
</script>

总结

在我的项目中Chart.js是一个极其得心应手的工具，他帮我快速生成了我想要的图表。