如何为Highcharts Gantt设置初始开始和结束日期？

算力阿峰

2026-8-17

Highcharts Gantt 加载时指定时间范围（今日至未来一个月）

要让Highcharts Gantt加载时直接显示今日至未来一个月的时间范围，只需在图表配置中添加xAxis选项，通过min和max属性指定起始和结束的UTC时间戳即可。

步骤说明

计算今日0点的UTC时间戳（重置时分秒，确保从当天起始时刻开始）
计算未来一个月的UTC时间戳
在图表配置的xAxis中设置min和max参数

修改后的完整代码

// 计算今日0点的UTC时间
const today = new Date();
today.setHours(0, 0, 0, 0);
const todayUTC = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());

// 计算未来一个月的UTC时间
const nextMonth = new Date(today);
nextMonth.setMonth(nextMonth.getMonth() + 1);
const nextMonthUTC = Date.UTC(nextMonth.getFullYear(), nextMonth.getMonth(), nextMonth.getDate());

Highcharts.ganttChart('container', {
  rangeSelector: {
    enabled: true,
    selected: 0
  },
  xAxis: {
    min: todayUTC,
    max: nextMonthUTC
  },
  yAxis: {
    uniqueNames: true,
    categories: ['A', 'B', 'C'],
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 0,
      x: Date.UTC(2022, 10, 18),
    }, {
      y: 0,
      x: Date.UTC(2022, 10, 25),
    }]
  }, {
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 1,
      x: Date.UTC(2022, 10, 26),
    }, {
      y: 1,
      x: Date.UTC(2022, 10, 30),
    }]
  }, {
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 2,
      x: Date.UTC(2021, 10, 26),
    }, {
      y: 2,
      x: Date.UTC(2023, 10, 30),
    }]
  }]
});