本教程详细介绍了如何在 Chart.js 中创建分组堆叠柱状图。文章从理解 Chart.js 对数据结构的要求出发，逐步演示了如何将复杂的原始数据（包含设备、用户及其点数）转换为 Chart.js 可识别的格式。重点讲解了数据扁平化、类别识别以及数据集构建过程，并提供了完整的 Chart.js 配置代码，特别是堆叠选项的设置，旨在帮助开发者高效地实现此类复杂图表。
在数据可视化领域，分组堆叠柱状图是一种强大的工具，能够清晰地展示不同类别在多个分组下的构成和总和。Chart.js 作为一个流行的 JavaScript 图表库，提供了丰富的功能来实现这类图表。本文将深入探讨如何处理原始数据，并将其适配 Chart.js 的要求，最终呈现一个分组堆叠柱状图。
理解 Chart.js 对数据结构的要求
Chart.js 绘制柱状图时，通常需要两个核心部分：
- labels: 这代表图表的 X 轴标签，对于分组堆叠柱状图，它通常是每个“组”的名称（例如，设备名称）。
-
datasets: 这是一个数组，每个元素代表图表中的一个数据集。在堆叠柱状图中，每个数据集通常代表一个堆叠的“层”（例如，一个用户）。每个数据集对象包含：
- label: 数据集的名称（例如，用户名）。
- data: 一个数组，包含对应 labels 中每个分组的数据点。
- backgroundColor: 数据集的颜色。
原始数据结构分析
假设我们有以下原始数据，它描述了不同设备上各个用户的点数：
// 原始数据示例
const alldata = [
{
device: "Laptop",
values: [
{ amckinlay: '30' },
{ cvu: '150' }
]
},
{
device: "Phone",
values: [
{ amckinlay: '100' }
]
}
];这个数据结构的问题在于 values 数组中的每个对象是一个键值对，其键名（用户）是动态的，这使得直接提取和构建 Chart.js 所需的 datasets 变得困难。我们需要将其转换为更易于处理的扁平化结构。
数据预处理与转换
为了满足 Chart.js 的数据结构要求，我们需要对原始数据进行一系列转换。
1. 提取 X 轴标签（设备名称）
首先，从原始数据中提取所有唯一的设备名称，作为图表的 X 轴 labels。
const labels = alldata.map((x) => x.device); // 结果: ['Laptop', 'Phone']
2. 扁平化并标准化数据
将原始的嵌套结构转换为一个扁平化的数组，其中每个元素都包含 device、category（用户）和 value（点数）。
let transformedData = alldata
.map((x) =>
x.values.reduce((acc, cur) => {
for (let k in cur) {
acc.push({
device: x.device,
category: k, // 用户名
value: parseInt(cur[k], 10), // 点数，转换为数字
});
}
return acc;
}, [])
)
.flat();
/*
transformedData 结果示例:
[
{ device: 'Laptop', category: 'amckinlay', value: 30 },
{ device: 'Laptop', category: 'cvu', value: 150 },
{ device: 'Phone', category: 'amckinlay', value: 100 }
]
*/这里，我们使用 map 遍历每个设备，然后用 reduce 将其 values 数组中的键值对转换为标准的对象格式，最后用 flat() 将所有设备的数据扁平化到一个数组中。
3. 识别堆叠类别（用户名称）
从扁平化后的数据中提取所有唯一的 category（即用户名），这些将作为每个 dataset 的 label。
const subLabels = [...new Set(transformedData.map((x) => x.category))]; // 结果: ['amckinlay', 'cvu']
4. 构建 Chart.js 数据集 (datasets)
这是最关键的一步。我们需要遍历 subLabels（用户），为每个用户创建一个 dataset 对象。每个 dataset 的 data 数组应该包含该用户在所有设备上的点数，如果某个用户在某个设备上没有数据，则填入 0。同时，定义每个类别的背景颜色。
// 定义每个类别的颜色设置
const colorSettings = [
{
category: 'amckinlay',
backgroundColor: 'rgba(75, 192, 192, 0.6)',
},
{
category: 'cvu',
backgroundColor: 'rgba(255, 99, 132, 0.6)',
},
// 可以添加更多类别和颜色
];
const datasets = subLabels.reduce((acc, currentCategory) => {
const categoryData = [];
for (let device of labels) {
// 查找当前类别（用户）在当前设备上的值，如果没有则为0
const value =
transformedData.find(
(x) => x.device === device && x.category === currentCategory
)?.value ?? 0;
categoryData.push(value);
}
// 获取当前类别的颜色
const color = colorSettings.find((x) => x.category === currentCategory)
?.backgroundColor;
acc.push({
label: currentCategory,
data: categoryData,
backgroundColor: color,
});
return acc;
}, []);
/*
datasets 结果示例:
[
{
label: 'amckinlay',
data: [30, 100], // 'Laptop' 30, 'Phone' 100
backgroundColor: 'rgba(75, 192, 192, 0.6)'
},
{
label: 'cvu',
data: [150, 0], // 'Laptop' 150, 'Phone' 0
backgroundColor: 'rgba(255, 99, 132, 0.6)'
}
]
*/Chart.js 配置
数据准备就绪后，就可以配置 Chart.js 来绘制图表了。关键在于设置 options.scales.x.stacked 和 options.scales.y.stacked 为 true，以启用堆叠功能。
<!DOCTYPE html>
<html>
<head>
<title>Chart.js 分组堆叠柱状图</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#myChart {
max-width: 800px;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
// 原始数据
const alldata = [
{
device: "Laptop",
values: [
{ amckinlay: '30' },
{ cvu: '150' }
]
},
{
device: "Phone",
values: [
{ amckinlay: '100' }
]
}
];
// 1. 提取 X 轴标签（设备名称）
const labels = alldata.map((x) => x.device);
// 2. 扁平化并标准化数据
let transformedData = alldata
.map((x) =>
x.values.reduce((acc, cur) => {
for (let k in cur) {
acc.push({
device: x.device,
category: k,
value: parseInt(cur[k], 10),
});
}
return acc;
}, [])
)
.flat();
// 3. 识别堆叠类别（用户名称）
const subLabels = [...new Set(transformedData.map((x) => x.category))];
// 定义每个类别的颜色设置
const colorSettings = [
{
category: 'amckinlay',
backgroundColor: 'rgba(75, 192, 192, 0.6)',
},
{
category: 'cvu',
backgroundColor: 'rgba(255, 99, 132, 0.6)',
},
];
// 4. 构建 Chart.js 数据集 (datasets)
const datasets = subLabels.reduce((acc, currentCategory) => {
const categoryData = [];
for (let device of labels) {
const value =
transformedData.find(
(x) => x.device === device && x.category === currentCategory
)?.value ?? 0;
categoryData.push(value);
}
const color = colorSettings.find((x) => x.category === currentCategory)
?.backgroundColor;
acc.push({
label: currentCategory,
data: categoryData,
backgroundColor: color,
});
return acc;
}, []);
// Chart.js 实例化
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // 图表类型为柱状图
data: {
labels: labels, // X 轴标签
datasets: datasets, // 数据集
},
options: {
responsive: true, // 响应式布局
scales: {
x: {
stacked: true, // X 轴堆叠
},
y: {
stacked: true, // Y 轴堆叠
beginAtZero: true // Y 轴从0开始
},
},
plugins: {
title: {
display: true,
text: '设备用户点数分组堆叠柱状图'
}
}
},
});
</script>
</body>
</html>注意事项
- 数据完整性： 确保所有可能的类别在 colorSettings 中都有对应的颜色定义，以避免图表样式缺失。
- 零值处理： 在构建 datasets 时，对于某个类别在特定分组下没有数据的情况，我们将其值设置为 0。这是确保 data 数组长度与 labels 匹配，并正确显示堆叠图的关键。
- 响应式设计： responsive: true 选项可以使图表在容器大小变化时自动调整。
- 数据类型： 确保所有数值数据都已正确转换为数字类型，例如使用 parseInt() 或 parseFloat()。
总结
通过上述步骤，我们成功地将复杂的原始数据转换为 Chart.js 所需的格式，并配置了一个功能完善的分组堆叠柱状图。核心在于理解 Chart.js 的数据模型，并通过数据转换逻辑将原始数据适配到这个模型中。掌握数据预处理和 Chart.js 配置中的 stacked 选项，是实现此类高级图表的关键。
