使用 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 图表。

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

下载

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'
        }]
    },
    // ...
});

注意事项：

• 确保所有需要堆叠的数据集都分配到同一个 stack 组。
• 根据实际数据调整 data 数组的值，以反映正确的状态持续时间和占比。
• 可以通过修改 options 对象中的其他属性来进一步自定义图表的外观和行为，例如调整图例的位置、添加标题等。

总结：

通过使用 Chart.js 库，可以轻松创建堆叠式柱状图，并将其应用于展示机器设备状态等随时间变化的指标。通过灵活配置 Chart.js，可以实现自定义颜色和多状态重复显示，满足多样化的数据可视化需求。 这种方式能够清晰地展示不同状态的持续时间和占比，帮助用户更好地了解设备运行情况。