近日，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 版本新增了一組更精細的事件機制，可分別控制：
-
縮放前 / 後
-
旋轉前 / 後
-
操作結束時的業務校驗邏輯
幫助開發者更精準地約束用户行為，滿足複雜業務場景。
更多示例與 Demo 同步上線
本次更新還同步發佈了多項示例資源，包括：
-
DHTMLX Diagram 組織架構圖 AI Builder Demo
-
PERT 模式完整示例
-
魚骨圖示例
-
交互式電氣原理圖
-
PDF / PNG 導出水印示例
進一步拓展 Diagram 在智能可視化領域的應用邊界。
總結
DHTMLX Diagram 6.1 雖然是一次“小版本”更新，但在 項目管理可視化能力 和 編輯器可控性 方面帶來了實質性的提升。尤其是 PERT 模式 + Gantt 甘特圖的組合方案，非常適合構建專業級項目管理系統。
DHTMLX Diagram 最新版官方試用下載，請聯繫慧都科技
