悠悠楠杉
网站页面
Chart.js教程：创建分组堆叠柱状图
11/16
Chart.js 教程：创建分组堆叠柱状图
在数据可视化领域，柱状图是最常见且最直观的图表类型之一。当需要展示多个分类下不同子类别的数据对比时，普通的柱状图可能无法满足需求。这时，分组堆叠柱状图（Grouped Stacked Bar Chart）便成为一种强大的解决方案。它结合了分组柱状图和堆叠柱状图的优点，既能横向比较不同组别的总量，又能纵向分析每组内部各部分的构成。
本文将带你使用 Chart.js 实现一个完整的分组堆叠柱状图，并深入讲解关键配置项的实际意义与使用技巧。
为什么选择分组堆叠柱状图？
假设你是一家零售公司的数据分析师，手头有四个季度中三种产品（A、B、C）在两个销售渠道（线上、线下）的销售数据。你希望同时展示：
- 每个季度总销售额的对比（整体趋势）
- 每个渠道在各季度的表现（分组对比）
- 每种产品在每个渠道中的贡献（堆叠结构）
这种多维度的数据关系，正是分组堆叠柱状图的用武之地。它通过“分组”体现渠道差异，通过“堆叠”展示产品构成，让信息层次清晰、一目了然。
准备工作：引入 Chart.js
首先，确保你的项目中已引入 Chart.js。可以通过 CDN 快速加载：
html
接着，在页面中准备一个 <canvas> 元素作为图表容器：
html
<canvas id="groupedStackedChart"></canvas>
构建数据结构
Chart.js 的堆叠功能依赖于 stacked: true 配置和 stack 属性。我们需要为每个数据集指定所属的堆叠组（stack），并通过 label 区分数据来源。
以下是一个示例数据结构：
javascript
const ctx = document.getElementById('groupedStackedChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
// 线上 - 产品A
{
label: '线上 - 产品A',
data: [12, 19, 15, 18],
backgroundColor: '#4CAF50',
stack: '线上'
},
// 线上 - 产品B
{
label: '线上 - 产品B',
data: [10, 12, 14, 11],
backgroundColor: '#8BC34A',
stack: '线上'
},
// 线上 - 产品C
{
label: '线上 - 产品C',
data: [8, 9, 7, 10],
backgroundColor: '#CDDC39',
stack: '线上'
},
// 线下 - 产品A
{
label: '线下 - 产品A',
data: [14, 16, 13, 17],
backgroundColor: '#2196F3',
stack: '线下'
},
// 线下 - 产品B
{
label: '线下 - 产品B',
data: [11, 10, 12, 13],
backgroundColor: '#64B5F6',
stack: '线下'
},
// 线下 - 产品C
{
label: '线下 - 产品C',
data: [9, 8, 10, 9],
backgroundColor: '#BBDEFB',
stack: '线下'
}
]
},
options: {
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
title: {
display: true,
text: '销售额（万元）'
}
}
},
plugins: {
title: {
display: true,
text: '2023年各季度产品销售分布'
},
legend: {
position: 'top',
}
}
}
});
关键配置解析
stack: '线上'和stack: '线下'将数据集分为两个独立的堆叠组，确保线上和线下的柱子并列显示。scales.x.stacked = true启用 X 轴方向的堆叠逻辑，使同组数据垂直堆叠。scales.y.stacked = true确保 Y 轴按堆叠方式计算总量。- 不同的
backgroundColor让每个产品在视觉上有明确区分，提升可读性。
优化视觉体验
为了增强图表的专业感，可以进一步调整字体、边距和交互效果。例如，添加工具提示回调函数，自定义鼠标悬停时显示的内容：
javascript
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return `${context.dataset.label}: ${context.raw} 万元`;
}
}
}
}
}
此外，合理使用颜色渐变或图标标注，能让图表更具表现力。但切记避免过度装饰，保持数据主导地位。
总结
分组堆叠柱状图不是简单的图表叠加，而是一种精心设计的信息组织方式。通过 Chart.js 提供的灵活配置，我们能够轻松实现复杂的数据呈现逻辑。掌握这一技能，不仅能提升报表的专业度，更能帮助决策者快速捕捉关键趋势与异常点。在实际应用中，建议根据业务场景调整堆叠顺序、颜色搭配和标签密度，让图表真正服务于数据洞察。
