如何修改甘特图配置将列标签改为15分钟间隔提升可读性？

根据你使用的angular-gantt组件（从指令语法判断），要实现列标签15分钟间隔，核心是调整ganttOptions中的刻度单位和表头显示规则，具体操作如下：

1. 调整基础刻度步长 #

在控制器代码中修改ganttOptions的刻度配置，指定以分钟为单位，每15分钟作为一个基础刻度间隔：

// 设置刻度单位为分钟，步长15
ganttOptions.scale = 'minute';
ganttOptions.scaleStep = 15;

2. 配置表头标签显示规则 #

通过headers数组定义表头的层级和显示逻辑，确保仅渲染每15分钟的标签，同时可保留小时级表头提升整体可读性：

ganttOptions.headers = [
  // 第一层表头：显示小时（如 09:00、10:00）
  {
    unit: 'hour',
    format: 'HH:mm'
  },
  // 第二层表头：每15分钟显示一次分钟数（如 00、15、30、45）
  {
    unit: 'minute',
    format: 'mm',
    step: 15 // 关键参数：指定每15分钟渲染一次标签
  }
];

3. 可选：适配列宽（按需调整） #

如果之前的列宽仍需优化，可以保留getColumnWidth()函数，调整返回值适配15分钟间隔的刻度：

function getColumnWidth() {
  return 60; // 可根据视觉需求修改列宽数值
}

原理说明 #

• view-scale（对应ganttOptions.scale）控制甘特图的基础时间刻度单位，scaleStep定义单个刻度的时间跨度；
• headers数组中的step参数，用于指定对应时间单位下每隔多少步显示一次标签，设置为15即可实现每15分钟展示一个列标签；
• 该配置在保留15分钟级时间细节的同时，彻底解决了每分钟标签过于密集的可读性问题。

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