Chart.js实现分组堆叠条形图：数据结构转换与可视化指南-js教程-PHP中文网

Chart.js实现分组堆叠条形图：数据结构转换与可视化指南

碧海醫心

发布： 2025-11-06 14:03:17

原创

935人浏览过

Chart.js实现分组堆叠条形图：数据结构转换与可视化指南

本教程详细介绍了如何使用chart.js创建分组堆叠条形图。核心在于将原始的嵌套键值对数据结构转换为chart.js所需的扁平化格式，并根据设备和类别动态构建数据集。文章将逐步指导数据预处理、数据集生成以及chart.js的配置，确保图表正确展示多维度数据，并提供完整的示例代码。

在数据可视化中，分组堆叠条形图是一种强大的工具，能够清晰地展示不同类别在各个分组中的贡献。例如，在设备使用场景下，我们可能希望在一个条形图中显示每个设备的总体使用情况，同时将该条形图按不同用户（或类别）进行堆叠，以展示每个用户在特定设备上的贡献值（如积分）。Chart.js作为一款流行的JavaScript图表库，提供了灵活的配置来实现这一目标，但关键在于正确地准备数据结构。

理解Chart.js的数据结构要求

为了在Chart.js中创建分组堆叠条形图，我们需要遵循其特定的数据结构。通常，Chart.js的data对象包含两个主要部分：

labels: 对应图表的X轴标签，在我们的场景中，这将是各个设备名称（如"Laptop", "Phone"）。
datasets: 这是一个数组，其中每个元素代表一个可堆叠的层。每个dataset对象应包含：
- label: 该堆叠层的名称（如"amckinlay", "cvu"）。
- data: 一个数组，包含该层在每个X轴标签（设备）上的对应值。
- backgroundColor: 该层的背景颜色。

原始数据结构示例：

// 原始数据结构
var alldata = [
    {
        device: "Laptop",
        values: [
            {amckinlay: '30'},
            {cvu: '150'}
        ]
    },
    {
        device: "Phone",
        values: [
            {amckinlay: '100'}
        ]
    }
];

登录后复制

上述原始数据结构中，values字段是一个包含键值对对象的数组，这种格式不直接适用于Chart.js的datasets。我们需要将其转换为更扁平的结构。

数据预处理：从嵌套到扁平化

数据预处理是实现分组堆叠条形图最关键的一步。我们的目标是将原始的嵌套数据转换为Chart.js易于消费的格式。

提取X轴标签（设备名称） 首先，从原始数据中提取所有唯一的设备名称，作为图表的X轴标签。
```
var labels = rawAlldata.map((x) => x.device);
// 结果: ['Laptop', 'Phone', 'Tablet']
```
登录后复制

扁平化原始数据结构 这一步将原始数据中的values数组进行展开，为每个设备-类别-值组合创建一个独立的扁平化对象。这使得后续的数据处理更加便捷。

var flatAlldata = rawAlldata
    .map((deviceData) =>
        deviceData.values.reduce((acc, cur) => {
            for (let k in cur) {
                acc.push({
                    device: deviceData.device,
                    category: k,
                    value: parseInt(cur[k], 10), // 确保值为数字类型
                });
            }
            return acc;
        }, [])
    )
    .flat();

/*
扁平化后的数据示例:
[
    { device: "Laptop", category: "amckinlay", value: 30 },
    { device: "Laptop", category: "cvu", value: 150 },
    { device: "Phone", category: "amckinlay", value: 100 },
    { device: "Tablet", category: "amckinlay", value: 50 },
    { device: "Tablet", category: "cvu", value: 80 }
]
*/

登录后复制

提取所有唯一的类别（用户名称） 从扁平化后的数据中，我们需要识别出所有参与堆叠的类别（例如，不同的用户）。
```
var subLabels = [...new Set(flatAlldata.map((x) => x.category))];
// 结果: ['amckinlay', 'cvu']
```
登录后复制

构建Chart.js数据集

有了扁平化的数据、X轴标签和堆叠类别，我们现在可以构建Chart.js所需的datasets数组。每个subLabel（类别）将对应一个dataset对象。

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

为了确保图表颜色的一致性，我们可以预先定义一个颜色映射表：

var colorSettings = [
    { category: 'amckinlay', backgroundColor: 'rgba(75, 192, 192, 0.6)' },
    { category: 'cvu', backgroundColor: 'rgba(255, 99, 132, 0.6)' },
    // 可以根据需要添加更多类别和颜色
    { category: 'other', backgroundColor: 'rgba(54, 162, 235, 0.6)' }
];

登录后复制

接下来，遍历subLabels，为每个类别创建一个数据集，并填充其在每个设备上的值：

