本教程详细介绍了如何使用 chart.js 创建分组堆叠条形图，以可视化复杂的多维度数据。核心内容包括对原始嵌套数据的结构化转换，将其适配 chart.js 所需的 `labels` 和 `datasets` 格式，以及配置图表的堆叠选项。通过具体的代码示例，用户将学习如何将设备、用户和积分数据有效地呈现在一个清晰、专业的图表中。
理解 Chart.js 堆叠条形图的数据结构要求
在 Chart.js 中创建堆叠条形图，需要遵循特定的数据结构。通常，图表的 data 对象包含两个主要部分：
- labels: 定义图表X轴的分类标签。对于分组堆叠图，这些通常是主分类（例如，设备名称）。
- datasets: 一个数组，每个元素代表图表中的一个数据集。在堆叠条形图中，每个 dataset 对象通常代表一个堆叠层（例如，特定用户的数据），它包含：
- label: 该数据集的名称（例如，用户名）。
- data: 一个数组，其中每个值对应 labels 中相应位置的数据点。
- backgroundColor: 该数据集的背景颜色。
对于本教程中的场景，我们需要在X轴上展示设备名称，并在每个设备对应的条形图中，堆叠显示不同用户的积分。这意味着每个用户将对应一个 dataset，而每个 dataset 的 data 数组将包含该用户在不同设备上的积分。
原始数据结构分析与挑战
我们原始的数据结构如下所示，其中包含设备名称和每个设备下用户及其对应积分的嵌套数组：
[
{
device: "Laptop",
values: [
{amckinlay: '30'},
{cvu: '150'}
]
},
{
device: "Phone",
values: [
{amckinlay: '100'}
]
}
]这种结构对 Chart.js 而言存在挑战：
- values 数组中的每个对象都以动态的键（用户名）存储数据，这使得直接提取 label 和 data 变得复杂。
- Chart.js 需要每个 dataset 的 data 数组与 labels 数组的长度匹配，且每个位置的数据点对应 labels 中的一个分类。
为了解决这些问题，我们需要对数据进行预处理和转换。
数据预处理与转换
数据转换的目标是将原始的嵌套结构扁平化为更易于处理的格式，例如：
[
{ device: "Laptop", category: "amckinlay", value: 30 },
{ device: "Laptop", category: "cvu", value: 150 },
{ device: "Phone", category: "amckinlay", value: 100 }
]这种扁平化结构将每个设备、用户和积分的组合作为一个独立的对象，方便后续构建 Chart.js 的 datasets。
以下是实现数据转换的 JavaScript 代码：
// 假设 alldata 是从原始数据源获取的数组
var alldata = [
{
device: "Laptop",
values: [
{amckinlay: '30'},
{cvu: '150'}
]
},
{
device: "Phone",
values: [
{amckinlay: '100'}
]
}
];
// 定义颜色设置，为每个用户（category）指定背景色
var colorSettings = [
{
category: 'amckinlay',
backgroundColor: 'rgba(75, 192, 192, 0.6)',
},
{
category: 'cvu',
backgroundColor: 'rgba(255, 99, 132, 0.6)',
},
];
// 1. 提取X轴标签（设备名称）
var labels = alldata.map((x) => x.device);
// 2. 扁平化数据结构
// 将原始数据转换为 { device, category, value } 的扁平数组
alldata = 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. 提取所有唯一的类别（用户名称），这将成为每个数据集的标签
var subLabels = [...new Set(alldata.map((x) => x.category))];
// 4. 构建 Chart.js 的 datasets 数组
var datasets = subLabels.reduce((acc, curCategory) => {
// 对于每个类别（用户），构建一个数据集
let dataset = {
label: curCategory,
data: [],
backgroundColor: colorSettings.find((x) => x.category === curCategory)?.backgroundColor || 'rgba(0, 0, 0, 0.2)', // 查找对应颜色，没有则使用默认
};
// 遍历所有设备，为当前类别填充数据
for (let device of labels) {
const value = alldata.find(
(x) => x.device === device && x.category === curCategory
)?.value ?? 0; // 如果没有找到对应数据，则默认为0
dataset.data.push(value);
}
acc.push(dataset);
return acc;
}, []);
// 最终的 labels 和 datasets 结构将如下：
// labels: ["Laptop", "Phone"]
// datasets: [
// { label: "amckinlay", data: [30, 100], backgroundColor: "..." },
// { label: "cvu", data: [150, 0], backgroundColor: "..." }
// ]代码解释：
- colorSettings: 预定义了每个用户类别的颜色，这使得图表颜色管理更加灵活和可维护。
- labels: 使用 map 方法从原始数据中直接提取所有设备名称作为X轴标签。
- 扁平化 alldata:
- subLabels: 使用 Set 结合 map 提取所有不重复的用户名称，这些将作为每个堆叠部分的标签。
-
构建 datasets:
- 使用 reduce 遍历 subLabels（即每个用户）。
- 为每个用户创建一个 dataset 对象，包括 label (用户名) 和 backgroundColor。
- 在内部循环中，遍历所有的 labels (设备)，查找当前用户在每个设备上的积分。如果找不到，则默认为 0，确保 data 数组的长度与 labels 数组匹配。
Chart.js 配置与渲染
数据准备就绪后，接下来是配置 Chart.js 以渲染堆叠条形图。关键在于在 options 中设置 scales 的 stacked 属性为 true。
// 获取 Canvas 元素
const ctx = document.getElementById('myChart').getContext('2d');
// 初始化 Chart.js
const myChart = new Chart(ctx, {
type: 'bar', // 图表类型为条形图
data: {
labels: labels, // 使用前面生成的设备标签
datasets: datasets, // 使用前面生成的堆叠数据集
},
options: {
responsive: true, // 使图表响应式
scales: {
x: {
stacked: true, // X轴（类别轴）启用堆叠
},
y: {
stacked: true, // Y轴（值轴）启用堆叠
},
},
plugins: {
tooltip: {
mode: 'index', // 鼠标悬停时显示所有堆叠层的数据
intersect: false,
}
}
},
});关键配置解释：
- type: 'bar': 指定图表类型为条形图。
- data: { labels, datasets }: 绑定我们预处理好的 labels 和 datasets。
- options.scales.x.stacked: true: 告诉 Chart.js X轴上的条形图应该堆叠显示。
- options.scales.y.stacked: true: 告诉 Chart.js Y轴上的值也应该堆叠计算。这两个设置共同实现了堆叠条形图的效果。
- plugins.tooltip: 可选配置，用于优化工具提示的显示，mode: 'index' 和 intersect: false 使得鼠标悬停在一个条形图上时，会显示该条形图所有堆叠层的数据。
总结与注意事项
创建 Chart.js 分组堆叠条形图的关键在于数据预处理。原始数据结构往往不直接符合 Chart.js 的要求，尤其是当数据包含多层嵌套或动态键时。通过将数据扁平化并重构为 labels 和 datasets 的标准格式，可以极大地简化 Chart.js 的配置过程。
注意事项：
- 数据类型一致性: 确保 data 数组中的所有值都是数字类型，否则 Chart.js 可能无法正确渲染或计算。在数据转换时，我们使用了 parseInt(cur[k], 10) 来确保这一点。
- 数据完整性: 如果某个用户在某个设备上没有数据，确保在构建 datasets 时将其值设置为 0 (或 null，具体取决于你希望 Chart.js 如何处理缺失值)，以保持 data 数组与 labels 数组长度的一致性。
- 颜色管理: 对于多个堆叠层，为每个层指定清晰且区分度高的颜色非常重要，可以通过预定义的 colorSettings 对象来实现。
- 响应式设计: 在 options 中设置 responsive: true 可以使图表更好地适应不同屏幕尺寸。
通过遵循本教程中的数据转换和配置步骤，您可以有效地利用 Chart.js 创建出专业且易于理解的分组堆叠条形图，从而更好地展示复杂的数据关系。
