使用J*aScript和Chart.js创建堆叠进度条图表教程
发布时间：2025-10-10 12:18
发布者：网络
浏览次数：
引言：堆叠进度条图表的应用与优势
堆叠进度条图表是一种高效的数据可视化工具，它能够在一个条形中展示多个组成部分的比例或贡献，从而清晰地呈现整体的构成和各部分的相对大小。例如，在工业场景中，可以使用此类图表来表示一台机器在一天内不同运行状态（运行、停机、维护、空闲）所占用的时间比例；在项目管理中，则可以展示不同任务阶段的完成进度。其主要优势在于直观性强、信息密度高，且能够灵活地通过颜色区分不同状态，即使颜色重复使用也能保持良好的可读性。
为了在网页中实现这种图表，我们通常会借助成熟的J*aScript图表库。在众多选择中，Chart.js以其轻量级、易用性和强大的功能集脱颖而出，特别适合创建各类交互式图表，包括我们所需的堆叠条形图。
准备工作：引入Chart.js库
在开始编写代码之前，我们需要将Chart.js库引入到HTML页面中。最简单的方式是通过CDN（内容分发网络）引入。将以下<script>标签添加到HTML文件的<head>或<body>底部：</script>
<!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: 80%;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="chart-container">
<canvas id="stackedProgressBarChart"></canvas>
</div>
<script>
// J*aScript 代码将在这里编写
</script>
</body>
</html>创建图表容器
在HTML中，我们需要一个
<div class="chart-container">
<canvas id="stackedProgressBarChart"></canvas>
</div>核心实现：使用J*aScript配置Chart.js
接下来，我们将使用J*aScript来定义图表的数据和配置选项。一个堆叠条形图的核心在于其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
}
]
};
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
}
]
};说明：
青泥AI
青泥学术AI写作辅助平台
360
查看详情
- 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
});将上述J*aScript代码片段整合到HTML文件的<script>标签中，即可生成一个堆叠进度条图表。</script>
完整示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>堆叠进度条图表教程</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
.chart-container {
width: 90%; /* 调整宽度以适应内容 */
max-width: 800px; /* 最大宽度 */
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
canvas {
height: 200px !important; /* 设置画布高度，!important 确保覆盖默认样式 */
}
</style>
</head>
<body>
<div class="chart-container">
<canvas id="stackedProgressBarChart"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
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
}
]
};
const chartOptions = {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y', // 使条形图水平显示
plugins: {
title: {
display: true,
text: '机器A日状态堆叠进度条',
font: {
size: 18
}
},
tooltip: {
mode: 'index',
intersect: false
},
legend: {
position: 'bottom', // 将图例放在底部
}
},
scales: {
x: {
stacked: true, // X轴堆叠
title: {
display: true,
text: '时间 (小时)'
},
beginAtZero: true,
max: 24 // 假设总时长为24小时
},
y: {
stacked: true, // Y轴堆叠
title: {
display: true,
text: '机器'
},
grid: {
display: false // 隐藏Y轴网格线
}
}
}
};
new Chart(ctx, {
type: 'bar',
data: chartData,
options: chartOptions
});
});
</script>
</body>
</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强大的定制能力，您可以根据具体需求创建出满足各种业务场景的专业级图表。
以上就是使用J*aScript和Chart.js创建堆叠进度条图表教程的详细内容，更多请关注其它相关文章！
# css
# javascript
# java
# html
# js
# axios
# 工具
# 后端
# ai
# ios
# html文件
# nas
# cd
# 进度条
# 条形图
# 设置为
# 您可以
# 表单
# 重复使用
# 运行状态
# 多条
# 多个
# 单选框
# 宿迁智能推广招聘网站
# 石油路网站推广服务
# 外贸 建站seo 视频教程
# 杨德克斯网站怎么推广
# 潮州seo网站优化快照
# 嘉兴网站建设嘉兴
# 北京综合网络营销推广
# dw建设网站链接
# 滁州网络seo公司
# seo是谁做的