ChartJS时间笛卡尔X轴标签自定义：显示日期区间格式

完全可以实现你要的效果，核心思路是给结束日期的数据点绑定对应起始日期的元数据，再通过自定义刻度回调生成区间标签，同时过滤掉不需要的起始刻度。具体步骤如下：

1. 预处理数据结构 #

先把你的数据调整为以周结束日期为基准的格式，每个数据点携带对应的周起始日期。比如：

// 示例数据：每个对象包含周结束日期(x)、数值(y)、周起始日期(startDate)
const weeklyData = [
  { x: new Date('2024-04-09'), y: 18, startDate: new Date('2024-04-02') },
  { x: new Date('2024-04-16'), y: 25, startDate: new Date('2024-04-09') },
  { x: new Date('2024-04-23'), y: 21, startDate: new Date('2024-04-16') }
];

2. 配置X轴的自定义刻度 #

在图表配置中，针对时间型X轴，通过ticks.callback生成区间标签，并过滤掉非结束日期的刻度：

const chartConfig = {
  type: 'bar', // 替换成你实际使用的图表类型（line/bar等）
  data: {
    datasets: [{
      label: '周度数据',
      data: weeklyData,
      backgroundColor: '#2196F3'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'week', // 按周对齐刻度，确保刻度落在周结束日期
          displayFormats: {
            week: 'MMDD' // 这里的格式只是基础，实际标签由callback生成
          }
        },
        ticks: {
          autoSkip: false, // 关闭自动跳过，确保每个结束日期都生成刻度
          maxRotation: 0, // 可选：防止标签旋转，按需调整
          // 自定义刻度标签逻辑
          callback: function(value, index) {
            const currentPoint = weeklyData[index];
            // 过滤没有起始日期的刻度（即你说的起始日期刻度）
            if (!currentPoint?.startDate) return '';
            
            // 自定义日期格式化函数，按需修改格式
            const formatDate = (date) => {
              // 中文格式示例："4月2日"
              const month = date.getMonth() + 1;
              const day = date.getDate();
              return `${month}月${day}日`;
              // 若要MMDD格式，替换为：
              // return `${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`;
            };
            
            // 返回区间标签
            return `${formatDate(currentPoint.startDate)} - ${formatDate(currentPoint.x)}`;
          }
        },
        // 可选：隐藏不需要的网格线/刻度线
        grid: {
          drawTicks: false // 隐藏刻度线，只保留标签
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
};

// 初始化图表
new Chart(document.getElementById('myChart'), chartConfig);

关键说明 #

• 数据预处理是核心：必须让每个需要显示的刻度对应的数据点携带起始日期信息，否则无法生成区间标签。如果你的原始数据是分开的起始/结束点，需要先合并为单条结束日期数据并附加起始日期。
• 过滤无效刻度：通过callback判断数据点是否存在startDate，不存在则返回空字符串，对应刻度会被隐藏。
• 日期格式灵活调整：修改formatDate函数即可切换成你需要的格式（如DDMMYY - DDMMYY或中文格式）。

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