Chart.js如何移除折线图X轴重复刻度？

直接在ticks.callback里通过对比上一个标签来控制显示，重复的标签返回空字符串即可隐藏：

x: {
  ticks: {
    display: true,
    autoSkip: false,
    callback: function(val, index, dates) {
      // 用闭包保存上一次的标签
      if (!this.prevLabel) this.prevLabel = '';
      const currentLabel = this.getLabelForValue(val);
      
      if (currentLabel === this.prevLabel) {
        // 重复标签返回空，隐藏刻度
        return '';
      } else {
        // 更新上一个标签并返回当前标签
        this.prevLabel = currentLabel;
        return currentLabel;
      }
    },
  }
},

原理说明 #

因为你设置了autoSkip: false，每个数据点都会生成一个X轴刻度。我们在回调里维护一个prevLabel变量，每次判断当前标签和上一个是否重复：

• 重复则返回空字符串，对应刻度就不会显示
• 不重复则更新记录并返回标签，正常显示

内容的提问来源于stack exchange，提问作者Berkay Gülyaz