本教程详细介绍了如何使用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对象。
为了确保图表颜色的一致性，我们可以预先定义一个颜色映射表：
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>注意事项与最佳实践
- 数据类型转换: 确保所有数值数据都被正确转换为数字类型（例如使用parseInt()或parseFloat()），否则Chart.js可能无法正确计算和渲染
