甘特图日期粒度

甘特图的日期粒度决定了时间轴的显示方式和任务条的布局。VTable提供了多种日期粒度选项，包括：

'day' 按天显示
'week' 按周显示
'month' 按月显示
'quarter' 按季度显示
'year' 按年显示
'hour' 按小时显示
'minute' 按分钟显示
'second' 按秒显示

配置

可以通过timeLineHeader.scales配置项来设置日期粒度。可以设置多层，每层可以设置不同的日期粒度。

const ganttOptions = {
  timeLineHeader: {
    scales: [
      { type: 'day', label: '日' },
      { type: 'week', label: '周' },
      { type: 'month', label: '月' },
    ],
  },
};

内部时间粒度处理

时间粒度顺序

配置多层时间粒度后，vtable-gantt会默认将时间粒度从大到小依次显示。如下示例中配置了多层scales：

scales: [
      {
        unit: 'week',
        step: 1,
        startOfWeek: 'sunday',
        format(date) {
          return `Week ${date.dateIndex}`;
        },
        style: {
          textStick:true,
          fontSize: 20,
          fontWeight: 'bold',
          color: 'red',
        }
      },
      {
        unit: 'day',
        step: 1,
        format(date) {
          return `Day ${date.dateIndex}`;
        },
        style: {
          textStick:true,
          fontSize: 20,
          fontWeight: 'bold',
          color: 'blue'
        }
      },
      {
        unit: 'month',
        step: 1,
        format(date) {
          return `Month ${date.dateIndex}`;
        },
        style: {
          textStick:true,
          fontSize: 20,
          fontWeight: 'bold',
          color: 'green'
        }
      },
      {
        unit: 'quarter',
        step: 1,
        startOfWeek: 'sunday',
        format(date) {
          return `Quarter ${date.dateIndex}`;
        },
        style: {
          textStick:true,
          fontSize: 20,
          fontWeight: 'bold',
          color: 'red',
        }
      },
      {
        unit: 'hour',
        step: 1,
        style: {
          fontSize: 16,
          color: 'green'
        }
      },
    ]