简介
Chart.js是一个基于HTML5 Canvas的简单、灵活的图表库。它可以帮助开发者轻松地将数据可视化，创建各种类型的图表，包括堆叠图。堆叠图是一种图表类型，可以同时显示多个数据系列，并且每个系列的数据可以堆叠在一起，以便于比较不同系列之间的累积值。
堆叠图的基本原理
在堆叠图中，每个数据系列都被绘制在前面系列之上，从而形成一种累积效果。这种图表类型特别适合于展示多个数据系列随时间或其他变量的变化趋势。
安装Chart.js
首先，您需要在您的项目中包含Chart.js库。可以通过CDN链接或下载Chart.js文件并将其包含在HTML文件中。
或者下载到本地，并在HTML文件中引用：
创建堆叠图
以下是创建堆叠图的基本步骤：
准备数据
：确定您要显示的数据，并将其组织成二维数组或其他可迭代的数据结构。
设置图表配置
：定义图表的类型、数据、样式等。
渲染图表
：使用Chart.js的API将图表渲染到HTML元素中。
示例数据
假设我们有两个数据系列，分别代表不同年份的销售额：
const labels = [‘2019’, ‘2020’, ‘2021’, ‘2022’];
const data = {
labels: labels,
datasets: [
{
label: ‘Series 1’,
data: [10, 20, 30, 40],
fill: false,
borderColor: ‘rgb(75, 192, 192)’,
tension: 0.1
},
{
label: ‘Series 2’,
data: [15, 25, 35, 45],
fill: false,
borderColor: ‘rgb(255, 99, 132)’,
tension: 0.1
}
]
};
图表配置
接下来，我们需要设置图表的配置对象：
const config = {
type: ‘bar’,
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: ‘top’,
},
title: {
display: true,
text: ‘Stacked Bar Chart Example’
}
}
}
};
渲染图表
最后，我们将使用Chart.js的API将图表渲染到HTML元素中：
const ctx = document.getElementById(‘myChart’).getContext(‘2d’);
const myChart = new Chart(ctx, config);
确保您有一个具有
id=”myChart”
的