JavaScript图表库 DHTMLX Diagram 6.1 重磅发布：全新PERT模式上线，项目可视化能力再升级！

近日，JavaScript图表库**DHTMLX Diagram** 6.1 正式版本。本次版本更新带来了全新的 PERT 可视化模式，并在无代码/低代码流程图编辑体验方面实现了更高的灵活性与可控性。同时，Diagram 编辑器在快捷键管理与图形交互控制上也迎来了多项重要增强。

DHTMLX Diagram 最新版官方试用下载

全新 PERT 模式：让项目规划更清晰

什么是 PERT 模式？

DHTMLX Diagram 6.1 新增的 PERT（计划评审技术）模式，为 Web 应用提供了一种更加专业、高效的方式来构建 PERT 图。

PERT 图通常用于：

展示项目任务之间的先后关系与依赖关系
分析关键路径
评估整体项目周期与风险

通过清晰的结构化可视化，项目管理人员可以更快速地理解项目全貌，辅助决策。

PERT 图与甘特图数据同步，项目管理更完整

此次新增的 PERT 模式，并不是孤立存在的可视化形态，而是 DHTMLX Gantt 甘特图的强力补充。

PERT 图：适用于项目早期规划阶段，关注任务逻辑与依赖
甘特图：适用于执行阶段，关注时间轴、进度与资源跟踪

通过 Diagram + Gantt 的数据结构统一与同步机制，开发者可以在同一套数据源下，实现两种视图的无缝切换，帮助项目经理从不同维度全面掌控项目进展。

👉 非常适合应用于：
工程项目管理 / 研发项目管理 / 制造业项目排程 / IT 项目管理系统

从开发者视角看 PERT 模式的价值

在此前版本中，开发者虽然也可以通过 Diagram 默认模式手动构建 PERT 图，但往往需要：

自定义图形模板
手动布局与排列
处理复杂的节点组织逻辑

而 PERT 模式的推出，正是为了解决这一"高成本可视化"问题：

内置 PERT 专用布局算法
提供 预定义的 PERT 图形元素
简化配置与数据准备流程

让开发者可以 更快、更规范地构建专业级 PERT 图。

如何启用 PERT 模式？

在 Diagram 初始化时，只需指定新增的type: "pert"配置即可：

复制代码

const diagram = new dhx.Diagram("diagram_container", {
    type: "pert",
});
diagram.data.parse(dataset);

同时，PERT 模式支持通过typeConfig中的dateFormat参数，灵活控制界面中的日期显示格式。

特别说明 ：

PERT 模式的数据结构与 DHTMLX Gantt 完全一致，这是实现 Diagram 与 Gantt 数据同步的关键基础。

内置 PERT 图形元素，一应俱全

DHTMLX Diagram 的 PERT 模式默认包含三类核心元素：

1️⃣ 任务（Task）

表示具体项目任务
支持开始时间、结束时间、工期等信息

2️⃣ 里程碑（Milestone）

表示关键节点
无持续时间，仅标识关键事件

3️⃣ 项目组（Project Group）

作为任务与里程碑的容器
支持嵌套与可视化分组

在数据配置层面，任务与里程碑继承 Diagram 组件中其他内置图形的通用属性，而项目组则具备完整的分组能力，部分属性可在渲染时自动生成。

强大的自定义能力，PERT 模式同样适用

延续 DHTMLX 一贯的高可扩展性，PERT 模式同样支持丰富的定制化能力，包括但不限于：

自定义搜索栏

自定义 PERT 图形样式

定制主题风格

自定义侧边栏与交互面板

无论是企业级系统集成，还是面向最终用户的产品化应用，都可以灵活适配 UI 与业务需求。

Diagram 编辑器增强：快捷键与交互控制更灵活

快捷键（Hotkeys）精细化管理

从 6.1 版本开始，Diagram Editor 新增hotkeys配置项，开发者可以：

完全禁用所有快捷键
禁用指定快捷键
重写快捷键行为，或新增自定义快捷键

这对于需要 统一交互规范 或 限制用户操作行为 的企业级应用尤为重要。

图形交互控制更细粒度

在以往版本中，fixed: true只能"一刀切"地禁止移动、缩放和旋转。

6.1 版本新增了一组更精细的事件机制，可分别控制：

缩放前 / 后
旋转前 / 后
操作结束时的业务校验逻辑

帮助开发者更精准地约束用户行为，满足复杂业务场景。

慧都总结

DHTMLX Diagram 6.1 虽然是一次"小版本"更新，但在 项目管理可视化能力 和 编辑器可控性 方面带来了实质性的提升。尤其是 PERT 模式 + Gantt 甘特图的组合方案，非常适合构建专业级项目管理系统。