如何使用 JavaScript 创建堆叠式进度条图表-html教程-PHP中文网

如何使用 JavaScript 创建堆叠式进度条图表

碧海醫心

发布： 2025-10-10 14:38:01

原创

573人浏览过

如何使用 javascript 创建堆叠式进度条图表

本文将介绍如何使用 Chart.js 库创建一个堆叠式进度条图表，用于展示诸如机械设备状态等随时间变化的数据。我们将提供详细步骤和示例代码，帮助你快速实现类似效果。Chart.js 提供了灵活的配置选项，可以根据实际需求自定义图表样式和数据展示方式。

使用 Chart.js 创建堆叠式条形图

Chart.js 是一个流行的 JavaScript 图表库，它提供了多种图表类型，包括堆叠式条形图。以下是使用 Chart.js 创建堆叠式进度条图表的步骤：

1. 引入 Chart.js 库

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

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

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

登录后复制

2. 创建 Canvas 元素

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

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

登录后复制

3. 编写 JavaScript 代码

接下来，编写 JavaScript 代码来配置和渲染图表。

爱图表

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'], // 时间标签
        datasets: [{
            label: '运行',
            data: [10, 20, 30, 40, 50, 60], // 运行时间数据
            backgroundColor: 'green',
        }, {
            label: '停止',
            data: [5, 10, 15, 20, 25, 30], // 停止时间数据
            backgroundColor: 'red',
        }, {
            label: '维护',
            data: [2, 4, 6, 8, 10, 12], // 维护时间数据
            backgroundColor: 'yellow',
        }]
    },
    options: {
        scales: {
            x: {
                stacked: true
            },
            y: {
                stacked: true
            }
        }
    }
});

登录后复制

代码解释：

type: 'bar'：指定图表类型为条形图。
data.labels：定义 X 轴的标签，这里使用时间作为标签。
data.datasets：定义数据集，每个数据集代表一种状态（例如，运行、停止、维护）。
- label：数据集的标签。
- data：数据集的数据，对应于每个时间点的状态时长。
- backgroundColor：数据集的颜色。
options.scales.x.stacked: true 和 options.scales.y.stacked: true：启用堆叠效果。

4. 自定义图表样式

Chart.js 提供了丰富的配置选项，可以自定义图表样式，例如：

borderColor：边框颜色。
borderWidth：边框宽度。
hoverBackgroundColor：鼠标悬停时的背景颜色。
hoverBorderColor：鼠标悬停时的边框颜色。

可以将这些选项添加到 datasets 中的每个数据集，以自定义每个状态的样式。

完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>堆叠式进度条图表</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>

    <script>
        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'],
                datasets: [{
                    label: '运行',
                    data: [10, 20, 30, 40, 50, 60],
                    backgroundColor: 'green',
                }, {
                    label: '停止',
                    data: [5, 10, 15, 20, 25, 30],
                    backgroundColor: 'red',
                }, {
                    label: '维护',
                    data: [2, 4, 6, 8, 10, 12],
                    backgroundColor: 'yellow',
                }]
            },
            options: {
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        stacked: true
                    }
                }
            }
        });
    </script>
</body>
</html>

登录后复制

注意事项：