Chart.js 使用学习笔记
本文将介绍如何使用 Chart.js 绘制图表，并举出一个实例来帮助读者更好地理解。
安装
可以通过 npm 或 yarn 安装 Chart.js：
bashCopy Codenpm install chart.js
或者：
bashCopy Codeyarn add chart.js
也可以直接下载源码并引入。
基础使用
HTML 结构
首先需要在 HTML 页面中创建一个 <canvas> 元素：
htmlCopy Code<canvas id="myChart"></canvas>
引入库文件
在 <head> 标签内引入 Chart.js 库文件：
htmlCopy Code<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
绘制图表
下面是一个简单的例子，展示如何使用 Chart.js 绘制一个折线图：
jsCopy Codeconst data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
const config = {
type: 'line',
data,
options: {}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
上述代码创建了一个 data 对象来存储数据，其中 labels 属性存储 X 轴的标签，datasets 属性存储数据集。然后创建一个 config 对象来配置图表的类型、数据和选项。最后通过 new Chart() 创建一个 Chart 实例，并将其赋给一个变量 myChart。
这时候就可以在页面上看到一个折线图了。
实例
下面是一个更复杂的例子，展示如何使用 Chart.js 绘制一个柱状图。本例中的柱状图用于显示 2019 年至 2022 年四年间全球石油产量的变化情况。
HTML 结构
首先需要在 HTML 页面中创建一个 <canvas> 元素：
htmlCopy Code<canvas id="oilProductionChart"></canvas>
引入库文件
在 <head> 标签内引入 Chart.js 库文件：
htmlCopy Code<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
绘制图表
下面是代码实现：
jsCopy Codeconst data = {
labels: ['2019', '2020', '2021', '2022'],
datasets: [
{
label: 'Crude oil production',
backgroundColor: '#36A2EB',
borderColor: '#36A2EB',
borderWidth: 1,
data: [4881, 4496, 4238, 4125]
},
{
label: 'Natural gas production',
backgroundColor: '#FFCE56',
borderColor: '#FFCE56',
borderWidth: 1,
data: [3997, 4073, 3892, 4063]
},
{
label: 'Coal production',
backgroundColor: '#FF6384',
borderColor: '#FF6384',
borderWidth: 1,
data: [8156, 7879, 7407, 6982]
}
]
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Global energy production by source (2019-2022)'
}
}
},
};
const oilProductionChart = new Chart(
document.getElementById('oilProductionChart'),
config
);
上述代码创建了一个 data 对象来存储数据，其中 labels 属性存储 X 轴的标签。datasets 属性是一个数组，每个元素代表一个数据集，在本例中包括三个数据集，分别对应石油、天然气和煤炭的产量数据。然后创建一个 config 对象来配置图表的类型、数据和选项。这里图表类型是柱状图，同时还设置了插件选项，如位置、标题等。最后通过 new Chart() 创建一个 Chart 实例，并将其赋给一个变量 oilProductionChart。
这时候就可以在页面上看到一个柱状图了。