引言：堆叠进度条图表的应用与优势
堆叠进度条图表是一种高效的数据可视化工具，它能够在一个条形中展示多个组成部分的比例或贡献，从而清晰地呈现整体的构成和各部分的相对大小。例如，在工业场景中，可以使用此类图表来表示一台机器在一天内不同运行状态（运行、停机、维护、空闲）所占用的时间比例；在项目管理中，则可以展示不同任务阶段的完成进度。其主要优势在于直观性强、信息密度高，且能够灵活地通过颜色区分不同状态，即使颜色重复使用也能保持良好的可读性。
为了在网页中实现这种图表，我们通常会借助成熟的JavaScript图表库。在众多选择中，Chart.js以其轻量级、易用性和强大的功能集脱颖而出，特别适合创建各类交互式图表，包括我们所需的堆叠条形图。
准备工作：引入Chart.js库
在开始编写代码之前，我们需要将Chart.js库引入到HTML页面中。最简单的方式是通过CDN（内容分发网络）引入。将以下
堆叠进度条图表
创建图表容器
在HTML中，我们需要一个
核心实现：使用JavaScript配置Chart.js
接下来，我们将使用JavaScript来定义图表的数据和配置选项。一个堆叠条形图的核心在于其data结构和options中的scales配置。
1. 定义图表数据
为了模拟堆叠进度条，我们将创建一个包含多个数据集（datasets）的data对象。每个数据集代表堆叠条形图中的一个“层”或一个状态。例如，我们可以模拟一台机器在一天中的不同状态时长。
const ctx = document.getElementById('stackedProgressBarChart').getContext('2d');
const chartData = {
labels: ['机器A'], // 标签可以代表不同的机器、日期或其他分类
datasets: [
{
label: '运行中',
data: [10], // 机器A运行了10小时
backgroundColor: 'rgba(75, 192, 192, 0.8)', // 运行状态的颜色
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
},
{
label: '停机',
data: [5], // 机器A停机5小时
backgroundColor: 'rgba(255, 99, 132, 0.8)', // 停机状态的颜色
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},
{
label: '维护中',
data: [3], // 机器A维护3小时
backgroundColor: 'rgba(255, 205, 86, 0.8)', // 维护状态的颜色
borderColor: 'rgba(255, 205, 86, 1)',
borderWidth: 1
},
{
label: '空闲',
data: [6], // 机器A空闲6小时
backgroundColor: 'rgba(201, 203, 207, 0.8)', // 空闲状态的颜色
borderColor: 'rgba(201, 203, 207, 1)',
borderWidth: 1
}
]
};说明：
- labels: 定义了X轴的分类标签。在这个例子中，我们只有一个标签“机器A”，表示我们正在展示“机器A”的每日状态。如果你想展示多台机器或多天的状态，可以在这里添加更多标签，并在每个dataset的data数组中提供对应的值。
- datasets: 这是一个数组，每个对象代表图表中的一个数据系列。
- label: 该数据系列的名称，将显示在图例和工具提示中。
- data: 对应labels数组的数据值。例如，[10]表示“机器A”的“运行中”状态持续了10个单位（例如小时）。
- backgroundColor和borderColor: 定义了该数据系列的填充色和边框色。可以根据不同的状态选择不同的颜色，也可以重复使用颜色。
2. 配置图表选项
为了使条形图堆叠显示，我们需要在options中特别配置scales属性。
const chartOptions = {
responsive: true, // 使图表响应式调整大小
maintainAspectRatio: false, // 允许图表在响应式时改变宽高比
indexAxis: 'y', // 将条形图的方向设置为水平（Y轴为索引轴）
plugins: {
title: {
display: true,
text: '机器A日状态堆叠进度条',
font: {
size: 18
}
},
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
x: {
stacked: true, // X轴堆叠
title: {
display: true,
text: '时间 (小时)'
},
beginAtZero: true // X轴从0开始
},
y: {
stacked: true, // Y轴堆叠
title: {
display: true,
text: '机器'
}
}
}
};说明：
- responsive: true 和 maintainAspectRatio: false: 确保图表能够适应其容器的大小，并且不会强制保持固定的宽高比。
- indexAxis: 'y': 将条形图的方向设置为水平。默认情况下，条形图是垂直的（indexAxis: 'x'）。对于进度条形式的图表，水平方向通常更直观。
- plugins.title: 配置图表的标题。
- plugins.tooltip: 配置工具提示的显示模式，mode: 'index'会在鼠标悬停在条形上时显示所有堆叠部分的详细信息。
- scales: 这是最关键的部分。
- x.stacked: true 和 y.stacked: true: 这两个属性是实现堆叠效果的关键。 当indexAxis: 'y'时，x轴代表数值，y轴代表分类。因此，将x.stacked设置为true会使条形图的数值部分（长度）堆叠起来，而y.stacked设置为true则确保了分类轴的正确处理。
- title: 为轴添加标题，提高可读性。
- beginAtZero: true: 确保数值轴从0开始，避免数据偏差。
3. 实例化图表
将数据和选项组合，创建新的Chart实例。
new Chart(ctx, {
type: 'bar', // 指定图表类型为条形图
data: chartData,
options: chartOptions
});将上述JavaScript代码片段整合到HTML文件的
完整示例代码
堆叠进度条图表教程
注意事项与进阶
- 数据动态加载: 在实际应用中，图表数据通常来自后端API。您可以使用fetch或axios等工具从服务器获取数据，然后更新chartData对象并重新渲染图表。
-
多条堆叠进度条: 如果您需要显示多条堆叠进度条（例如，多台机器或多天的状态），只需在labels数组中添加更多标签，并在每个dataset的data数组中为每个标签提供相应的值。
// 示例：多条堆叠进度条 labels: ['机器A', '机器B', '机器C'], datasets: [ { label: '运行中', data: [10, 8, 12], backgroundColor: 'green' }, { label: '停机', data: [5, 7, 3], backgroundColor: 'red' }, // ... 其他数据集 ] - 颜色管理: Chart.js支持各种颜色格式（HEX、RGB、RGBA）。您可以定义一个颜色数组，根据状态类型或数据系列索引动态分配颜色。如果需要重复使用颜色，只需在backgroundColor属性中重复指定即可。
- 图表交互: Chart.js提供了丰富的交互功能，如工具提示（tooltip）、图例（legend）点击过滤等。通过配置plugins选项可以进一步定制这些行为。
- 响应式设计: 确保responsive: true和maintainAspectRatio: false能够让图表更好地适应不同屏幕尺寸。您也可以通过CSS控制canvas父容器的尺寸。
- 性能优化: 对于大量数据的图表，考虑使用chart.js/auto而不是完整的chart.js，或者按需导入模块。
总结
通过本教程，您已经掌握了如何使用Chart.js库在HTML页面中创建具有堆叠效果的进度条图表。关键在于正确配置data中的datasets来表示堆叠的各个部分，以及在options.scales中将stacked属性设置为true。这种图表形式在展示比例、构成和状态变化方面具有极高的视觉效率，是数据可视化工具箱中不可或缺的一部分。结合Chart.js强大的定制能力，您可以根据具体需求创建出满足各种业务场景的专业级图表。
