JavaScript实现堆叠式进度条图表：Chart.js教程
在业务数据可视化场景中，堆叠式进度条图表能够清晰展示多维度数据的占比关系，比如不同部门在各季度的业绩贡献、不同产品类别的销售额分布等。Chart.js作为一款轻量且功能丰富的JavaScript图表库，原生支持堆叠式图表的配置，只需要简单调整参数就能实现堆叠式进度条效果。本文将逐步讲解如何基于Chart.js完成堆叠式进度条图表的实现。
准备工作
首先需要在项目中引入Chart.js库，这里我们使用CDN引入的方式，也可以根据项目需求通过npm安装后引入。同时需要准备一个用于放置图表的<canvas>元素，以及基础的HTML页面结构。
<!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;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="chart-container">
<!-- 图表渲染的画布元素 -->
<canvas id="stackedProgressBar"></canvas>
</div>
<script src="app.js"></script>
</body>
</html>核心实现逻辑
堆叠式进度条的本质是将多个数据集的柱状图堆叠在一起，同时调整坐标轴的显示方式，让整体高度代表100%的总量，每个柱状块的占比对应数据的相对值。下面是具体的JavaScript实现代码，相关逻辑已在注释中说明。
// 获取画布元素的上下文
const ctx = document.getElementById('stackedProgressBar').getContext('2d');
// 定义X轴标签，这里以四个季度为例
const labels = ['第一季度', '第二季度', '第三季度', '第四季度'];
// 第一个数据集：产品A的销售额
const productAData = {
label: '产品A',
// 每个季度产品A的销售额
data: [120, 150, 180, 200],
// 柱状块背景色
backgroundColor: 'rgba(54, 162, 235, 0.7)',
// 边框颜色
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
};
// 第二个数据集：产品B的销售额
const productBData = {
label: '产品B',
data: [80, 120, 150, 170],
backgroundColor: 'rgba(255, 99, 132, 0.7)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
};
// 第三个数据集：产品C的销售额
const productCData = {
label: '产品C',
data: [60, 90, 110, 130],
backgroundColor: 'rgba(75, 192, 192, 0.7)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
};
// 创建图表实例
const stackedProgressBarChart = new Chart(ctx, {
// 图表类型为柱状图
type: 'bar',
data: {
labels: labels,
datasets: [productAData, productBData, productCData]
},
options: {
// 调整图表整体布局
responsive: true,
plugins: {
// 配置图例
legend: {
position: 'top',
},
// 配置标题
title: {
display: true,
text: '不同产品各季度销售额堆叠占比'
},
// 可选：配置提示框
tooltip: {
mode: 'index',
intersect: false
}
},
// 坐标轴配置
scales: {
x: {
// 开启X轴堆叠
stacked: true,
},
y: {
// 开启Y轴堆叠
stacked: true,
// 设置Y轴最大值为各季度销售额总和的最大值，这里可以手动计算或者动态计算
// 示例中四个季度总和分别为260、360、440、500，所以最大值设为500
max: 500,
title: {
display: true,
text: '销售额（万元）'
}
}
}
}
});效果优化与调整
上述代码已经能实现基础的堆叠式进度条效果，如果需要调整为真正的进度条样式（即每个季度的总高度统一为100%，各产品占比对应百分比），可以先将原始数据转换为百分比数据，再调整Y轴配置。以下是修改后的数据集处理与Y轴配置代码：
// 原始销售额数据
const rawData = {
productA: [120, 150, 180, 200],
productB: [80, 120, 150, 170],
productC: [60, 90, 110, 130]
};
// 计算每个季度的销售额总和
const quarterSums = rawData.productA.map((item, index) => {
return item + rawData.productB[index] + rawData.productC[index];
});
// 将原始数据转换为百分比
const percentData = {
productA: rawData.productA.map((item, index) => (item / quarterSums[index] * 100).toFixed(2)),
productB: rawData.productB.map((item, index) => (item / quarterSums[index] * 100).toFixed(2)),
productC: rawData.productC.map((item, index) => (item / quarterSums[index] * 100).toFixed(2))
};
// 更新数据集的百分比数据
productAData.data = percentData.productA;
productBData.data = percentData.productB;
productCData.data = percentData.productC;
// 调整Y轴配置，最大值设为100，代表100%
stackedProgressBarChart.options.scales.y.max = 100;
stackedProgressBarChart.options.scales.y.title.text = '占比（%）';
// 更新图表渲染
stackedProgressBarChart.update();注意事项
- 堆叠配置需要在X轴和Y轴同时开启
stacked: true，否则无法实现堆叠效果。 - 如果使用百分比模式，需要确保每个堆叠组的数据总和不超过100，避免图表显示异常。
- Chart.js的版本更新可能会带来配置项的变化，若遇到问题可以查阅对应版本的官方文档，官方文档地址为https://www.ipipp.com/docs/chartjs/，注意已将原始ippipp.com替换为ipipp.com。
- 可以通过调整
borderRadius属性给柱状块添加圆角，让进度条视觉效果更柔和，比如给数据集添加borderRadius: 5配置即可。
通过以上步骤，我们就能基于Chart.js快速实现不同场景下的堆叠式进度条图表，根据实际业务需求调整数据、样式和配置项，即可满足各类数据可视化需求。