Chart.js 柱状图空白问题解决方法

Chart.js 柱状图莫名空白？别再怀疑数据量太少或配置复杂——真正元凶往往是被忽略的 `labels` 数组：它不仅是X轴标签，更是Chart.js渲染逻辑的必需输入，缺失或长度不匹配就会导致图表静默失败；本文直击这一高频陷阱，手把手教你用 `Array.from` 安全生成标签、通过 `suggestedMax` 避免零值压缩、配合尺寸控制与加载时机优化，让哪怕49个数据点中仅3个非零的稀疏图表也能清晰、稳定、零报错地呈现出来。

Chart.js 柱状图显示为空白，通常是因为缺失必需的 `labels` 数组（长度需与 `data` 严格一致），而非数据量小导致；本文详解根本原因、修复方法、配置优化及常见陷阱。

在使用 Chart.js 创建柱状图时，若画布渲染后为空白（即使控制台无报错、数据已正确传入），最常见且易被忽略的根本原因就是：data 对象中缺少 labels 属性。Chart.js（v3+ 及 v4）要求 bar、line、radar 等类别型图表必须显式提供 labels 数组——它不仅用于 X 轴刻度标注，更是 Chart.js 内部坐标映射和渲染逻辑的必要依据。即使所有数据值为 0 或仅含极少数非零值（如示例中的 49 个元素中仅 3 个 1），只要 labels 缺失，图表即无法完成轴向初始化，最终呈现为空白 。

✅ 正确写法：labels 必须存在且长度匹配

const dataValues = [0, 0, 0, 1, 0, 0, 1, 1, 0, /* ...共49个数字 */];

const ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    // ⚠️ 关键：labels 数组不可省略！长度必须等于 data.length
    labels: Array.from({ length: dataValues.length }, (_, i) => `Day ${i + 1}`),
    datasets: [{
      label: 'Conversions',
      data: dataValues,
      backgroundColor: 'rgba(54, 162, 235, 0.7)',
      borderColor: 'rgb(54, 162, 235)',
      borderWidth: 1
    }]
  },
  options: {
    maintainAspectRatio: false, // 响应式布局推荐设为 false
    scales: {
      y: {
        beginAtZero: true,
        suggestedMin: 0,
        suggestedMax: 1 // 避免因全零数据导致自动缩放失效
      },
      x: {
        grid: { display: false } // 可选：简化 X 轴网格线
      }
    },
    plugins: {
      legend: { display: true },
      tooltip: { enabled: true }
    }
  }
});

? 提示：labels 不必是语义化文本，可为任意字符串数组（如 ['A', 'B', 'C'] 或 Array(49).fill('')），但长度必须与 data 完全一致。使用 Array.from({length: n}, (_, i) => i) 是生成索引标签的安全方式。

⚠️ 常见误区与注意事项

• maintainAspectRatio: false 并非万能解：虽然它有助于响应式容器适配，但无法解决 labels 缺失导致的渲染失败；盲目设置反而可能掩盖根本问题。
• suggestedMin/suggestedMax 很关键：当数据集中存在大量 0（如本例），Y 轴自动缩放可能将刻度压缩至不可见范围。显式设置 suggestedMax: 1 可确保 1 的柱形清晰可见。
• Canvas 元素需有明确尺寸：确保 或通过 CSS 设置 width/height，否则 Chart.js 可能因获取不到渲染尺寸而静默失败。
• 脚本加载顺序：