如何在Chart.js X轴上跳过刻度间隔，仅显示每第三个刻度和标签？

你之前的代码只是隐藏了标签，但Chart.js依然会保留对应位置的刻度线和网格线。要在不修改原始数据的前提下完全移除这些不需要的刻度间隔，只需要调整ticks.callback的返回值，并配置网格线跳过空刻度即可：

适配Chart.js v2版本的代码 #

options: {
  scales: {
    xAxes: [{
      autoSkip: false,
      ticks: {
        callback: function(tick, index, array) {
          // 仅保留索引为3的倍数的刻度，其他返回null让Chart.js跳过整个刻度
          return index % 3 === 0 ? tick : null;
        }
      },
      gridLines: {
        skipNull: true // 跳过空刻度对应的网格线
      }
    }],
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

适配Chart.js v3+版本的代码（语法有更新） #

options: {
  scales: {
    x: {
      autoSkip: false,
      ticks: {
        callback: function(tick, index, array) {
          return index % 3 === 0 ? tick : null;
        }
      },
      grid: {
        skipNull: true
      }
    },
    y: {
      beginAtZero: true
    }
  }
}

关键说明： #

• 把原来返回空字符串改成返回null，Chart.js会彻底跳过该刻度的渲染（包括标签、刻度线和网格线）
• 开启skipNull选项，确保网格线不会为被跳过的刻度绘制
• 保持autoSkip: false，避免Chart.js自动调整刻度数量打乱你的自定义规则

内容的提问来源于stack exchange，提问作者Minimalism