如何配置Highcharts甘特图日期使其支持字符串格式无需JavaScript Date对象

云原生阿岚

2026-10-3

解决方案

你可以在AJAX请求拿到后端返回的series数据后，先做一层日期格式转换，再传入图表配置渲染，不需要修改后端输出逻辑，改造成本最低。

具体实现步骤

第一步：封装日期转时间戳的处理函数，兼容空值场景

function parseDateToTimestamp(dateStr) {
  // 空日期可以按业务需求自定义返回值，比如返回当前时间、null或者指定默认时间戳
  if (!dateStr) return new Date().getTime();
  return new Date(dateStr).getTime();
}

第二步：AJAX请求拿到数据后，批量处理所有数据项的start、end字段

// 这里替换为你的现有AJAX请求逻辑
fetch('你的PHP后端接口地址')
  .then(res => res.json())
  .then(rawSeries => {
    // 预处理所有series的data字段
    const processedSeries = rawSeries.map(seriesItem => {
      return {
        ...seriesItem,
        data: seriesItem.data.map(task => {
          return {
            ...task,
            start: parseDateToTimestamp(task.start),
            end: parseDateToTimestamp(task.end)
          }
        })
      }
    })
    // 把处理后的数据传入图表配置
    renderGanttChart(processedSeries)
  })

第三步：修改图表初始化逻辑，接收预处理后的series数据

function renderGanttChart(series) {
  // 提前定义基础时间变量
  const day = 1000 * 60 * 60 * 24;
  const today = new Date();
  Highcharts.ganttChart('container', {
    chart: {
        styledMode: true
    },
    title: {
        text: 'Highcharts甘特图样式模式'
    },
    subtitle: {
        text: '纯CSS驱动设计'
    },
    xAxis: {
        min: today.getTime() - (2 * day),
        max: today.getTime() + (32 * day)
    },
    series: series // 直接传入预处理后的series即可
  });
}