在现代web应用中，数据可视化是提升用户体验和信息传达效率的关键。堆叠式进度条图表（stacked progress bar chart），作为一种特殊的堆叠条形图，能够直观地展示一个整体由多个部分组成，并且这些部分的累积进度。例如，它可以用于显示一天中机器的不同运行状态（运行、停机、维护），或项目不同阶段的完成情况。为了在html页面中高效且美观地实现这种图表，我们强烈推荐使用chart.js这一强大的javascript图表库。
为什么选择Chart.js？
Chart.js是一个开源的JavaScript图表库，它允许开发者使用HTML5
- 功能丰富： 支持多种图表类型，包括条形图、折线图、饼图等，并对堆叠式图表有良好支持。
- 易于使用： 拥有清晰的API和详细的文档，上手快，配置灵活。
- 高度可定制： 可以通过配置选项自定义图表的颜色、字体、轴、工具提示等各个方面。
- 响应式设计： 图表能够自动适应不同屏幕尺寸，提供良好的用户体验。
- 活跃的社区支持： 遇到问题时，可以方便地找到解决方案和帮助。
环境准备
在开始创建图表之前，您需要将Chart.js库引入到您的HTML页面中。最简单的方式是通过CDN（内容分发网络）引入。
堆叠式进度条图表
创建堆叠式进度条图表
接下来，我们将在
1. 获取 Canvas 上下文
首先，我们需要获取HTML中
立即学习“Java免费学习笔记（深入）”；
const ctx = document.getElementById('stackedProgressBarChart').getContext('2d');2. 准备图表数据
堆叠式条形图的数据结构是关键。每个“条形”代表一个类别（例如，一天），而每个条形内部的“堆叠部分”则代表该类别下的不同状态或组件。Chart.js通过 datasets 数组来处理这些堆叠部分。每个 dataset 对应一个堆叠层，包含其标签、颜色和对应的数据点。
ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件
const data = {
labels: ['机器A', '机器B', '机器C'], // x轴标签，代表不同的机器或日期
datasets: [
{
label: '运行中', // 第一个堆叠层的标签
data: [8, 6, 9], // 对应机器A, B, C的运行小时数
backgroundColor: 'rgba(75, 192, 192, 0.8)', // 运行中的颜色
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
},
{
label: '停机', // 第二个堆叠层的标签
data: [1, 2, 0], // 对应机器A, B, C的停机小时数
backgroundColor: 'rgba(255, 99, 132, 0.8)', // 停机的颜色
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},
{
label: '维护中', // 第三个堆叠层的标签
data: [0.5, 1.5, 1], // 对应机器A, B, C的维护小时数
backgroundColor: 'rgba(255, 205, 86, 0.8)', // 维护中的颜色
borderColor: 'rgba(255, 205, 86, 1)',
borderWidth: 1
},
{
label: '空闲', // 第四个堆叠层的标签
data: [14.5, 14.5, 14], // 对应机器A, B, C的空闲小时数
backgroundColor: 'rgba(201, 203, 207, 0.8)', // 空闲的颜色
borderColor: 'rgba(201, 203, 207, 1)',
borderWidth: 1
}
]
};在上述示例中，我们模拟了三台机器在一天中（假设24小时）的不同状态。每个 data 数组中的值代表该状态所占用的时间（例如小时数）。请注意，backgroundColor 和 borderColor 可以根据需要重复使用，以表示相同的状态类型。
3. 配置图表选项
图表选项用于控制图表的行为和外观。对于堆叠式条形图，最重要的是在 scales 中将 stacked 属性设置为 true。
const options = {
responsive: true, // 使图表响应式
maintainAspectRatio: false, // 允许canvas容器自由调整宽高
plugins: {
title: {
display: true,
text: '机器每日状态概览 (小时)', // 图表标题
font: {
size: 18
}
},
tooltip: {
mode: 'index', // 工具提示模式，显示所有堆叠层的数据
intersect: false // 工具提示不要求精确相交
},
legend: {
display: true, // 显示图例
position: 'top' // 图例位置
}
},
scales: {
x: {
stacked: true, // x轴堆叠
title: {
display: true,
text: '机器名称'
}
},
y: {
stacked: true, // y轴堆叠
beginAtZero: true, // y轴从0开始
title: {
display: true,
text: '小时数'
},
max: 24 // 假设一天24小时，设置y轴最大值
}
}
};4. 创建图表实例
最后，使用 new Chart() 构造函数创建图表实例，传入上下文、图表类型、数据和选项。
const myStackedBarChart = new Chart(ctx, {
type: 'bar', // 图表类型为条形图
data: data,
options: options
});完整示例代码
将所有代码片段组合起来，完整的HTML文件如下：
堆叠式进度条图表
注意事项与最佳实践
- 数据准确性： 确保您的数据是准确且一致的。堆叠条形图的每个部分的总和通常应代表一个有意义的整体（例如，一天中的总小时数，或项目的总完成度）。
- 颜色选择： 选择对比鲜明且易于区分的颜色，尤其是在颜色可能重复使用的情况下。考虑使用品牌色或具有特定语义的颜色（例如，绿色表示“运行”，红色表示“停机”）。
- 响应式设计： responsive: true 和 maintainAspectRatio: false 是实现响应式图表的关键。您可能还需要通过CSS来控制 .chart-container 的最大宽度和高度，以确保在不同屏幕尺寸下有良好的显示效果。
- 交互性： Chart.js提供了丰富的交互功能，如工具提示（Tooltip）、图例点击隐藏/显示数据等。合理配置这些功能可以大大提升用户体验。
- 动态数据： 如果您的数据是动态变化的，您可以通过更新 myStackedBarChart.data 对象并调用 myStackedBarChart.update() 方法来刷新图表。
- 性能优化： 对于包含大量数据点的复杂图表，考虑数据聚合、懒加载或使用更高级的优化技术来避免性能问题。
总结
通过本教程，您应该已经掌握了如何利用Chart.js库在HTML页面中创建和显示堆叠式进度条图表。Chart.js凭借其灵活性和强大的功能，使得复杂的数据可视化变得简单而高效。无论是展示设备运行状态、项目进度，还是其他需要分层展示的数据，堆叠式条形图都是一个极佳的选择。建议您进一步查阅Chart.js的官方文档，探索更多高级配置和自定义选项，以满足您特定的可视化需求。
