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

金光普地 發表於 2025-12-17 14:10:00

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

<img src="https://image.evget.com/attachment/keditor/image/20251217/103547_6.png">近日，JavaScript图表库DHTMLX Diagram 6.1 正式版本。本次版本更新带来了全新的 PERT 可视化模式，并在无代码/低代码流程图编辑体验方面实现了更高的灵活性与可控性。同时，Diagram 编辑器在快捷键管理与图形交互控制上也迎来了多项重要增强。
DHTMLX Diagram 最新版官方试用下载，请联系慧都科技
<hr>
<h3>全新 PERT 模式：让项目规划更清晰</h3>
<h4>什么是 PERT 模式？</h4>
DHTMLX Diagram 6.1 新增的 PERT（计划评审技术）模式，为 Web 应用提供了一种更加专业、高效的方式来构建 PERT 图。
PERT 图通常用于：
<ul>
<li>
展示项目任务之间的先后关系与依赖关系
</li>
<li>
分析关键路径
</li>
<li>
评估整体项目周期与风险
</li>
</ul>
<img src="https://image.evget.com/attachment/keditor/image/20251217/112925_2.png">
通过清晰的结构化可视化，项目管理人员可以更快速地理解项目全貌，辅助决策。
<hr>
<h3>PERT 图与甘特图数据同步，项目管理更完整</h3>
此次新增的 PERT 模式，并不是孤立存在的可视化形态，而是 DHTMLX Gantt 甘特图的强力补充。
<ul>
<li>
PERT 图：适用于项目早期规划阶段，关注任务逻辑与依赖
</li>
<li>
甘特图：适用于执行阶段，关注时间轴、进度与资源跟踪
</li>
</ul>
通过 Diagram + Gantt 的数据结构统一与同步机制，开发者可以在同一套数据源下，实现两种视图的无缝切换，帮助项目经理从不同维度全面掌控项目进展。
<img src="https://image.evget.com/2025/12/17/measures145k8zb52x885yw.gif">
👉 非常适合应用于： 工程项目管理 / 研发项目管理 / 制造业项目排程 / IT 项目管理系统
<hr>
<h3>从开发者视角看 PERT 模式的价值</h3>
在此前版本中，开发者虽然也可以通过 Diagram 默认模式手动构建 PERT 图，但往往需要：
<ul>
<li>
自定义图形模板
</li>
<li>
手动布局与排列
</li>
<li>
处理复杂的节点组织逻辑
</li>
</ul>
而 PERT 模式的推出，正是为了解决这一“高成本可视化”问题：
<ul>
<li>
内置 PERT 专用布局算法
</li>
<li>
提供 预定义的 PERT 图形元素
</li>
<li>
简化配置与数据准备流程
</li>
</ul>
让开发者可以 更快、更规范地构建专业级 PERT 图。
<hr>
<h3>如何启用 PERT 模式？</h3>
在 Diagram 初始化时，只需指定新增的type: "pert"配置即可：
<pre class="prettyprint lang-js highlighter-hljs"><code>const diagram = new dhx.Diagram("diagram_container", {
type: "pert",
});
diagram.data.parse(dataset);</code></pre>
同时，PERT 模式支持通过typeConfig中的dateFormat参数，灵活控制界面中的日期显示格式。
特别说明： PERT 模式的数据结构与 DHTMLX Gantt 完全一致，这是实现 Diagram 与 Gantt 数据同步的关键基础。
<hr>
<h3>内置 PERT 图形元素，一应俱全</h3>
DHTMLX Diagram 的 PERT 模式默认包含三类核心元素：
<h4>1️⃣ 任务（Task）</h4>
<ul>
<li>
表示具体项目任务
</li>
<li>
支持开始时间、结束时间、工期等信息
</li>
</ul>
<h4>2️⃣ 里程碑（Milestone）</h4>
<ul>
<li>
表示关键节点
</li>
<li>
无持续时间，仅标识关键事件
</li>
</ul>
<h4>3️⃣ 项目组（Project Group）</h4>
<ul>
<li>
作为任务与里程碑的容器
</li>
<li>
支持嵌套与可视化分组
</li>
</ul>
在数据配置层面，任务与里程碑继承 Diagram 组件中其他内置图形的通用属性，而项目组则具备完整的分组能力，部分属性可在渲染时自动生成。
<hr>
<h3>强大的自定义能力，PERT 模式同样适用</h3>
延续 DHTMLX 一贯的高可扩展性，PERT 模式同样支持丰富的定制化能力，包括但不限于：
<ul>
<li>
自定义搜索栏
</li>
</ul>
<img src="https://image.evget.com/2025/12/17/measuregqdr6wrmd7sj11b5.gif">
<ul>
<li>
自定义 PERT 图形样式
</li>
</ul>
<img src="https://image.evget.com/2025/12/17/QQ20251203-1014326f492yba2guyej73.png">
<ul>
<li>
定制主题风格
</li>
</ul>
<img src="https://image.evget.com/2025/12/17/measurexks0ycqlkwd0z5gi.gif">
<ul>
<li>
自定义侧边栏与交互面板
</li>
</ul>
<img src="https://image.evget.com/attachment/keditor/image/20251217/113749_0.png">
无论是企业级系统集成，还是面向最终用户的产品化应用，都可以灵活适配 UI 与业务需求。
<hr>
<h1>Diagram 编辑器增强：快捷键与交互控制更灵活</h1>
<h4>快捷键（Hotkeys）精细化管理</h4>
从 6.1 版本开始，Diagram Editor 新增hotkeys配置项，开发者可以：
<ul>
<li>
完全禁用所有快捷键
</li>
<li>
禁用指定快捷键
</li>
<li>
重写快捷键行为，或新增自定义快捷键
</li>
</ul>
这对于需要 统一交互规范 或 限制用户操作行为 的企业级应用尤为重要。
<hr>
<h4>图形交互控制更细粒度</h4>
在以往版本中，fixed: true只能“一刀切”地禁止移动、缩放和旋转。
6.1 版本新增了一组更精细的事件机制，可分别控制：
<ul>
<li>
缩放前 / 后
</li>
<li>
旋转前 / 后
</li>
<li>
操作结束时的业务校验逻辑
</li>
</ul>
帮助开发者更精准地约束用户行为，满足复杂业务场景。
<hr>
<h3>更多示例与 Demo 同步上线</h3>
本次更新还同步发布了多项示例资源，包括：
<ul>
<li>
DHTMLX Diagram 组织架构图 AI Builder Demo
</li>
<li>
PERT 模式完整示例
</li>
<li>
鱼骨图示例
</li>
<li>
交互式电气原理图
</li>
<li>
PDF / PNG 导出水印示例
</li>
</ul>
进一步拓展 Diagram 在智能可视化领域的应用边界。
<hr>
<h3>总结</h3>
DHTMLX Diagram 6.1 虽然是一次“小版本”更新，但在 项目管理可视化能力 和 编辑器可控性 方面带来了实质性的提升。尤其是 PERT 模式 + Gantt 甘特图的组合方案，非常适合构建专业级项目管理系统。
DHTMLX Diagram 最新版官方试用下载，请联系慧都科技 
来源：https://www.cnblogs.com/software-Development/p/19361961

頁: [1]

琼殿技术论坛's Archiver

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