什么是堆叠进度条图表？
堆叠进度条图表（stacked bar chart），顾名思义，是一种将不同类别的数据段堆叠在一起以形成一个总体的条形图。在“进度条”的语境下，它常用于展示一个整体（例如一天的时间、一个项目的总工作量）由多个不同状态或阶段组成的情况。每个堆叠的段代表一个特定的状态或贡献值，并且它们的总和通常代表100%或一个固定总量。这种图表形式非常适合可视化机器在一天中“运行中”、“待机”、“维护中”等不同状态的时间分布，或者项目任务的不同阶段完成情况。
选择合适的图表库：Chart.js
为了在HTML中方便快捷地创建这种图表，使用一个成熟的JavaScript图表库是最佳实践。在众多选择中，Chart.js是一个非常优秀的开源库，它轻量、灵活，并提供了丰富的图表类型支持，包括我们需要的堆叠条形图。Chart.js拥有良好的文档和活跃的社区，使得学习和使用都非常便捷。
Chart.js环境搭建
要在您的HTML页面中使用Chart.js，您只需在页面的<head>或<body>标签内引入其CDN链接即可。
<!DOCTYPE html>
<html lang="zh">
<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>
/* 样式可选，用于控制图表容器大小 */
body { font-family: Arial, sans-serif; margin: 20px; }
.chart-container {
width: 80%; /* 控制图表宽度 */
max-width: 900px; /* 最大宽度 */
margin: 0 auto; /* 居中显示 */
}
</style>
</head>
<body>
<h1>机器状态堆叠进度条图表</h1>
<div class="chart-container">
<!-- 用于绘制图表的canvas元素 -->
<canvas id="stackedProgressBarChart"></canvas>
</div>
<script>
// 您的Chart.js代码将在这里编写
</script>
</body>
</html>在HTML中，您需要一个<canvas>元素作为Chart.js绘制图表的容器。通过为其设置一个唯一的id，我们可以在JavaScript中轻松地获取到它。
创建堆叠进度条图表示例
接下来，我们将编写JavaScript代码来配置和渲染堆叠进度条图表。这个例子将模拟多台机器在一天中不同状态的时间分布。
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('DOMContentLoaded', function() {
// 获取canvas元素的2D渲染上下文
const ctx = document.getElementById('stackedProgressBarChart').getContext('2d');
// 定义图表数据
const chartData = {
// labels通常代表图表的类别，例如机器名称或日期
labels: ['机器A', '机器B', '机器C'],
// datasets数组包含每个堆叠段的数据
datasets: [
{
label: '运行中', // 第一个状态
data: [8, 6, 7], // 机器A, B, C分别在该状态的时间/比例
backgroundColor: 'rgba(75, 192, 192, 0.8)', // 状态颜色
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
},
{
label: '待机', // 第二个状态
data: [2, 3, 1],
backgroundColor: 'rgba(255, 206, 86, 0.8)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
},
{
label: '维护中', // 第三个状态
data: [1, 2, 2],
backgroundColor: 'rgba(54, 162, 235, 0.8)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: '故障', // 第四个状态
data: [0.5, 0.5, 1],
backgroundColor: 'rgba(255, 99, 132, 0.8)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}
]
};
// 定义图表选项
const chartOptions = {
responsive: true, // 使图表响应式调整大小
maintainAspectRatio: false, // 允许图表在响应式调整时改变宽高比
indexAxis: 'y', // 关键：将条形图的方向设置为水平（Y轴作为索引轴），使其更像进度条
scales: {
x: {
stacked: true, // 关键：启用X轴的堆叠
title: {
display: true,
text: '时间/比例' // X轴标题
},
beginAtZero: true, // X轴从0开始
max: 12 // 假设总时间为12小时，确保所有堆叠段的总和不超过此值
},
y: {
stacked: true, // 关键：启用Y轴的堆叠（对于水平条形图，通常是类别轴）
title: {
display: true,
text: '机器' // Y轴标题
}
}
},
plugins: {
title: {
display: true,
text: '每日机器状态分布图', // 图表主标题
font: {
size: 18
}
},
tooltip: {
mode: 'index', // 鼠标悬停时显示所有堆叠段的信息
intersect: false // 即使鼠标不在条形图上也能触发
},
legend: {
position: 'top', // 图例位置
}
}
};
// 创建新的Chart实例
new Chart(ctx, {
type: 'bar', // 图表类型为条形图
data: chartData,
options: chartOptions
});
});代码解析
- document.addEventListener('DOMContentLoaded', ...): 确保在DOM完全加载后才执行图表初始化代码，避免操作未加载的元素。
- const ctx = ... .getContext('2d'): 获取<canvas>元素的2D渲染上下文，Chart.js将在此上下文中绘图。
-
chartData 对象:
- labels: 定义了图表的类别标签，在我们的例子中是“机器A”、“机器B”等。对于水平条形图，这些标签会显示在Y轴上。
- datasets: 这是一个数组，每个对象代表一个数据系列（即一个堆叠段）。
- label: 该数据系列的名称，将显示在图例和工具提示中。
- data: 对应labels中每个类别的数据值。例如，data: [8, 6, 7]表示“机器A”运行8个单位时间，“机器B”运行6个单位时间，以此类推。
- backgroundColor 和 borderColor: 定义了每个堆叠段的颜色。
-
chartOptions 对象:
- responsive: true 和 maintainAspectRatio: false: 确保图表能够根据其父容器的大小进行响应式调整，并且不会强制保持原始宽高比。
- indexAxis: 'y': 这是将垂直条形图转换为水平条形图的关键设置。它将Y轴作为索引轴（显示labels），X轴作为值轴。
- scales: 配置图表的坐标轴。
- x 和 y 轴都设置了 stacked: true。对于水平堆叠条形图，x 轴是值轴（表示总和），y 轴是类别轴。设置 stacked: true 确保了相同类别（例如“机器A”）的不同状态数据会在X轴上堆叠起来。
- title: 为轴添加标题，增强可读性。
- beginAtZero: true: 确保值轴从0开始。
- max: 为X轴设置最大值，这对于表示总进度或固定总量（如一天24小时）的图表非常有用，可以确保所有堆叠段的总和不会超出预设范围。
- plugins: 配置Chart.js的插件，如标题、工具提示和图例。
- title: 设置图表的整体标题。
- tooltip: 配置工具提示的行为。mode: 'index' 会在鼠标悬停在某个条形图上时，显示该条形图所有堆叠段的详细信息。
- legend: 配置图例的显示位置。
- new Chart(ctx, {...}): 创建并初始化一个新的Chart实例。type: 'bar' 指定了图表类型。
注意事项与最佳实践
- 数据结构: 确保datasets中的data数组长度与labels数组长度一致。每个data[i]的值应对应labels[i]所代表的类别。
- 颜色选择: 使用对比度高且易于区分的颜色来表示不同的状态，以便用户快速识别。可以利用在线调色板工具。
- 总和管理: 如果您的堆叠条形图代表一个固定的总和（例如，一天24小时），请确保所有datasets中对应labels的数据点之和不超过这个总和。例如，机器A的所有状态时间之和应等于您设定的总时间。如果超出，图表会显示超出部分。
- 响应式设计: Chart.js默认支持响应式，但您可能需要调整父容器的CSS样式（如width和max-width）来更好地控制图表在不同屏幕尺寸下的表现。
- 动态更新: 如果数据是动态变化的（例如实时机器状态），您可以通过更新chart.data并调用chart.update()方法来刷新图表。
总结
通过本教程，您应该已经掌握了如何利用Chart.js库在HTML页面中创建功能强大的堆叠进度条图表。无论是用于监控机器运行状态、可视化项目进度，还是展示其他按比例分布的数据，Chart.js都能提供一个高效且美观的解决方案。熟练运用其数据和选项配置，您将能够根据具体需求定制出各种专业级的数据可视化图表。
