使用Chart.js在HTML中创建堆叠进度条图表
堆叠进度条图表能够直观展示多个数据指标在同一维度下的占比与累计情况，常用于项目进度、资源分配等场景。Chart.js是一款轻量且功能丰富的JavaScript图表库，支持通过配置快速实现各类图表，本文将介绍如何基于Chart.js创建堆叠进度条图表。
前期准备
首先需要在HTML页面中引入Chart.js库，我们可以直接使用官方提供的CDN链接完成引入。同时准备一个用于承载图表的<canvas>标签，这是Chart.js渲染图表的容器。
<!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@4.4.1/dist/chart.umd.min.js"></script>
<style>
/* 设置图表容器样式，控制图表大小 */
.chart-container {
width: 80%;
max-width: 800px;
margin: 30px auto;
}
</style>
</head>
<body>
<div class="chart-container">
<!-- 图表渲染容器 -->
<canvas id="stackedProgressBar"></canvas>
</div>
<script src="chart-config.js"></script>
</body>
</html>上述代码中，我们通过<link>和<script>标签引入了Chart.js的CDN资源，同时定义了图表容器的样式，避免图表过大或过小影响可读性。后续所有的图表配置逻辑都会写在chart-config.js文件中。
配置堆叠进度条图表
Chart.js中并没有直接的“堆叠进度条”图表类型，我们可以通过配置条形图（bar chart）实现堆叠效果：将条形图的布局设置为水平方向，开启堆叠模式，同时让每个条形的数值自动累计，就能模拟出堆叠进度条的视觉效果。
// 获取canvas元素的上下文
const ctx = document.getElementById('stackedProgressBar').getContext('2d');
// 定义堆叠进度条的数据
const stackedBarData = {
// 进度条的分类标签，这里以项目阶段为例
labels: ['需求分析', '设计开发', '测试验收', '上线部署'],
datasets: [
{
label: '已完成',
// 每个阶段已完成的进度数值，范围0-100
data: [80, 60, 40, 20],
backgroundColor: 'rgba(54, 162, 235, 0.7)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: '进行中',
data: [10, 25, 30, 40],
backgroundColor: 'rgba(255, 206, 86, 0.7)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
},
{
label: '未开始',
data: [10, 15, 30, 40],
backgroundColor: 'rgba(255, 99, 132, 0.7)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}
]
};
// 图表配置项
const stackedBarConfig = {
type: 'bar',
data: stackedBarData,
options: {
// 设置为水平条形图，符合进度条从左到右的视觉习惯
indexAxis: 'y',
// 开启堆叠模式，让不同数据集的数值在同一分类下堆叠
scales: {
x: {
stacked: true,
// 设置x轴最大值为100，代表进度满值
max: 100,
title: {
display: true,
text: '进度百分比(%)'
}
},
y: {
stacked: true,
title: {
display: true,
text: '项目阶段'
}
}
},
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: '项目各阶段进度堆叠展示'
},
tooltip: {
// 配置提示框，显示具体的进度数值
callbacks: {
label: function(context) {
return `${context.dataset.label}: ${context.parsed.x}%`;
}
}
}
}
}
};
// 初始化图表
new Chart(ctx, stackedBarConfig);代码逻辑说明
- 首先通过
getElementById获取<canvas>元素的上下文，这是Chart.js渲染图表的基础。 - 数据部分定义了三个数据集，分别对应“已完成”“进行中”“未开始”三个状态，每个数据集的数值总和为100，确保每个阶段的进度条满值为100%。
- 配置项中
indexAxis: 'y'将默认的垂直条形图改为水平条形图，更符合进度条的阅读习惯；scales下的stacked: true配置分别在x轴和y轴开启堆叠，让同一分类下的不同状态数值自动相加，形成堆叠效果。 - 最后通过
new Chart()传入上下文和配置项，完成图表的初始化渲染。
效果调整与扩展
如果需要调整进度条的视觉效果，可以修改backgroundColor和borderColor的值更换颜色，也可以调整borderWidth修改边框粗细。若需要展示动态更新的进度，只需要修改对应数据集的data数组，再调用图表的update()方法即可刷新视图。
// 假设更新“需求分析”阶段的已完成进度为90 stackedBarData.datasets[0].data[0] = 90; // 更新进行中进度为5，未开始进度为5，保持总和为100 stackedBarData.datasets[1].data[0] = 5; stackedBarData.datasets[2].data[0] = 5; // 刷新图表 myChart.update();
上述代码需要先保存初始化的图表实例，将new Chart(ctx, stackedBarConfig)赋值给变量myChart，就可以实现动态更新进度的效果。