chart.js 默认不支持直接设置堆叠柱形图内部各层之间的间隙，但可通过插入透明占位数据集并配合图例/提示框过滤实现视觉上的“分隔效果”。
chart.js 默认不支持直接设置堆叠柱形图内部各层之间的间隙，但可通过插入透明占位数据集并配合图例/提示框过滤实现视觉上的“分隔效果”。
在 Chart.js 中，堆叠（stacked）柱状图的各数据集默认是紧密堆叠、无缝衔接的——这虽保证了数值的连续性与准确性，却牺牲了视觉层次感。当相邻数据层（如示例中的深绿与浅绿）色差较小时，用户难以快速区分边界。官方 API 并未提供 barGap 或 stackSpacing 类似配置项，因此需采用一种语义合规、渲染稳定且不影响数据逻辑的变通方案：插入一个高度可控、颜色匹配背景的“占位数据集”（placeholder dataset）。
该方案核心在于：
- 新增一个数据集，其 data 值设为统一小正数（如 1），数值越大，视觉间隙越明显；
- 将其 backgroundColor 设为与图表背景色完全一致（例如 '#ffffff' 或 'transparent'）；
- 通过 order 属性确保其位于目标两层之间（如 Retained → placeholder → Expired）；
- 同时使用插件配置隐藏该占位项在图例和工具提示中的显示，避免干扰用户理解。
以下是优化后的完整实现代码（适配 Chart.js v4+）：
const data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [
{
label: 'Retained',
data: [62, 68, 74, 80, 66], // 注意：原示例含6个值，但labels仅5个，已对齐
backgroundColor: '#759BE4',
stack: 'stack1',
order: 1
},
{
label: 'gap-placeholder', // 语义化命名便于维护
data: [1, 1, 1, 1, 1], // 控制间隙大小：建议 0.5–2 范围内微调
backgroundColor: '#ffffff', // 必须与 canvas 背景一致（检查 CSS 中 .chart-container 背景色）
stack: 'stack1',
order: 2,
borderWidth: 0,
hoverBorderWidth: 0,
borderColor: 'transparent'
},
{
label: 'Expired',
data: [5, 3, 7, 9, 2],
backgroundColor: '#307472',
borderRadius: 4,
stack: 'stack1',
order: 3
}
]
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true }
},
plugins: {
legend: {
labels: {
filter: (item) => item.text !== 'gap-placeholder'
}
},
tooltip: {
callbacks: {
label: (context) => {
if (context.dataset.label === 'gap-placeholder') return null;
return `${context.dataset.label}: ${context.parsed.y}`;
}
}
}
}
}
};
const reportOutput = new Chart(
document.getElementById('chart_display'),
config
);
✅ 关键注意事项：
- 数据对齐：确保所有 datasets.data 长度与 labels 严格一致，否则渲染异常；
- 背景匹配：若图表容器设置了非白色背景（如 #f8f9fa），请同步修改占位数据集的 backgroundColor；
- 响应式兼容：该方法在缩放、重绘时依然稳定，无需额外监听 resize 事件；
- 无障碍友好：因已过滤图例与 tooltip，屏幕阅读器不会读出占位项，符合 WCAG 标准；
- 替代方案提醒：若需像素级精确控制（如固定 10px），可考虑使用 categoryPercentage 和 barPercentage 组合调节整体柱宽，但无法实现层间独立间隙——本占位法仍是目前最可靠、兼容性最佳的实践。
此技巧已在生产环境广泛验证，兼顾可维护性与视觉表现力，推荐作为 Chart.js 堆叠图精细化设计的标准补充手段。
