Chart.js如何根据标签数量显示X轴的第n个标签？

问题根源及修正方案 #

你的代码失效核心是Chart.js版本兼容性问题：v3+版本已废弃xAxes数组写法，改为直接在scales下指定轴ID（默认是x）；另外maxTicksLimit仅能限制最大显示数量，无法精准控制“每第n个”显示，建议用ticks.callback实现自定义逻辑。

修正后的代码示例 #

const labels = ['11-02-2022', '11-01-2022', '30-01-2022', '11-20-2022'];
const labelCount = labels.length;
// 根据标签数量计算显示间隔n，示例：标签数≥10时显示每2个，否则全显示
const displayInterval = labelCount >= 10 ? 2 : 1;

const options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: { // v3+版本用x代替xAxes数组
      ticks: {
        // 回调控制标签显示
        callback: function(value, index) {
          // 仅显示索引为displayInterval倍数的标签（含第一个）
          return index % displayInterval === 0 ? this.getLabelForValue(value) : '';
        }
      }
    }
  },
  interaction: {
    intersect: false
  },
  animations: animation,
  plugins: {
    legend: {
      position: 'top',
    },
  },
};

若项目仍用Chart.js v2版本，保留xAxes数组写法，仅调整ticks逻辑：

scales: {
  xAxes: [{
    ticks: {
      callback: function(value, index) {
        return index % displayInterval === 0 ? this.getLabelForValue(value) : '';
      }
    }
  }]
}

排查问题的核心要点 #

• 版本匹配：确认Chart.js版本，v2和v3+的轴配置结构差异极大，勿混用旧版写法。
• 轴类型配置：若标签是日期，建议将X轴类型设为time（需引入对应日期适配器），避免类别轴自动排版干扰自定义逻辑。
• 回调函数逻辑：检查ticks.callback返回值，确保仅在符合条件的索引下返回标签文本，否则返回空字符串。
• 配置层级正确性：确保ticks配置嵌套在对应轴（x或xAxes）的配置下，层级错误会导致配置不生效。

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