Chart.js时间序列轴配置ticks.source: "labels"后主刻度不显示如何解决

问题原因 #

当ticks.source配置为labels时，Chart.js的时间轴会直接使用传入的标签列表生成刻度，不会自动执行主/次刻度的计算逻辑，默认不会给生成的刻度添加major标记，因此你开启的ticks.major.enabled不会生效。

解决方案 #

通过afterBuildTicks回调手动给符合主刻度规则的刻度添加major标记即可，修改后的配置如下：

xAxis: {
  bounds: "ticks",
  grid: {
    display: false,
  },
  type: "time",
  time: {
    unit: "hour",
    stepSize: 3,
    displayFormats: {
      day: "d. MMM",
      hour: "HH:mm",
    },
    tooltipFormat: "EEEE, MMM dd, HH:mm:ss",
  },
  adapters: {
    date: {
      locale: pl,
    },
  },
  ticks: {
    maxTicksLimit: 7.1,
    source: "labels", // 保留该配置
    maxRotation: 0,
    major: {
      enabled: true,
    }
  },
  // 新增以下回调逻辑
  afterBuildTicks: (axis, ticks) => {
    ticks.forEach(tick => {
      // 自定义主刻度判断规则，示例为判断是否为3小时整的时间点，可根据需求修改
      const date = new Date(tick.value);
      if (date.getHours() % 3 === 0 && date.getMinutes() === 0) {
        tick.major = true;
      }
    })
    return ticks;
  }
}

注意事项 #

• 上述示例的判断规则是将3小时整的时间点作为主刻度，你可以根据实际需求调整判断逻辑，比如需要以天为边界做主刻度，就判断date.getHours() === 0 && date.getMinutes() === 0即可
• 确保你传入的labels数组中包含你需要标记为主刻度的时间点，source: "labels"模式下不会生成你没有传入的时间刻度
• 手动标记的主刻度数量不要超过maxTicksLimit的限制，否则会被自动截断

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