企业官网建设流程全解析

左侧 Y 轴显示表格的高级甘特图，这是 Highcharts 非常实用的甘特图 + 表格一体化效果

完整可运行代码（Y 轴表格甘特图）

Highcharts.ganttChart('container', { title: { text: 'Left Axis as Table' }, lang: { accessibility: { axis: { xAxisDescriptionPlural: 'The chart has a two-part X axis ' + 'showing time in both week numbers and days.', yAxisDescriptionSingular: 'The chart has a tabular Y axis ' + 'showing a data table row for each point.' } } }, accessibility: { point: { descriptionFormat: '{#if milestone}' + '{name}, milestone for {yCategory} at {x:%Y-%m-%d}.' + '{else}' + '{name}, assigned to {yCategory} from {x:%Y-%m-%d} to ' + '{x2:%Y-%m-%d}.' + '{/if}' } }, xAxis: { tickPixelInterval: 70 }, yAxis: { type: 'category', grid: { enabled: true, columns: [{ title: { text: 'Project' }, labels: { format: '{point.name}' } }, { title: { text: 'Assignee' }, labels: { format: '{point.assignee}' } }, { title: { text: 'Est. days' }, labels: { format: '{(divide (subtract point.x2 point.x) ' + '86400000):.2f}' } }, { labels: { format: '{point.start:%e. %b}' }, title: { text: 'Start date' } }, { title: { text: 'End date' }, offset: 30, labels: { format: '{point.end:%e. %b}' } }] } }, tooltip: { xDateFormat: '%e %b %Y, %H:%M' }, series: [{ name: 'Project 1', data: [{ start: '2017-11-18 08:00', end: '2017-11-25 16:00', name: 'Start prototype', assignee: 'Richards', y: 0 }, { start: '2017-11-20 08:00', end: '2017-11-24 16:00', name: 'Develop', assignee: 'Michaels', y: 1 }, { start: '2017-11-25 16:00', end: '2017-11-25 16:00', name: 'Prototype done', assignee: 'Richards', milestone: true, y: 2 }, { start: '2017-11-27 08:00', end: '2017-12-03 16:00', name: 'Test prototype', assignee: 'Richards', y: 3 }, { start: '2017-11-23 08:00', end: '2017-12-15 16:00', name: 'Run acceptance tests', assignee: 'Halliburton', y: 4 }] }], exporting: { sourceWidth: 1000 } });

这个图表的超强功能 ✨

✅左侧 Y 轴直接变成表格，不用自己写 HTML 表格✅自动显示 5 列表格：任务名 / 负责人 / 预估天数 / 开始时间 / 结束时间✅自动计算任务天数（无需后端计算）✅里程碑节点（菱形标记）✅时间轴甘特图+数据表格一体化✅鼠标悬浮提示完整时间✅导出 / 打印完整保留表格