使用QuickChart（Chart.js v2）生成甘特图时X轴首个刻度不显示

针对你遇到的Chart.js v2中X轴首个刻度不显示、设置round:'week'会多出前置周的问题，有两种可行的解决方法，无需升级版本：

方法一：利用afterBuildTicks钩子自定义刻度 #

开启round: 'week'让刻度按周对齐，通过钩子过滤并手动添加起始刻度，避免多余前置周：

{
  type: 'horizontalBar',
  data: {
    labels: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5', 'Task 6'],   
    datasets: [{
      data: [
        [new Date('2024-06-02'), new Date('2024-07-07')],
        [new Date('2024-06-02'), new Date('2024-06-06')],
        [new Date('2024-06-04'), new Date('2024-06-10')],
        [new Date('2024-06-05'), new Date('2024-06-21')],
        [new Date('2024-06-10'), new Date('2024-06-16')],
        [new Date('2024-06-17'), new Date('2024-07-07')],
      ],
      backgroundColor: ['#60879e'],
      barPercentage: 0.4,
      fontColor: '#ffffff'
    }, ],
  },
  options: {
    legend: {
      display: false
    },

    scales: {
      xAxes: [{
        position: 'top',
        type: 'time',
        time: {
          unit: 'week',
          round: 'week',
          displayFormats: {
           'week': 'MMM DD',
          }
        },
        gridLines: {
          lineWidth: 2,
          zeroLineWidth: 4.0,
          tickLength: .5,
          drawTicks: false,
          drawBorder: false,
          color: '#8fadad',
        },
        ticks: {
          min: new Date('2024-05-29'),
          max: new Date('2024-08-07'),
          padding: 10,
          fontColor: '#ffffff',
        },
        // 自定义刻度生成逻辑
        afterBuildTicks: function(scale) {
          const targetMin = new Date('2024-05-29');
          // 过滤掉早于目标起始日期的自动生成刻度
          scale.ticks = scale.ticks.filter(tick => tick.getTime() >= targetMin.getTime());
          // 如果第一个刻度不是目标起始日，手动添加
          if (!scale.ticks.length || scale.ticks[0].getTime() !== targetMin.getTime()) {
            scale.ticks.unshift(targetMin);
          }
          return scale.ticks;
        }
      }],
      
      yAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
        fontSize: 15,
        fontColor:'#ffffff'
        }
      },
      ],
    },
  },
}

原理说明 #

1. round: 'week'确保刻度按周间隔生成，避免刻度混乱；
2. afterBuildTicks钩子在自动生成刻度后，过滤掉早于你指定的2024-05-29的刻度，避免出现多余的前置周；
3. 手动将目标起始日期添加到刻度数组开头，保证首个刻度正常显示。

方法二：手动指定刻度数组 #

如果需要完全控制所有刻度的显示，直接定义刻度数组，适合固定时间范围的场景：

{
  type: 'horizontalBar',
  data: {
    labels: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5', 'Task 6'],   
    datasets: [{
      data: [
        [new Date('2024-06-02'), new Date('2024-07-07')],
        [new Date('2024-06-02'), new Date('2024-06-06')],
        [new Date('2024-06-04'), new Date('2024-06-10')],
        [new Date('2024-06-05'), new Date('2024-06-21')],
        [new Date('2024-06-10'), new Date('2024-06-16')],
        [new Date('2024-06-17'), new Date('2024-07-07')],
      ],
      backgroundColor: ['#60879e'],
      barPercentage: 0.4,
      fontColor: '#ffffff'
    }, ],
  },
  options: {
    legend: {
      display: false
    },

    scales: {
      xAxes: [{
        position: 'top',
        type: 'time',
        time: {
          unit: 'week',
          displayFormats: {
           'week': 'MMM DD',
          }
        },
        gridLines: {
          lineWidth: 2,
          zeroLineWidth: 4.0,
          tickLength: .5,
          drawTicks: false,
          drawBorder: false,
          color: '#8fadad',
        },
        ticks: {
          min: new Date('2024-05-29'),
          max: new Date('2024-08-07'),
          padding: 10,
          fontColor: '#ffffff',
          // 手动定义所有需要显示的刻度日期
          ticks: [
            new Date('2024-05-29'),
            new Date('2024-06-05'),
            new Date('2024-06-12'),
            new Date('2024-06-19'),
            new Date('2024-06-26'),
            new Date('2024-07-03'),
            new Date('2024-07-10'),
            new Date('2024-07-17'),
            new Date('2024-07-24'),
            new Date('2024-07-31'),
            new Date('2024-08-07')
          ],
          // 格式化刻度显示文本
          callback: function(value) {
            const date = new Date(value);
            return `${date.toLocaleString('en-US', { month: 'short' })} ${date.getDate()}`;
          }
        }
      }],
      
      yAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
        fontSize: 15,
        fontColor:'#ffffff'
        }
      },
      ],
    },
  },
}

原理说明 #

直接指定所有需要显示的刻度日期，完全绕过Chart.js的自动刻度生成逻辑，确保起始刻度和后续周刻度都按预期显示，适合时间范围固定的场景。

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