文章目录
- 前言
- [一、Chart.js 是什么？](#一、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部分
代码如下（示例）：
html
<canvas id="myChart" width="400" height="400"></canvas>2.js部分
- 引入Chart.js文件；
- 创建图表：实例化Chart对象（获取DOM节点取得2d context环境后实例化）；
- 实例化Chart对象后就继续创建具体类型的图表了；
js
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实现了一周内温度变化的曲线图，大致构建方法如下
- html
html
<canvas id="myChart" width="600" height="400"></canvas>- js
css
<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>- 数据结构
css
//数据结构（数据参数设置）
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]
}]
};- 图标参数
css
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. 安装
bash
npm install chart.js2. 在vue组件中使用
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是一个极其得心应手的工具，他帮我快速生成了我想要的图表。