Chart.js优化xAxes标签：长周期下避免显示undefined

一、解决标签出现"undefined"的问题 #

你之前手动将非目标标签设为空字符串导致undefined，核心原因是标签数组可能存在未定义元素，或未正确利用Chart.js的回调机制。正确做法是通过ticks.callback动态生成标签，而非提前修改标签数组：

方案1：使用时间类型坐标轴（推荐） #

时间轴会自动解析你的时间数据，无需手动维护标签数组，直接通过回调过滤显示：

options: {
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        unit: 'hour', // 按小时划分刻度
        displayFormats: {
          hour: 'MM-DD HH:mm' // 默认显示格式
        }
      },
      ticks: {
        callback: function(value) {
          const date = new Date(value);
          // 仅显示每日0点的标签
          if (date.getHours() === 0) {
            return date.toLocaleDateString(); // 返回"MM/DD"格式的日期
          }
          return ''; // 其他刻度不显示标签
        }
      }
    }]
  }
}

方案2：使用分类坐标轴 #

如果坚持用分类轴，确保标签数组无undefined元素，再通过回调控制显示：

options: {
  scales: {
    xAxes: [{
      ticks: {
        callback: function(label) {
          const date = new Date(label);
          if (date.getHours() === 0) {
            return date.toLocaleDateString();
          }
          return '';
        }
      }
    }]
  }
}

二、长周期数据的标签简化（如半年显示每周首日） #

只需在ticks.callback中增加星期判断逻辑，以每周一作为首日为例：

ticks: {
  callback: function(value) {
    const date = new Date(value);
    // 仅显示每周一的0点标签
    if (date.getHours() === 0 && date.getDay() === 1) {
      return date.toLocaleDateString();
    }
    return '';
  }
}

注：getDay()返回0为周日，1为周一，可根据需求调整判断条件。

关键注意事项 #

• 确保你的数据x值为有效时间格式（ISO字符串、时间戳、Date对象），否则Chart.js无法正确解析。
• 无需手动处理无数据（值为0）的小时，时间轴会自动覆盖全周期刻度，不影响标签逻辑。

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