Chart.js 3.8.2 中强制 Y 轴固定步长显示所有刻度的解决方案-js教程-PHP中文网

Chart.js 3.8.2 中强制 Y 轴固定步长显示所有刻度的解决方案

在 Chart.js 3.8.2 中，当图表尺寸缩小时，Y 轴刻度会因 autoSkip: true（默认）自动跳过部分标签，导致 stepSize: 5 失效；只需显式设置 autoSkip: false 即可强制始终按指定步长完整显示所有刻度。

在 chart.js 3.8.2 中，当图表尺寸缩小时，y 轴刻度会因 `autoskip: true`（默认）自动跳过部分标签，导致 `stepsize: 5` 失效；只需显式设置 `autoskip: false` 即可强制始终按指定步长完整显示所有刻度。

Chart.js 默认启用 autoSkip: true，其目的是在空间受限时（如画布变窄、字体变大或刻度密集）自动隐藏部分刻度标签，以避免重叠和视觉混乱。但这一机制会覆盖你手动设定的 stepSize —— 即使配置了 stepSize: 5，当可用垂直空间不足时，Chart.js 仍可能跳过中间刻度，改用更大的间隔（如 15），造成刻度“跳跃”现象。

要彻底禁用该行为并确保 Y 轴严格按 stepSize: 5 显示全部刻度（例如从 -60 到 60 的每 5 个单位一个标签），必须显式关闭自动跳过功能：

options: {
  scales: {
    y: {
      min: -60,
      grid: {
        color: ({ tick }) => tick.value === 0 ? 'black' : Chart.defaults.borderColor
      },
      ticks: {
        stepSize: 5,
        autoSkip: false, // ? 关键：禁用自动跳过
        display: true
      }
    }
  },
  layout: {
    padding: {
      right: 10,
      top: 10
    }
  }
}

⚠️ 注意事项：

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

autoSkip: false 会强制渲染所有符合 stepSize 的刻度标签，不考虑空间是否足够。若 min/max 范围过大或 stepSize 过小，可能导致标签严重重叠。建议配合合理设置 min/max 或使用 callback 自定义标签格式（如保留整数、添加单位等）提升可读性；
此配置仅影响 标签显示，不影响网格线——网格线仍会基于 stepSize 绘制，与 autoSkip 无关；
在响应式场景中（如窗口缩放），若需兼顾清晰度与完整性，可结合 afterUpdate 钩子动态调整 max 或 precision，但对固定步长需求，autoSkip: false 是最直接可靠的解法。