Chart.js 柱状图渲染为空白，往往并非数据为零所致，而是缺失必需的 labels 数组——该数组长度必须与 data 严格一致，否则图表无法正确映射横轴坐标，导致视觉上“无图可绘”。
chart.js 柱状图渲染为空白，往往并非数据为零所致，而是缺失必需的 `labels` 数组——该数组长度必须与 `data` 严格一致，否则图表无法正确映射横轴坐标，导致视觉上“无图可绘”。
在 Chart.js 中，bar（及其他类别型图表如 line、radar）依赖 data.labels 定义 X 轴的刻度标签。即使所有数据值均为 0，只要 labels 缺失或长度不匹配，Chart.js 就无法确定每个柱子对应的位置，最终渲染区域可能完全空白，或仅显示坐标轴而无任何图形元素。
✅ 正确配置：labels 是必需项
labels 必须是一个与 datasets[0].data 长度相等的数组。它不一定是语义化文本（如日期、名称），但必须存在且一一对应。例如：
const data = [0, 0, 0, 1, 0, 0, 1, 1, 0, /* ...共 51 个数值 */];
new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: Array.from({ length: data.length }, (_, i) => `#${i + 1}`), // ✅ 推荐：生成序号标签
datasets: [{
label: 'Conversions',
data: data,
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false, // 可按需设为 false（如响应式容器）
scales: {
y: {
beginAtZero: true,
suggestedMin: 0,
suggestedMax: 1 // ⚠️ 关键：当数据极稀疏（如仅含 0/1）时，显式设置范围避免自动缩放失效
},
x: {
ticks: {
maxRotation: 0,
autoSkip: data.length > 20 // 大量标签时自动跳过以提升可读性
}
}
},
plugins: {
legend: { display: true },
tooltip: { enabled: true }
}
}
});
? 小技巧：若数据来自动态接口且无天然标签（如纯时间序列未带日期），可用 Array.from({length: n}, (_, i) => i) 生成数字索引，或用 new Array(n).fill('').map((_, i) =>Day ${i+1}) 构建语义化占位标签。
⚠️ 其他易忽略要点
- Canvas 元素必须已挂载：确保 在执行 new Chart(...) 前已存在于 DOM 中（推荐在 DOMContentLoaded 或组件 mounted 钩子中初始化）。
- maintainAspectRatio: false 的副作用：虽便于自适应布局，但若容器高度为 0 或未显式设置宽高，图表可能不可见；建议为 canvas 设置最小尺寸（如 style="height: 400px; width: 100%;"）。
- Chart.js v4+ 的模块化要求：使用 CDN 引入 chart.umd.js 时无需额外注册控制器，但务必确认版本兼容性（本例适用 v4.1.1+）；若使用 ES 模块，请确保正确导入 BarController, CategoryScale 等。
✅ 验证步骤（快速排错）
- 检查控制台是否有 Missing "labels" array. 类似警告；
- 打印 data.labels.length === data.datasets[0].data.length，应返回 true；
- 临时将 data 改为 [1, 2, 3] 并配 labels: ['A', 'B', 'C']，验证基础渲染是否正常；
- 若仍空白，检查 CSS 是否意外隐藏了 canvas（如 display: none、visibility: hidden 或父容器溢出裁剪）。
遵循以上规范后，即使数据中 95% 为零（如你提供的 51 个元素中仅 3 个为 1），Chart.js 也能稳定渲染出清晰、可交互的柱状图——关键不在数据密度，而在结构完整性。
