Chart.js 4.2.1日期X轴配置咨询：显示全量日期及优化展示

核心配置思路 #

• 使用time类型X轴并指定完整时间范围，确保覆盖所有日期
• 开启网格竖线，显示所有日期的刻度线
• 通过ticks.callback自定义三行标签逻辑，实现月中仅显示一次月份、年中仅显示一次年份
• 利用autoSkip自动处理大范围日期下的标签重叠问题

完整配置示例 #

依赖安装 #

npm install chart.js@4.2.1 chartjs-adapter-date-fns

图表初始化代码 #

import Chart from 'chart.js/auto';
import 'chartjs-adapter-date-fns';

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'line', // 可替换为你使用的图表类型
  data: {
    labels: ['2023-01-05', '2023-01-15', '2023-02-20', '2023-06-15', '2023-12-10'], // 你的数据日期集合
    datasets: [{
      label: '数值',
      data: [12, 19, 3, 5, 2], // 对应日期的数值
      borderColor: '#36A2EB',
      backgroundColor: '#9BD0F5',
      fill: false
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          // 设置时间范围，确保包含所有需要展示的日期
          min: '2023-01-01',
          max: '2023-12-31',
          displayFormats: {
            day: 'd' // 顶行显示日期数字
          }
        },
        // 显示所有日期的竖线
        grid: {
          display: true,
          drawOnChartArea: true,
          drawTicks: true
        },
        ticks: {
          // 标签水平显示，避免旋转
          maxRotation: 0,
          minRotation: 0,
          // 自动跳过重叠的标签
          autoSkip: true,
          autoSkipPadding: 10,
          // 自定义三行标签生成逻辑
          callback: function(value, index, values) {
            const date = new Date(value);
            const day = date.getDate();
            const monthName = date.toLocaleString('zh-CN', { month: 'long' });
            const year = date.getFullYear();

            let monthLabel = '';
            let yearLabel = '';

            // 月中（以每月15号为例）显示月份名称
            if (day === 15) {
              monthLabel = monthName;
            }

            // 年中（以每年6月15号为例）显示年份
            if (date.getMonth() === 5 && day === 15) {
              yearLabel = year.toString();
            }

            // 用换行符拼接三行内容
            return `${day}\n${monthLabel}\n${yearLabel}`;
          }
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
});

关键配置说明 #

• 时间范围覆盖：通过time.min和time.max明确指定时间区间，确保X轴包含所有日期，即使对应日期无数据点
• 竖线显示：grid.display: true开启所有日期的网格竖线，drawOnChartArea: true让竖线贯穿图表区域
• 三行标签：在ticks.callback中判断当前日期是否为月中/年中，动态生成包含日期、月份、年份的三行文本，利用\n实现换行展示
• 重叠处理：autoSkip: true让Chart.js自动检测并跳过重叠的标签，autoSkipPadding调整标签间的最小间距，优化显示效果

自定义调整点 #

• 月中/年中判断逻辑：可根据需求修改day === 15或date.getMonth() === 5的条件，比如改为每月第一个工作日显示月份、每年1月1号显示年份
• 日期格式：调整displayFormats和toLocaleString的参数，可修改日期、月份的显示样式（如月份显示为数字缩写）
• 竖线样式：通过grid.color、grid.lineWidth等属性自定义竖线的颜色、粗细

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