DHTMLX Gantt 9.0 具有全面改进的主题、新的深色主题、手动安排的摘要、内置基线等
经过数月的精心工作，我们很高兴推出 DHTMLX Gantt 9.0。这一里程碑版本使我们的JavaScript 甘特图界面焕然一新。9.0 版带来了彻底改进的主题，并大大简化了甘特图的外观和感觉自定义。我们还引入了手动安排的摘要任务、对基线的内置支持、增强的截止日期和约束可视化、粘性标签以及许多其他改进，以增强基于甘特图组件的 Web 应用程序。
在这篇文章中，我们将介绍 DHTMLX Gantt 9.0 的新功能和改进，这些功能和改进使 DHTMLX Gantt 9.0 成为提供全面项目管理应用程序的技术堆栈中必备工具。
可定制的主题和增强的用户界面
视觉上吸引人且易于定制的用户界面对于满足 Web 开发人员和最终用户的需求至关重要。在 DHTMLX Gantt 9.0 中，我们在增强用户界面方面取得了重大进展，以提供更现代、更灵活的体验。
彻底改造的主题
就像 DHTMLX Scheduler (v7.0) 的最新重大更新一样，Gantt 9.0 带来了主题的全面改革。我们重写了核心样式，采用了现代设计实践，以确保您的甘特图看起来新颖而时尚。
更新露台主题
默认Terrace 主题已进行改进，以符合现代 UI 标准。它现在提供更简洁、更生动的外观，可提高可读性和用户参与度。
新的深色主题
Web 应用程序中对深色主题的需求持续高涨，其受欢迎程度的原因有很多。深色主题可减轻眼疲劳，让您的应用程序外观时尚现代。使用 v9.0，您可以将这个热门主题应用到您的甘特图中。
使用 CSS 变量定制甘特图
v9.0 中的另一个突出的样式功能是使用 CSS 变量简化甘特图自定义。这些自定义属性提供了多种好处，如下文更详细地介绍。
轻松定制和维护
CSS 变量提供了一种简单而灵活的方式来修改甘特图的外观。Web 开发人员可以定义全局样式属性，例如颜色、字体和其他样式元素，只需进行少量更改即可快速更新整个甘特图。
以下代码可以更改甘特图中刻度、任务和链接的颜色：
:root {/* 比例 */
--dhx-gantt-scale- background : #8E8E8E ;
--dhx-gantt-base-colors-border-light : #C5C5C5 ;
--dhx-gantt-base-colors- border : #DFE0E1 ;
--dhx-gantt-scale- color : #FFF ;
--dhx-gantt-base-colors-icons : #00000099 ;
/* 任务 */
--dhx-gantt-task- background : #3db9d3 ;
--dhx-gantt-task- color : #FFFFFF ;
--dhx-gantt-project- background : #6AA84F ;
--dhx-gantt-project- color : #FFFFFF ;
/* 链接 */
--dhx-gantt-link- background : #ffa011 ;
--dhx-gantt-link-background-hover : #ffa011 ;
}
对变量的任何更改（例如调整主色）都将统一应用于整个 UI，使所有内容保持同步。这还降低了随着时间的推移维护或更新 UI 所需的复杂性和工作量。
使用 CSS 变量进行主题定制
CSS 变量还提供了简化现有甘特图主题自定义的机会。因此，UI 可以根据用户偏好或特定项目需求更适应主题变化。
此外，v9.0 还允许最终用户通过应用设置在主题之间切换，而无需重新加载页面。使用此示例，您可以实际尝试此功能。
动态主题切换是使用setSkin()方法实现的。
对于那些需要大量修改甘特图的用户，v9.0 软件包包含主题的源文件。它支持深度定制和重建主题以满足特定要求。
在我们文档的相应部分中了解有关主题自定义选项的更多信息。
图标定制
在新版甘特图中，所有图标均采用 Web 字体或 SVG 元素构建。这意味着您可以直接通过 CSS 变量自定义图标样式，从而确保整个应用程序的一致性。
例如，以下是更改用于添加新任务的“加号”图标的大小和颜色的方法：
[数据列名称= '添加' ] {--dhx-gantt-base-colors-icons : #25C79D ;
字体大小: 18px ;
}
新的链接样式选项
我们还改进了甘特图任务之间链接的显示方式。现在链接可以采用圆角边框，从而为任务之间添加更平滑、更具视觉吸引力的连接。这由新的gantt.config.link_radius配置选项控制，您可以在其中定义链接所需的边框半径。
甘特图。配置。link_radius = 5 ；通过增加半径值，链接的曲线变得更加明显。如果您更喜欢经典的直线而没有任何圆角，您可以通过将半径设置为 1 来禁用此功能。
甘特图。配置。link_radius = 1 ；这一新颖的功能允许您定制链接样式以更好地匹配应用程序的设计美感。
手动安排的摘要任务
我们的团队一直在寻找提高使用甘特图管理项目的灵活性和准确性的方法。新版甘特图增加了手动汇总（项目）任务调度功能。它用于在指定子任务详细信息之前概述项目阶段，从而提供通用的项目时间表。
默认情况下，摘要任务会根据其子任务的最早开始日期和最晚结束日期自动计算其日期。现在，最终用户可以独立于子任务为摘要任务设置固定的开始日期和结束日期。因此，甘特图将同时显示摘要任务的固定持续时间和从子任务得出的持续时间。
要为摘要任务激活此功能，请将auto_scheduling属性设置为false。固定日期存储在task.start_date和task.end_date中，而从子任务计算出的日期则存储在task.$auto_start_date和task.$auto_end_date中。
gantt.parse ( { data : [ { id : 1 , text : “项目第1阶段” , type : “项目” , start_date : “ 2025-05-01 00:00:00” , duration : 15 , auto_scheduling : false } , //... ] , } ) ;甘特图中会显示摘要任务的固定持续时间和根据其子任务计算出的实际持续时间。如果子任务日期范围超出摘要任务的指定日期，摘要任务将以红色突出显示，以指示时间安排冲突，如下例所示。此视觉提示可帮助最终用户快速识别和解决项目时间表中的差异。
此功能为最终用户提供了一种便捷的机制，即使出现计划外的时间表变更，也能确保准确的项目管理。
内置基线支持
在甘特图等工具中，基线可以清楚地表明实际工作进度与项目实施计划的一致性。以前在 DHTMLX Gantt 中，添加基线需要通过gantt.addTaskLayer API 手动编码。从现在开始，开发人员可以享受对基线实体的内置支持，从而大大简化这一重要甘特图项目的工作。
基线可以直接与任务一起加载，从而简化甘特图数据的呈现和管理。
一旦基线被加载，甘特图将自动在时间轴中显示它们，而无需任何额外的配置（如本示例中所示） 。
使用新的灯箱控件，管理基线现在更加直观。最终用户可以直接从任务编辑表单轻松添加、编辑或删除基线。
该新控件的具体内容如下：
gantt. config . lightbox . sections = [{ name : "description" , height : 38 , map_to : "text" , type : "textarea" , focus : true } ,
{ name : "time" , type : "duration" , map_to : "auto" } ,
{ name : "baselines" , height : 100 , type : "baselines" , map_to : "baselines" } ,
] ;
请参阅文档中有关新基线功能的更多详细信息。
灵活的基线渲染模式
我们了解项目在工作流可视化需求方面有所不同。新版 Gantt v9.0 提供了三种显示基线的选项，由新的gantt.config.baselines.render_mode配置控制：
- 与任务在同一行显示基线
如果需要在有任务条的同一行显示基线，则该模式指定如下：
gantt.config.baselines.render_mode = “ taskRow ”；
- 在任务下方的单独子行上显示基线
要在每个任务下方的单个子行上呈现所有基线，请启用以下模式：
甘特图。配置。基线。渲染模式 = “separateRow” ；
- 显示每个基线的单独子行
如果您需要更清晰的视图，可以配置单独的子行来显示基线：
甘特图。配置。基线。渲染模式 = “individualRow” ；
数据处理器对基线的支持
DHTMLX Gantt v9.0 引入了DataProcessor对基线的支持。从技术角度来看，当甘特图中的基线更新时，DataProcessor 会自动捕获更改，确保与项目后端无缝同步。
gantt.createDataProcessor （函数（实体，动作，数据， id ）{ switch （实体）{ case “baseline” ：//处理基线更新break ; //处理其他实体... } } ）;内置显示截止日期和限制
跟踪截止日期和了解任务限制对于及时交付项目至关重要。DHTMLX Gantt 9.0 带有内置的截止日期和限制可视化功能，可增强最终用户有效管理项目时间表的能力。
截止日期可视化
在 9.0 版本中，我们的甘特图组件开始支持task.deadline字段。指定后，它会在图表上显示一个视觉指示器，从而简化任务截止日期的跟踪。
gantt.parse ( { data : [ { id : 1 , text : “带有截止日期的任务” , start_date : “2025-04-04” , duration : 5 , deadline : newDate ( 2025,3,10 ) , // 2025年4月10日} , //附加任务... ] , } ) ;
自动调度模式下约束可视化
从 v9.0 开始，当启用自动调度的约束模式时，甘特图将直接在时间轴中显示约束元素。此功能旨在识别具有特定调度约束的任务，确保在项目规划期间考虑到依赖关系和限制。
以编程方式启用此功能的方式如下：
甘特图。配置。自动调度 = true ；它也可以使用auto_scheduling配置的扩展版本来实现：
甘特图。配置。自动调度 = {启用： true ，
显示约束： true
} ；
通过此附加功能，最终用户可以快速确认指定的任务约束在自动调度模式下正常工作。
时间标尺贴纸
在甘特图时间轴中管理复杂工作流程时，保持时间刻度可见非常有用。否则，当时间刻度标签移出屏幕时，用户可能会感到困惑并误解截止日期或时间范围。
为了降低此类问题的风险，DHTMLX Gantt 9.0 为时间刻度提供了粘性标签，确保标签跟随视口并保持可见，直到它们自然滚动。粘性标签还可以确保甘特图具有更好的可读性和导航性。
默认情况下，所有单元格宽度明显大于标签宽度的刻度都会启用粘性标签。可以使用刻度对象的sticky属性自定义此行为：
- 设置sticky: true以始终启用粘性标签，无论单元格宽度如何。
- 设置sticky: false来针对特定比例禁用此功能。
以下是如何配置时间尺度粘性标签的示例：
gantt. config . scales = [{单位： “年” ，步长： 1 ，格式： “％Y” ，粘性： true } ，
{单位： “月” ，步长： 1 ，格式： “％F” ，粘性： false } ，
{单位： “天” ，步长： 1 ，格式： “％j” } // 默认粘性行为
] ;
gantt. init （“gantt_here” ）；
总体而言，粘性标签有助于更好地管理甘特图中的工作流和组织任务。
迁移说明
考虑到此主要版本中提供的大量主题和样式更改，您可能需要修改现有代码以无缝迁移到 v9.0。主题更改可能会与您使用以前版本的 DHTMLX Gantt 应用的任何自定义样式或覆盖发生冲突
标签：00,DHTMLX,甘特图,任务,基线,gantt,Gantt,9.0 From： https://blog.csdn.net/john_dwh/article/details/143081604