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

使用 Chart.js 创建堆叠式进度条图表

霞舞

发布： 2025-10-10 08:46:28

原创

211人浏览过

使用 chart.js 创建堆叠式进度条图表

本文将介绍如何使用 Chart.js 库创建一个堆叠式进度条图表，用于展示诸如机器设备状态等随时间变化的指标。通过灵活配置 Chart.js，可以实现自定义颜色和多状态重复显示，满足多样化的数据可视化需求。

Chart.js 是一个流行的 JavaScript 图表库，它提供了多种图表类型，包括柱状图、折线图、饼图等。其强大的可配置性和易用性使其成为前端数据可视化的理想选择。下面将详细介绍如何使用 Chart.js 创建堆叠式柱状图，并应用于显示机器设备状态的场景。

1. 引入 Chart.js

首先，需要在 HTML 文件中引入 Chart.js 库。可以通过 CDN 方式引入，也可以下载 Chart.js 文件并本地引用。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

登录后复制

2. 创建 Canvas 元素

在 HTML 文件中创建一个 <canvas> 元素，用于渲染图表。

<canvas id="myChart"></canvas>

登录后复制

3. 编写 JavaScript 代码

接下来，编写 JavaScript 代码来创建和配置 Chart.js 图表。

爱图表

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

查看详情

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // 设置图表类型为柱状图
    data: {
        labels: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00'], // 设置 x 轴标签，例如时间点
        datasets: [{
            label: '运行', // 设置数据集标签
            data: [10, 20, 15, 25, 22, 30], // 设置数据集数据
            backgroundColor: 'green', // 设置背景颜色
            stack: 'Stack 0' // 设置堆叠组
        }, {
            label: '空闲',
            data: [5, 10, 8, 12, 7, 15],
            backgroundColor: 'blue',
            stack: 'Stack 0'
        }, {
            label: '故障',
            data: [2, 3, 1, 4, 2, 1],
            backgroundColor: 'red',
            stack: 'Stack 0'
        }]
    },
    options: {
        scales: {
            x: {
                stacked: true // 启用 x 轴堆叠
            },
            y: {
                stacked: true // 启用 y 轴堆叠
            }
        }
    }
});

登录后复制

代码解释：

type: 'bar'：指定图表类型为柱状图。
data.labels：定义 x 轴的标签，这里使用时间点作为示例。
data.datasets：定义数据集，每个数据集代表一种状态（例如：运行、空闲、故障）。
- label：数据集的标签，用于图例显示。
- data：数据集的数据，表示每个时间点该状态的持续时间或占比。
- backgroundColor：数据集的背景颜色，用于区分不同的状态。
- stack：将数据集分配到同一个堆叠组，确保它们在同一个柱状图上堆叠显示。
options.scales.x.stacked: true 和 options.scales.y.stacked: true：启用 x 轴和 y 轴的堆叠模式。

4. 自定义颜色和状态重复显示

根据实际需求，可以自定义颜色和状态重复显示。例如，可以使用不同的颜色表示不同的状态，并在同一个时间段内多次使用相同的颜色来表示状态的切换。

const myChart = new Chart(ctx, {
    // ...
    data: {
        labels: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00'],
        datasets: [{
            label: '运行',
            data: [10, 0, 15, 0, 22, 0], // 运行状态只在特定时间点出现
            backgroundColor: 'green',
            stack: 'Stack 0'
        }, {
            label: '空闲',
            data: [0, 10, 0, 12, 0, 15], // 空闲状态只在特定时间点出现
            backgroundColor: 'blue',
            stack: 'Stack 0'
        }, {
            label: '故障',
            data: [0, 0, 0, 0, 0, 0], // 故障状态只在特定时间点出现
            backgroundColor: 'red',
            stack: 'Stack 0'
        },
        {
            label: '运行',
            data: [0, 20, 0, 25, 0, 30], // 运行状态只在特定时间点出现
            backgroundColor: 'green',
            stack: 'Stack 0'
        }]
    },
    // ...
});

登录后复制

注意事项：