使用JavaScript和Chart.js创建堆叠进度条图表教程
堆叠进度条图表可以直观展示多组数据在整体中的占比情况，适合用于对比不同分类的数值构成。本文将介绍如何通过JavaScript结合Chart.js库，快速实现一个可交互的堆叠进度条图表，整个过程不需要复杂的配置，新手也能轻松上手。
准备工作
在开始编码前，需要先引入Chart.js库。你可以选择通过CDN直接引入，也可以下载本地文件后引入。这里我们使用CDN方式，在HTML文件的<head>标签中添加如下代码：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
如果需要本地开发，也可以将Chart.js文件下载到项目目录，修改src路径为本地文件路径即可。
基础HTML结构搭建
首先创建一个基础的HTML页面，包含一个用于放置图表的<canvas>容器，同时添加必要的样式让图表显示更美观。完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>堆叠进度条图表示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
font-family: "Microsoft YaHei", sans-serif;
background-color: #f5f5f5;
}
.chart-container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="chart-container">
<h2>月度任务完成进度堆叠图</h2>
<canvas id="stackedProgressBar"></canvas>
</div>
</body>
</html>上面的代码中，我们定义了一个类名为chart-container的容器，内部放置了标题和<canvas>元素，Chart.js会基于这个<canvas>元素绘制图表。样式部分做了简单的页面美化，让图表容器居中并添加阴影效果。
编写JavaScript逻辑实现堆叠进度条
接下来在<body>标签的末尾添加<script>标签，编写初始化图表的代码。堆叠进度条的本质是将柱状图的stacked属性设置为true，同时让X轴为分类轴，Y轴为数值轴，这样同一分类下的多组数据就会堆叠显示。
// 等待页面加载完成后执行初始化
window.onload = function() {
// 获取canvas元素的上下文
const ctx = document.getElementById('stackedProgressBar').getContext('2d');
// 定义图表数据
const chartData = {
// X轴分类标签，这里表示不同的月份
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [
{
label: '已完成任务', // 数据集名称，会显示在图例中
data: [30, 45, 60, 50, 75, 80], // 各月份已完成任务数
backgroundColor: 'rgba(54, 162, 235, 0.7)', // 柱状图填充颜色
borderColor: 'rgba(54, 162, 235, 1)', // 柱状图边框颜色
borderWidth: 1 // 边框宽度
},
{
label: '进行中任务',
data: [20, 15, 25, 30, 15, 10],
backgroundColor: 'rgba(255, 206, 86, 0.7)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
},
{
label: '未开始任务',
data: [50, 40, 15, 20, 10, 10],
backgroundColor: 'rgba(255, 99, 132, 0.7)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}
]
};
// 定义图表配置
const chartConfig = {
type: 'bar', // 图表类型为柱状图
data: chartData,
options: {
responsive: true, // 开启响应式，适配不同屏幕大小
maintainAspectRatio: true, // 保持图表宽高比
plugins: {
legend: {
position: 'top', // 图例显示在顶部
labels: {
font: {
size: 14 // 图例字体大小
}
}
},
tooltip: {
mode: 'index', // 鼠标悬停时显示同一分类下所有数据
intersect: false // 不需要鼠标精确对准柱状图才显示提示
}
},
scales: {
x: {
stacked: true, // X轴方向开启堆叠
title: {
display: true,
text: '月份', // X轴标题
font: {
size: 14
}
}
},
y: {
stacked: true, // Y轴方向开启堆叠
beginAtZero: true, // Y轴从0开始
title: {
display: true,
text: '任务数量', // Y轴标题
font: {
size: 14
}
},
ticks: {
// 设置Y轴刻度间隔为10
stepSize: 10
}
}
}
}
};
// 创建图表实例
new Chart(ctx, chartConfig);
};上面的代码逻辑可以分为几个部分：首先获取<canvas>的上下文对象，然后定义图表的数据源，包含X轴的月份标签和三个不同状态任务的数据集。接着配置图表选项，核心是开启scales中X轴和Y轴的stacked属性为true，这样三个数据集的数值就会在同一月份下堆叠显示。最后通过new Chart()创建图表实例，传入上下文和配置即可完成渲染。
效果说明与扩展
完成上述代码后，用浏览器打开HTML文件，就能看到一个堆叠进度条图表：每个月份对应一个堆叠的柱状图，不同颜色代表不同状态的任务，总高度就是该月份的任务总数。鼠标悬停在柱状图上时，会显示该月份三类任务的具体数值，图例可以点击切换显示/隐藏对应的数据集。
如果需要调整样式，可以修改backgroundColor和borderColor的值更换颜色，也可以调整borderWidth改变边框粗细。如果需要动态更新数据，只需要修改chartData中的data数组，然后调用图表实例的update()方法即可刷新显示。
常见问题排查
- 如果图表没有显示，首先检查Chart.js的CDN链接是否正确，或者本地文件路径是否配置无误。
- 如果堆叠效果没有生效，确认
scales配置中X轴和Y轴的stacked属性是否都设置为true，缺少任意一个都不会实现堆叠。 - 如果图表显示变形，可以调整
responsive和maintainAspectRatio属性，或者给<canvas>元素设置固定的宽度和高度。