使用Chart.js在HTML中创建堆叠进度条图表-html教程-PHP中文网

使用Chart.js在HTML中创建堆叠进度条图表

花韻仙語

发布： 2025-10-10 09:09:23

原创

739人浏览过

使用Chart.js在HTML中创建堆叠进度条图表

本教程将指导您如何利用JavaScript库Chart.js在HTML页面中实现动态的堆叠进度条图表。通过详细的代码示例和配置说明，您将学习如何设置数据、定义图表选项，并最终创建出可用于展示机器状态、项目进度等多样化信息的专业级图表，有效提升数据可视化效果。

什么是堆叠进度条图表？

堆叠进度条图表（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代码来配置和渲染堆叠进度条图表。这个例子将模拟多台机器在一天中不同状态的时间分布。

爱图表

AI驱动的智能化图表创作平台

查看详情

立即学习“前端免费学习笔记（深入）”；

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都能提供一个高效且美观的解决方案。熟练运用其数据和选项配置，您将能够根据具体需求定制出各种专业级的数据可视化图表。

以上就是使用Chart.js在HTML中创建堆叠进度条图表的详细内容，更多请关注php中文网其它相关文章！