使用 Chart.js 创建堆叠式进度条图表
在数据统计与可视化场景中，堆叠式进度条图表能够直观展示多维度数据的占比关系，比如项目不同阶段的完成进度、不同分类的资源占用情况等。Chart.js 是一款轻量级、易上手的 JavaScript 图表库，支持多种图表类型，通过简单的配置就能实现堆叠式进度条效果。本文将一步步讲解如何使用 Chart.js 完成堆叠式进度条图表的开发。
前置准备
首先需要引入 Chart.js 库，我们可以通过 CDN 方式引入最新稳定版本，也可以下载本地文件引入。同时准备一个用于承载图表的 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>
<!-- 引入 Chart.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {
width: 800px;
height: 400px;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 图表容器 -->
<div class="chart-container">
<canvas id="stackedProgressBar"></canvas>
</div>
<script src="app.js"></script>
</body>
</html>上面的代码中，我们设置了图表容器的宽高为 800*400 像素，居中显示在页面中，同时引入了 Chart.js 的官方 CDN 资源，后续的业务逻辑会写在 app.js 文件中。
核心配置说明
要实现堆叠式进度条效果，核心在于对 Chart.js 的柱状图（bar）进行配置，关键配置项如下：
- 图表类型：设置为
bar，即柱状图类型。 - 堆叠配置：在数据集的
options中开启堆叠模式，设置scales.x.stacked和scales.y.stacked为true，让同一分类下的不同数据堆叠显示。 - 进度条样式：将柱状图的边框宽度设为 0，调整柱体宽度，让堆叠后的效果更接近进度条样式。
- 数据格式：每个数据集代表堆叠的一层，同一分类下的不同数据集数值相加即为该分类的总进度。
完整实现代码
接下来是 app.js 中的完整逻辑，我们以展示三个项目不同阶段的完成进度为例，每个项目包含“需求评审”“开发”“测试”三个阶段，堆叠展示各阶段的进度占比。
// 获取 canvas 元素
const ctx = document.getElementById('stackedProgressBar').getContext('2d');
// 定义项目分类（x轴数据）
const projects = ['项目A', '项目B', '项目C'];
// 定义每个阶段的数据集，每个数据集代表堆叠的一层
const data = {
labels: projects,
datasets: [
{
label: '需求评审',
// 每个项目需求评审阶段的完成进度（百分比）
data: [30, 25, 40],
backgroundColor: 'rgba(54, 162, 235, 0.7)',
borderWidth: 0
},
{
label: '开发',
// 每个项目开发阶段的完成进度（百分比）
data: [45, 50, 35],
backgroundColor: 'rgba(255, 159, 64, 0.7)',
borderWidth: 0
},
{
label: '测试',
// 每个项目测试阶段的完成进度（百分比）
data: [25, 25, 25],
backgroundColor: 'rgba(75, 192, 192, 0.7)',
borderWidth: 0
}
]
};
// 图表配置项
const config = {
type: 'bar',
data: data,
options: {
// 调整柱体宽度，让进度条更饱满
barPercentage: 0.6,
categoryPercentage: 0.8,
scales: {
x: {
// 开启x轴堆叠
stacked: true,
grid: {
display: false
}
},
y: {
// 开启y轴堆叠
stacked: true,
// 设置y轴最大值为100，对应百分比进度
max: 100,
title: {
display: true,
text: '完成进度（%）'
}
}
},
plugins: {
legend: {
position: 'top'
},
tooltip: {
callbacks: {
label: function(context) {
return `${context.dataset.label}: ${context.parsed.y}%`;
}
}
}
}
}
};
// 创建图表实例
new Chart(ctx, config);代码中我们首先定义了三个项目的名称作为 x 轴分类，然后分别设置了三个阶段的进度数据，每个阶段对应一个数据集。在配置项中开启堆叠模式后，同一项目下的三个阶段进度会自动堆叠，比如项目A的需求评审30%、开发45%、测试25%，堆叠后总高度为100%，正好对应完整的项目进度。同时我们调整了柱体宽度，关闭了x轴的网格线，让图表看起来更简洁，还自定义了 tooltip 的显示内容，鼠标悬停时可以清晰看到每个阶段的进度数值。
效果优化建议
如果需要让图表展示效果更好，还可以做以下调整：
- 如果有总进度不满 100% 的情况，可以增加一个“未开始”的数据集，背景色设为浅灰色，补全剩余进度，让进度条更完整。
- 可以给每个柱体添加圆角效果，通过设置
borderRadius属性调整顶部和底部的圆角，让进度条更美观。 - 如果需要展示多个维度的对比，可以增加更多的堆叠层，只要保证每个分类下的数据集数值总和不超出 y 轴最大值即可。
按照上述步骤操作后，就能得到一个清晰直观的堆叠式进度条图表，适用于大多数多维度进度展示的场景。