完整可运行 HTML 使用方式复制全部代码新建.html文件粘贴保存直接双击文件用浏览器打开无需本地服务、无跨域、正常预览完整甘特图支持所有主流浏览器Chrome/Edge/360/Firefox!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title项目管理甘特图 - Highcharts Gantt 可预览修复版/title !-- 稳定CDN严格加载顺序基础内核→甘特模块 -- script srchttps://cdn.jsdelivr.net/npm/highcharts11.4.3/highcharts.min.js/script script srchttps://cdn.jsdelivr.net/npm/highcharts11.4.3/modules/gantt.min.js/script style * {margin: 0; padding: 0; box-sizing: border-box;} body {background: #fff; padding: 10px;} #container { width: 100%; height: 90vh; border: 1px solid #eee; } /style /head body div idcontainer/div script const day 24 * 36e5, today Math.floor(Date.now() / day) * day; const options { chart: { plotBorderColor: rgba(128,128,128,0.1), plotBorderWidth: 1, plotBorderRadius: 5 }, plotOptions: { series: { borderRadius: 50%, connectors: { lineWidth: 1, lineColor: #666, radius: 10, endMarker: { verticalAlign: bottom, align: center, yOffset: 5 }, startMarker: { symbol: arrow-half, lineWidth: 1, lineColor: #666, xOffset: -5 } }, groupPadding: 0, dataLabels: [{ enabled: true, align: left, format: {point.name}, padding: 10, style: { fontWeight: normal, textOutline: none } }, { enabled: true, align: right, format: {#if point.completed}{(multiply point.completed.amount 100):.0f}% {/if}, padding: 10, style: { fontWeight: normal, textOutline: none, opacity: 0.6 } }] } }, series: [{ name: 办公场地项目, data: [{ name: 新办公室筹备, id: new_offices, owner: Peter, pointWidth: 3, color: #666, dataLabels: { align: right, style: { color: #666 }, x: 72 } }, { name: 办公楼装修施工, id: prepare_building, parent: new_offices, start: today - (8 * day), end: today (6 * day), completed: { amount: 0.5 }, owner: Linda }, { name: 建筑竣工验收, id: inspect_building, dependency: prepare_building, parent: new_offices, start: today 6 * day, end: today 8 * day, owner: Ivy }, { name: 验收通过里程碑, id: passed_inspection, dependency: inspect_building, parent: new_offices, start: today 9.5 * day, milestone: true, owner: Peter }, { name: 搬迁工作, id: relocate, owner: Josh, pointWidth: 3, color: #666, dataLabels: { align: right, style: { color: #666 }, x: 57 } }, { name: 员工搬迁, id: relocate_staff, parent: relocate, start: today 10 * day, end: today 11 * day, owner: Mark }, { name: 实验室设备迁移, dependency: relocate_staff, parent: relocate, start: today 11 * day, end: today 13 * day, owner: Anne }, { name: 食堂搬迁, dependency: relocate_staff, parent: relocate, start: today 11 * day, end: today 14 * day }] }, { name: 产品项目, data: [{ name: 新品上线计划, id: new_product, owner: Peter, pointWidth: 3, color: #666, dataLabels: { align: right, style: { color: #666 }, format: 上线, x: 50 } }, { name: 产品研发, id: development, parent: new_product, start: today - day, end: today (11 * day), completed: { amount: 0.6 }, owner: Susan }, { name: Beta测试里程碑, id: beta, dependency: development, parent: new_product, start: today 12.5 * day, milestone: true, owner: Peter }, { name: 最终版本完善开发, id: finalize, dependency: beta, parent: new_product, start: today 13 * day, end: today 17 * day }, { name: 正式上线里程碑, dependency: finalize, parent: new_product, start: today 17.5 * day, milestone: true, owner: Peter }] }], tooltip: { pointFormat: span stylefont-weight: bold{point.name}/spanbr {point.start:%m月%d日} {#unless point.milestone} → {point.end:%m月%d日}{/unless} br {#if point.completed}完成进度: {multiply point.completed.amount 100}%br{/if} 负责人: {#if point.owner}{point.owner}{else}未分配{/if} }, title: { text: 项目管理甘特图, align: left }, xAxis: [{ currentDateIndicator: { color: #ef4444, dashStyle: ShortDot, width: 2, label: { format: } }, dateTimeLabelFormats: { day: %dbrspan styleopacity: 0.5; font-size: 0.7em%a/span }, grid: { borderWidth: 0, cellHeight: 46 }, gridLineWidth: 1, min: today - 3 * day, max: today 19 * day, custom: { weekendPlotBands: { color: #f2f2f2 } } }, { dateTimeLabelFormats: { month: %m月%Y年 }, labels: { align: left, x: 5, style: { fontSize: 0.7em, fontWeight: bold } }, grid: { borderWidth: 0, cellHeight: 24 }, tickInterval: 30 * 24 * 36e5 }], yAxis: { grid: { borderWidth: 0, enabled: true, columns: [{ title: { text: 任务名称, textAlign: left, x: 18 }, labels: { format: {value}, indentation: 0 } }, { title: { text: 工期, textAlign: left, x: 8 }, labels: { format: {#if point.x2}{(divide (subtract point.x2 point.x) 86400000)} 天{else} - {/if}, style: { opacity: 0.7 } } }] }, gridLineWidth: 0, staticScale: 30 } }; // 周末底色渲染插件 Highcharts.addEvent(Highcharts.Axis, foundExtremes, e { const weekendColor e.target.options.custom?.weekendPlotBands?.color; if (!weekendColor) return; const axis e.target, chart axis.chart, day 24 * 36e5; const isWeekend t /[06]/.test(chart.time.dateFormat(%w, t)); const plotBands []; let inWeekend false; for (let x Math.floor(axis.min / day) * day; x Math.ceil(axis.max / day) * day; x day) { const last plotBands.at(-1); if (isWeekend(x) !inWeekend) { plotBands.push({ from: x, color: weekendColor }); inWeekend true; } if (!isWeekend(x) inWeekend last) { last.to x; inWeekend false; } } axis.options.plotBands plotBands; }); // 延迟初始化保证模块全部加载完成 window.addEventListener(load, function(){ Highcharts.ganttChart(container, options); }) /script /body /html图表类型 示例解析1. 图表类型Highcharts Gantt 甘特图项目排期图支持树形分层任务、任务依赖箭头、里程碑标记、进度百分比、多列侧边栏、双层时间轴。2. 核心功能模块拆解分层树形任务分为两大项目分组办公场地、新品研发每组下存在父任务、子任务自动缩进分层展示区分项目大类与细分工作项。任务前置依赖联动通过dependency绑定任务 ID自动生成带箭头连接线直观展示任务先后顺序前序任务完成后方可执行后续工作。里程碑节点milestone: true生成菱形标记仅占单个时间点用于验收、上线、测试等关键节点。任务进度百分比completed.amount配置完成比例任务条内部填充进度右侧标签直接展示百分比数值。双层 X 时间轴上层按日展示星期与日期下层按月展示年月兼顾精细查看与全局周期预览。双列表 Y 轴侧边栏左侧第一列任务名称第二列自动计算任务工期天数无需额外表格搭配。辅助视觉增强红色虚线当前系统日期标线直观区分过去 / 未来任务周末自动灰色底色区分快速识别休息日悬浮 Tooltip展示起止日期、完成进度、任务负责人、前置依赖插件扩展能力内置 Axis 扩展事件自动计算并渲染周末底色无需手动批量配置时间区间色块。在这套全功能项目甘特图案例中Highcharts Gantt 提供开箱即用的专业排期可视化能力解决传统表格、简易图表无法直观展示任务时序、依赖关系、分层结构的痛点。完备的任务结构体系原生支持父子任务分层、ID 绑定前置依赖、里程碑标记、进度百分比填充完整覆盖项目管理核心要素多维度信息一体化展示双层 X 时间轴 双列表 Y 侧边栏任务名称、工期、起止时间、负责人、完成进度统一在图表内呈现无需搭配辅助表格高度自定义视觉与交互可自由配置任务条圆角、连接线箭头样式、周末高亮色块、当前日期标线悬浮提示可自定义多字段格式化插件化扩展机制基于 Highcharts 原生事件系统扩展周末底色自动渲染逻辑扩展性强可根据业务新增节假日、预警色块、延期标记等功能无障碍与适配优化内置完整无障碍朗读描述支持键盘导航布局自适应缩放兼容 PC 端管理后台与数据大屏场景轻量化集成单库引入即可运行无需复杂依赖配置代码结构清晰便于前后端对接动态渲染项目数据。