var datasets = subLabels.reduce((acc, currentCategory) => {
    // 为每个类别创建一个数据集
    let datasetForCategory = {
        label: currentCategory,
        data: [], // 存储该类别在每个设备上的值
        backgroundColor:
            colorSettings.find((c) => c.category === currentCategory)?.backgroundColor ||
            'rgba(153, 102, 255, 0.6)', // 如果未找到预设颜色，使用默认颜色
    };

    // 遍历所有设备，填充该类别的数据
    for (let device of labels) {
        const value =
            flatAlldata.find((item) => item.device === device && item.category === currentCategory)
                ?.value ?? 0; // 如果某个设备没有该类别的数据，则默认为0
        datasetForCategory.data.push(value);
    }
    acc.push(datasetForCategory);
    return acc;
}, []);

/*
生成的datasets示例:
[
    {
        label: 'amckinlay',
        data: [30, 100, 50], // Laptop, Phone, Tablet 上的值
        backgroundColor: 'rgba(75, 192, 192, 0.6)'
    },
    {
        label: 'cvu',
        data: [150, 0, 80], // Laptop, Phone, Tablet 上的值 (Phone上cvu为0)
        backgroundColor: 'rgba(255, 99, 132, 0.6)'
    }
]
*/

登录后复制

Chart.js图表配置

数据准备就绪后，最后一步是配置和渲染Chart.js图表。关键在于在options中设置scales的stacked: true。

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // 图表类型为条形图
    data: {
        labels: labels, // X轴标签
        datasets: datasets, // 准备好的数据集
    },
    options: {
        responsive: true, // 启用响应式布局
        maintainAspectRatio: false, // 允许图表容器自由调整宽高
        plugins: {
            title: {
                display: true,
                text: '设备用户积分堆叠图', // 图表标题
                font: {
                    size: 18
                }
            }
        },
        scales: {
            x: {
                stacked: true, // X轴堆叠，确保条形图是堆叠的
                title: {
                    display: true,
                    text: '设备类型'
                }
            },
            y: {
                stacked: true, // Y轴堆叠，确保条形图是堆叠的
                title: {
                    display: true,
                    text: '积分'
                },
                beginAtZero: true // Y轴从0开始
            },
        },
    },
});

登录后复制

完整示例代码

以下是一个完整的HTML文件，包含了上述所有步骤，可以直接运行以查看效果。

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js 分组堆叠条形图</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        .chart-container { width: 80%; max-width: 900px; margin: 50px auto; height: 400px; }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        // 原始数据模拟
        var rawAlldata = [
            {
                device: "Laptop",
                values: [{amckinlay: '30'}, {cvu: '150'}]
            },
            {
                device: "Phone",
                values: [{amckinlay: '100'}]
            },
            {
                device: "Tablet", // 增加一个设备用于演示
                values: [{amckinlay: '50'}, {cvu: '80'}]
            }
        ];

        // 颜色设置，确保每个类别有固定颜色
        var colorSettings = [
            { category: 'amckinlay', backgroundColor: 'rgba(75, 192, 192, 0.6)' },
            { category: 'cvu', backgroundColor: 'rgba(255, 99, 132, 0.6)' },
            { category: 'other', backgroundColor: 'rgba(54, 162, 235, 0.6)' }
        ];

        // 1. 提取X轴标签 (设备名称)
        var labels = rawAlldata.map((x) => x.device);

        // 2. 扁平化原始数据结构
        var flatAlldata = rawAlldata
            .map((deviceData) =>
                deviceData.values.reduce((acc, cur) => {
                    for (let k in cur) {
                        acc.push({
                            device: deviceData.device,
                            category: k,
                            value: parseInt(cur[k], 10),
                        });
                    }
                    return acc;
                }, [])
            )
            .flat();

        // 3. 提取所有唯一的类别 (用户名称)
        var subLabels = [...new Set(flatAlldata.map((x) => x.category))];

        // 4. 构建Chart.js所需的datasets数组
        var datasets = subLabels.reduce((acc, currentCategory) => {
            let datasetForCategory = {
                label: currentCategory,
                data: [],
                backgroundColor:
                    colorSettings.find((c) => c.category === currentCategory)?.backgroundColor ||
                    'rgba(153, 102, 255, 0.6)',
            };

            for (let device of labels) {
                const value =
                    flatAlldata.find((item) => item.device === device && item.category === currentCategory)
                        ?.value ?? 0;
                datasetForCategory.data.push(value);
            }
            acc.push(datasetForCategory);
            return acc;
        }, []);

        // 5. Chart.js配置与渲染
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: datasets,
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: '设备用户积分堆叠图',
                        font: {
                            size: 18
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true,
                        title: {
                            display: true,
                            text: '设备类型'
                        }
                    },
                    y: {
                        stacked: true,
                        title: {
                            display: true,
                            text: '积分'
                        },
                        beginAtZero: true
                    },
                },
            },
        });
    </script>
</body>
</html>

登录后复制