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。