本教程详细指导如何在 chart.js 中创建分组堆叠柱状图。我们将探讨如何将复杂的原始数据结构（包含设备、用户和积分）转换为 chart.js 所需的 `labels` 和 `datasets` 格式。重点在于数据预处理、动态生成数据集，以及配置 chart.js 的堆叠选项，以清晰展示多维度数据。
在数据可视化中，分组堆叠柱状图是一种强大的工具，能够在一个图表中同时展示多个类别的数据堆叠情况，并在不同的组之间进行比较。Chart.js 提供了灵活的配置选项来实现这种图表，但关键在于正确地准备数据结构。
1. 理解 Chart.js 对数据结构的要求
Chart.js 绘制柱状图时，通常需要以下两种核心数据：
- labels: 对应图表的 X 轴标签，代表不同的分组（例如本例中的设备名称）。
-
datasets: 一个数组，每个元素代表图表中的一个数据集。对于堆叠柱状图，每个数据集通常代表堆叠中的一个组成部分（例如本例中的用户类别）。每个数据集对象包含：
- label: 数据集的名称（例如用户 "amckinlay"）。
- data: 一个数组，其长度应与 labels 数组相同，每个值对应 labels 中相应位置的堆叠数值。
- backgroundColor: 数据集的颜色。
原始数据结构分析
假设我们有以下原始数据 alldata，它包含设备名称和每个设备上不同用户的积分：
// 原始数据示例
const alldata = [
{
device: "Laptop",
values: [
{ amckinlay: '30' },
{ cvu: '150' }
]
},
{
device: "Phone",
values: [
{ amckinlay: '100' }
]
}
];
console.log(alldata);这种结构对于 Chart.js 来说并不直接适用，因为 values 数组中的每个对象是一个键值对，难以直接提取 category（用户）和 value（积分）。为了更好地与 Chart.js 的 datasets 结构匹配，我们需要将数据转换为更扁平、更易于访问的形式。
2. 数据预处理与转换
为了满足 Chart.js 的要求，我们需要将原始数据 alldata 转换为适合 labels 和 datasets 的格式。
2.1 标准化数据结构
首先，我们将原始数据中的 values 数组扁平化，并为每个用户-设备-积分组合创建一个统一的对象结构。推荐的目标结构是 { device: "Laptop", category: "amckinlay", value: 30 }。
// 定义颜色配置，方便管理不同类别的颜色
const colorSettings = [
{
category: 'amckinlay',
backgroundColor: 'rgba(75, 192, 192, 0.6)',
},
{
category: 'cvu',
backgroundColor: 'rgba(255, 99, 132, 0.6)',
},
// 可以添加更多类别及其颜色
];
// 将原始数据扁平化并标准化
let processedData = alldata
.map((x) =>
x.values.reduce((acc, cur) => {
for (let k in cur) {
acc.push({
device: x.device,
category: k,
value: parseInt(cur[k]), // 确保值为数字类型
});
}
return acc;
}, [])
)
.flat();
console.log("标准化后的数据:", processedData);
/* 示例输出:
[
{ device: "Laptop", category: "amckinlay", value: 30 },
{ device: "Laptop", category: "cvu", value: 150 },
{ device: "Phone", category: "amckinlay", value: 100 }
]
*/上述代码首先遍历 alldata 中的每个设备，然后遍历其 values 数组，将每个键值对转换为一个包含 device、category（用户）和 value（积分）的扁平对象。parseInt() 用于确保积分值是数字类型。
2.2 提取 X 轴标签
X 轴的标签将是所有不重复的设备名称。
// 提取所有不重复的设备名称作为 X 轴标签
const labels = [...new Set(processedData.map((x) => x.device))];
console.log("X 轴标签:", labels); // 输出: ["Laptop", "Phone"]2.3 构建 Chart.js 数据集
接下来，我们需要为 Chart.js 构建 datasets 数组。每个 category（用户）将对应一个 dataset 对象。
// 提取所有不重复的类别（用户）作为子标签
const subLabels = [...new Set(processedData.map((x) => x.category))];
console.log("子标签（数据集类别）:", subLabels); // 输出: ["amckinlay", "cvu"]
// 构建 Chart.js 的 datasets 数组
const datasets = subLabels.reduce((acc, currentCategory) => {
// 为当前类别创建一个数据集对象
const dataset = {
label: currentCategory,
data: [],
backgroundColor: colorSettings.find((c) => c.category === currentCategory)?.backgroundColor || 'rgba(0,0,0,0.5)', // 从颜色配置中获取颜色
};
// 遍历所有设备，为当前类别填充数据
for (const device of labels) {
// 查找当前设备和当前类别对应的值，如果没有则默认为 0
const value = processedData.find(
(x) => x.device === device && x.category === currentCategory
)?.value ?? 0;
dataset.data.push(value);
}
acc.push(dataset);
return acc;
}, []);
console.log("Chart.js 数据集:", 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 (因为Phone没有cvu的数据)
backgroundColor: 'rgba(255, 99, 132, 0.6)'
}
]
*/这段代码首先获取所有唯一的 category 作为 subLabels。然后，它遍历每个 subLabel，为它创建一个 dataset 对象。在构建 dataset.data 数组时，它会遍历所有的 labels（设备），查找对应设备和类别的积分值。如果某个设备没有某个类别的积分数据，则 find 方法会返回 undefined，此时使用 ?? 0 将其填充为 0，确保 data 数组的长度与 labels 数组一致。
3. Chart.js 配置与渲染
数据准备就绪后，最后一步是配置 Chart.js 并将其渲染到页面上。关键在于设置 options 中的 stacked 属性。
Chart.js 分组堆叠柱状图
在 options 配置中：
- scales.x.stacked: true 确保 X 轴上的每个分组（设备）内部的柱子是堆叠的。
- scales.y.stacked: true 确保 Y 轴上的数值是累加的，对应堆叠效果。
- responsive: true 让图表在容器大小变化时自动调整。
4. 注意事项
- 数据类型一致性: 确保 data 数组中的值都是数字类型。原始数据中的 '30' 等字符串需要通过 parseInt() 或 parseFloat() 转换为数字。
- 颜色管理: 建议将颜色配置集中管理（如 colorSettings 数组），这样可以方便地为不同的类别分配颜色，提高代码的可维护性和一致性。
- 缺失数据处理: 当某个设备没有某个类别的堆叠数据时，应在 dataset.data 中填充 0，而不是省略，以保证 data 数组的长度与 labels 数组一致，避免图表渲染错误。
- 性能优化: 对于非常大的数据集，数据预处理可能需要优化，例如使用更高效的查找算法或考虑在后端进行部分数据转换。
5. 总结
创建 Chart.js 分组堆叠柱状图的关键在于数据预处理。通过将复杂的原始数据结构转换为 Chart.js 所需的 labels 和 datasets 格式，我们能够灵活地展示多维度数据。核心步骤包括：
- 标准化原始数据: 将嵌套的、键值对形式的数据扁平化为统一的对象结构。
- 提取 X 轴标签: 从标准化数据中获取所有唯一的设备名称。
- 动态构建数据集: 遍历所有唯一的类别（用户），为每个类别创建一个 dataset 对象，并填充对应设备的数据。
- 配置 Chart.js 选项: 在 options.scales 中设置 x.stacked: true 和 y.stacked: true 以启用堆叠功能。
遵循这些步骤，您就可以在 Chart.js 中创建出清晰、信息丰富的分组堆叠柱状图。
