chart.js 原生不支持在堆叠柱形图内部（即同一柱子的不同数据段之间）直接设置间距，但可通过插入透明占位数据集并配合图例/提示过滤，巧妙实现视觉上的分隔效果。
chart.js 原生不支持在堆叠柱形图内部（即同一柱子的不同数据段之间）直接设置间距，但可通过插入透明占位数据集并配合图例/提示过滤，巧妙实现视觉上的分隔效果。
在 Chart.js 中，堆叠柱状图（stacked: true）默认将同一 X 轴类别下的多个数据集紧密叠加，各段之间无缝衔接。若需在「Retained」与「Expired」等相邻堆叠段之间呈现如 10px 的视觉间隙（如题图所示），官方 API 并未提供 barGap 或 segmentSpacing 类似配置项——这是因为堆叠行为本质是数值累加渲染，而非独立柱体排列。
此时，一种被社区广泛验证且兼容性良好的实用变通方案是：引入一个“隐形占位数据集”，置于两个目标数据集之间，赋予其极小但非零的数据值（如 1），并将其背景色设为与图表背景完全一致（例如 #ffffff 或 transparent）。该占位段会参与堆叠计算与渲染，从而在视觉上撑开两段真实数据之间的距离；再通过插件配置隐藏其在图例和 Tooltip 中的显示，确保用户体验不受干扰。
以下为优化后的完整实现示例（适配 Chart.js v4+）：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
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: 'spacer', // 占位数据集（不可见）
data: [1, 1, 1, 1, 1], // 数值越小，间隙越精细；建议保持统一且非零
backgroundColor: '#ffffff', // 必须与 canvas 背景色严格一致
stack: 'stack1',
order: 2,
borderSkipped: false // 防止因 borderRadius 导致边缘异常（可选）
},
{
label: 'Expired',
data: [5, 3, 7, 9, 2],
backgroundColor: '#307472',
stack: 'stack1',
order: 3,
borderRadius: 4
}
]
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true }
},
plugins: {
legend: {
labels: {
filter: (label) => label.text !== 'spacer' // 彻底隐藏占位图例项
}
},
tooltip: {
callbacks: {
label: (context) => {
if (context.dataset.label === 'spacer') return null; // Tooltip 中跳过
return `${context.dataset.label}: ${context.parsed.y}`;
}
}
}
}
}
};
const reportOutput = new Chart(document.getElementById('chart_display'), config);
✅ 关键注意事项：
- 数据对齐：确保所有 datasets.data 长度与 labels 严格一致，否则渲染异常；
- 背景匹配：backgroundColor 必须与
- 数值尺度：占位值应远小于主数据量级（如主数据为 60+，占位用 0.5–2 即可），避免影响 Y 轴刻度逻辑；
- 性能考量：该方法不增加 DOM 节点，仅多一次 Canvas 绘制，对性能无实质影响；
- 替代思路提醒：若需更精确控制（如像素级间隙、响应式缩放），可考虑改用分组柱状图（stacked: false + categoryPercentage / barPercentage 调整）或切换至支持 segment spacing 的图表库（如 ApexCharts）。
此方案已在生产环境稳定运行多年，兼顾简洁性、兼容性与可维护性，是 Chart.js 堆叠场景下实现“伪间距”的首选实践。
