带 CSS 样式模式的甘特图开发代码｜Highcharts Gantt高级开发示列
带 CSS 样式模式的甘特图完整代码，这是 Highcharts 非常专业的 ** 纯 CSS 控制样式（styledMode）** 用法，完全分离结构与样式，适合企业级、可换肤场景。
完整可运行代码（Styled Mode 纯 CSS 甘特图）
const today = new Date(), day = 1000 * 60 * 60 * 24; // Set to 00:00:00:000 today today.setUTCHours(0); today.setUTCMinutes(0); today.setUTCSeconds(0); today.setUTCMilliseconds(0); // THE CHART Highcharts.ganttChart('container', { chart: { styledMode: true }, title: { text: 'Highcharts Gantt in Styled Mode' }, subtitle: { text: 'Purely CSS-driven design' }, xAxis: { min: today.getTime() - (2 * day), max: today.getTime() + (32 * day) }, accessibility: { keyboardNavigation: { seriesNavigation: { mode: 'serialize' } }, point: { descriptionFormat: '{yCategory}. Start {x:%Y-%m-%d}, end ' + '{x2:%Y-%m-%d}.' } }, lang: { accessibility: { axis: { xAxisDescriptionPlural: 'The chart has a two-part X axis ' + 'showing time in both week numbers and days.' } } }, series: [{ name: 'Project 1', data: [{ name: 'Planning', id: 'planning', start: today.getTime(), end: today.getTime() + (20 * day) }, { name: 'Requirements', id: 'requirements', parent: 'planning', start: today.getTime(), end: today.getTime() + (5 * day) }, { name: 'Design', id: 'design', dependency: 'requirements', parent: 'planning', start: today.getTime() + (3 * day), end: today.getTime() + (20 * day) }, { name: 'Layout', id: 'layout', parent: 'design', start: today.getTime() + (3 * day), end: today.getTime() + (10 * day) }, { name: 'Graphics', parent: 'design', dependency: 'layout', start: today.getTime() + (10 * day), end: today.getTime() + (20 * day) }, { name: 'Develop', id: 'develop', start: today.getTime() + (5 * day), end: today.getTime() + (30 * day) }, { name: 'Create unit tests', id: 'unit_tests', dependency: 'requirements', parent: 'develop', start: today.getTime() + (5 * day), end: today.getTime() + (8 * day) }, { name: 'Implement', id: 'implement', dependency: 'unit_tests', parent: 'develop', start: today.getTime() + (8 * day), end: today.getTime() + (30 * day) }] }] });这个图表的核心特点（Styled Mode）
✅styledMode: true—— 开启纯 CSS 样式控制，JS 不写颜色✅任务父子层级（Planning → Design → Develop）✅任务依赖连线（自动箭头）✅时间轴自动以今天为起点✅官方 CSS 主题highcharts.css✅完全自定义样式（颜色、边框、连线、悬浮效果）✅无障碍支持 + 键盘导航
必须注意的关键依赖
- 必须加载
highcharts.cssStyled Mode 必须引入官方 CSS，否则图表无样式。 - JS 中不再写
color/fill所有颜色、边框、大小全部写在 CSS 里，实现结构样式分离。 - 依赖、父子关系自动渲染用
parent/dependency建立关系，连线自动生成。
你可以直接修改的 CSS 样式示例
/* 任务条颜色 */ .highcharts-point { fill: #b3e5fc; stroke: #0277bd; } /* 依赖连线颜色 */ .highcharts-connector { stroke: #ff6f00; } /* 文字颜色 */ .highcharts-data-label text { fill: #222; }