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

使用javascript和chart.js创建堆叠进度条图表教程

本教程详细介绍了如何利用JavaScript和Chart.js库在HTML页面中创建美观且功能强大的堆叠进度条图表。通过配置数据、图表类型和堆叠选项，您可以轻松可视化各种状态或进度，例如机器运行状态或项目里程碑，并实现颜色重复使用以增强视觉表达力。

引言：堆叠进度条图表的应用与优势

堆叠进度条图表是一种高效的数据可视化工具，它能够在一个条形中展示多个组成部分的比例或贡献，从而清晰地呈现整体的构成和各部分的相对大小。例如，在工业场景中，可以使用此类图表来表示一台机器在一天内不同运行状态（运行、停机、维护、空闲）所占用的时间比例；在项目管理中，则可以展示不同任务阶段的完成进度。其主要优势在于直观性强、信息密度高，且能够灵活地通过颜色区分不同状态，即使颜色重复使用也能保持良好的可读性。

为了在网页中实现这种图表，我们通常会借助成熟的JavaScript图表库。在众多选择中，Chart.js以其轻量级、易用性和强大的功能集脱颖而出，特别适合创建各类交互式图表，包括我们所需的堆叠条形图。

准备工作：引入Chart.js库

在开始编写代码之前，我们需要将Chart.js库引入到HTML页面中。最简单的方式是通过CDN（内容分发网络）引入。将以下<script>标签添加到HTML文件的<head>或<body>底部：

<!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>
        // JavaScript 代码将在这里编写
    </script>
</body>
</html>

登录后复制

创建图表容器

在HTML中，我们需要一个<canvas>元素作为Chart.js渲染图表的画布。为这个画布指定一个唯一的id，以便在JavaScript中引用它。

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

<div class="chart-container">
    <canvas id="stackedProgressBarChart"></canvas>
</div>

登录后复制

核心实现：使用JavaScript配置Chart.js

接下来，我们将使用JavaScript来定义图表的数据和配置选项。一个堆叠条形图的核心在于其data结构和options中的scales配置。

1. 定义图表数据

为了模拟堆叠进度条，我们将创建一个包含多个数据集（datasets）的data对象。每个数据集代表堆叠条形图中的一个“层”或一个状态。例如，我们可以模拟一台机器在一天中的不同状态时长。

爱图表

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

查看详情

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
        }
    ]
};

登录后复制

说明：

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
});

登录后复制

将上述JavaScript代码片段整合到HTML文件的<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强大的定制能力，您可以根据具体需求创建出满足各种业务场景的专业级图表。

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