如何修改Highcharts甘特图日期格式，仅显示月日年且去除前缀？

问题描述 #

当前Highcharts甘特图提示框（Tooltip）中的日期显示格式为：

Start: Sunday, Jul 9, 2023
End: Tuesday, Sep 19, 2023

需修改为无前缀、无星期的格式：

Jul 9 2023
Sep 19 2023

解决方案 #

通过自定义Tooltip的formatter函数，替换默认日期显示逻辑，实现目标格式。只需在Highcharts配置中添加tooltip配置项即可：

tooltip: {
  formatter: function() {
    // 封装日期格式化函数，输出"月 日 年"格式
    const formatDate = (timestamp) => {
      const date = new Date(timestamp);
      return date.toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric'
      }).replace(',', ''); // 移除默认格式中的逗号
    };
    
    return `
      <b>${this.point.label}</b><br/>
      Start: ${formatDate(this.point.start)}<br/>
      End: ${formatDate(this.point.end)}
    `;
  }
}

修改后的完整代码 #

(function(H) {
H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
var color = item.color;

item.color = item.options.legendColor;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
item.color = color;
});
}(Highcharts));

Highcharts.ganttChart('container', {
xAxis: [{
tickInterval: 1000 * 3600 * 24 * 30,
labels: {
format: '{value: %b}'
}
},
{
tickInterval: 1000 * 3600 * 24 * 90,
units: [
['month', [3]]
],
labels: {
align: 'center',
formatter: function() {
const label = this,
date = new Date(this.value),
year = date.toLocaleString('en', { year: "2-digit", }),
quarter = Math.floor(date.getMonth() / 3 + 1);

return `FY${year} Q${quarter}`;
}
}
}
],
// 新增自定义tooltip配置
tooltip: {
  formatter: function() {
    const formatDate = (timestamp) => {
      const date = new Date(timestamp);
      return date.toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric'
      }).replace(',', '');
    };
    
    return `
      <b>${this.point.label}</b><br/>
      Start: ${formatDate(this.point.start)}<br/>
      End: ${formatDate(this.point.end)}
    `;
  }
},
legend: {
enabled: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.label}'
}
}
},
series: [{
name: 'Everyone',
legendColor: '#ffe699',
data: [{
name: 'Annual',
label: 'Training 1',
color: '#ffe699',
start: Date.UTC(2023, 7, 1),
end: Date.UTC(2023, 8, 2)
}, {
name: '2 Years',
label: 'Training 2',
color: '#ffe699',
start: Date.UTC(2023, 6, 9),
end: Date.UTC(2023, 8, 19)
}]
}, {
name: 'Menagers',
legendColor: '#9bc2e6',
data: [{
name: 'Annual',
color: '#9bc2e6',
label: 'Training 1',
start: Date.UTC(2023, 9, 10),
end: Date.UTC(2023, 11, 23)
}]
}]
});

HTML代码保持不变：

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<div id="container"></div>

说明 #

• 利用toLocaleDateString生成英文短月份格式的基础日期，通过配置参数得到Jul 9, 2023格式
• 调用replace(',', '')移除默认格式中的逗号，最终得到目标的Jul 9 2023格式
• 自定义formatter函数完全控制提示框内容，保留原有标签信息的同时，替换了日期显示逻辑

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