带 CSS 样式模式的甘特图开发代码｜Highcharts Gantt高级开发示列

news2026/5/2 20:33:01

带 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; }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2572134.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！