Highcharts Gantt 的项目管理图通常把任务放在纵轴、时间放在横轴，并可用依赖关系表达任务先后。要加入时间导航，常用三种控件：

• 时间范围按钮：快速切换一周、一个月或整个项目。
• Navigator：在概览区域拖动选择要查看的时间段。
• Scrollbar：沿时间轴平移查看其他日期。

下面是一个可运行示例，展示项目阶段、任务依赖、完成进度和导航控件。

Highcharts.ganttChart('container', { title: { text: 'Gantt Chart with Navigation' }, yAxis: { uniqueNames: true }, navigator: { enabled: true, liveRedraw: true, series: { type: 'gantt', pointPlacement: 0.5, pointPadding: 0.25, accessibility: { enabled: false } }, yAxis: { min: 0, max: 3, reversed: true, categories: [] } }, scrollbar: { enabled: true }, rangeSelector: { enabled: true, selected: 0 }, accessibility: { point: { descriptionFormat: '{yCategory}. ' + '{#if completed}Task {(multiply completed.amount 100):.1f}% ' + 'completed. {/if}' + 'Start {x:%Y-%m-%d}, end {x2:%Y-%m-%d}.' }, series: { descriptionFormat: '{name}' } }, lang: { accessibility: { axis: { xAxisDescriptionPlural: 'The chart has a two-part X axis ' + 'showing time in both week numbers and days.', yAxisDescriptionPlural: 'The chart has one Y axis showing ' + 'task categories.' } } }, series: [{ name: 'Project 1', data: [{ start: '2017-12-01', end: '2018-02-02', completed: { amount: 0.95 }, name: 'Prototyping' }, { start: '2018-02-02', end: '2018-12-05', completed: { amount: 0.5 }, name: 'Development' }, { start: '2018-12-08', end: '2018-12-09', completed: { amount: 0.15 }, name: 'Testing' }, { start: '2018-12-09', end: '2018-12-19', completed: { amount: 0.3, fill: '#fa0' }, name: 'Development' }, { start: '2018-12-10', end: '2018-12-23', name: 'Testing' }, { start: '2018-12-25 08:00', end: '2018-12-25 16:00', name: 'Release' }] }] });

代码中，rangeSelector配置快捷时间范围，navigator.enabled显示可拖动的时间概览，scrollbar.enabled提供平移操作。任务的start和end使用毫秒时间戳；parent用于组织项目层级，dependency用于连接前后任务，completed.amount表示完成比例，取值范围为0到1。

更多示例与说明：

• 带导航的 Gantt 示例
• Highcharts Gantt 入门
• Gantt 任务依赖
• Gantt 轴与表格布局

注意：示例使用Highcharts.ganttChart，运行环境需加载 Highcharts Gantt。