dhtmlxDiagram是一個圖表庫，只需幾行代碼就能生成任何你需要的圖表。借助自動布局和實時圖編輯器，以整齊的層次結構可視化復雜數據。JavaScript dhtmlxDiagram允許您向Web應用程序中添加漂亮的交互式圖表，圖表和圖形。借助這種輕巧而快速的組件，您的數據將以清晰直觀的方式表示。

點擊下載dhtmlxDiagram試用版

您是否曾經嘗試用自然語言描述項目的工作流程或業務流程？您的工作效率很可能會很低，因為此類任務需要特殊的工具，例如JavaScript數據流程圖。這是可以用DHTMLX圖表生成的另一種有用的圖表。有趣的是，即使不編寫任何代碼也可以做到！了解這篇文章中的所有詳細信息。

什么是數據流程圖

數據流程圖（通常縮寫為DFD）是用于結構化分析的流行數據可視化工具。這種類型的圖表有助于清楚地呈現系統內的轉換過程，由給定系統處理的數據或物理材料的集合，以及過程，存儲庫和外部世界之間的信息或材料流。

DFD可以具有旨在描述系統中某些復雜過程的多個分解級別。這些級別從基本的命名上下文圖（僅提供一個關鍵流程即可提供數據流的整體視圖）到更復雜的結構（標有從0開始的數字（低級DFD），并輔以多個子流程）有所不同。這種方法非常適合事務處理系統和功能密集型應用程序。

有幾種符號定義用于顯示數據流程圖元素的特殊幾何符號。所有符號之間的主要視覺差異在于呈現DFD過程。為此，Yourdon＆Coad和Gane＆Sarson這兩種最受歡迎的符號類型分別使用圓形和圓角矩形。

現在，讓我們考慮任何JavaScript數據流程圖的四個主要組成部分以及構建此圖表類型時應考慮的一些規則。

外部實體

處理

數據存儲

數據存儲表示系統中可以由給定進程檢索或產生的持久性數據存儲庫。顯示為開放式矩形或兩條平行線，數據存儲區不會單獨運行，而是始終與相關進程交互。未經修改，新數據不能出現在數據存儲中或移動到外部實體或其他數據存儲中。

數據流

JavaScript數據流程圖使分析各種類型和復雜程度的需求和模型系統變得更加容易，并有助于提高效率。DFD在提供數據如何在系統中移動的全局視圖方面比其他工具更好。因此，此有用的圖表經常被專業人員采用，以應用于不同的領域，例如：

• 軟件開發
• 商業分析
• 項目管理建模

我們的示例使用Yourdon＆Coad標記類型演示了運輸公司的備件跟蹤系統中信息和物理物料的流動。0級數據流程圖的體系結構包括以下組件：

• 外部實體（機械，庫房人員，供應商）顯示了外部方如何與系統交互。機械師發送備件請求并接收備件包。可使用倉庫人員和賣方分別提供的庫存備件和訂購備件信息來滿足此請求。實體以淡粉紅色矩形表示。
• 清楚描述提供一整套備件所需的操作順序的過程。它們用枚舉的綠色圓圈顯示。
• 數據存儲用于保存/檢索零件請求和零件庫庫存的信息。這些元素以開放式矩形的形式顯示。
• 數據流通過帶有澄清說明的有向藍線指定系統內信息的傳輸路徑。

除了本指南中描述的傳統編碼方法外，DHTMLX Diagram還使您可以使用Diagram Editor快速創建JavaScript數據流程圖。

這個功能豐富的工具可用于構建圖，而無需進行編碼操作。它提供了一組預定義的圖形形狀，連接器和編輯選項。如果您打算使用JavaScript和Yourdon＆Coad以外的其他符號類型來構建數據流程圖，則可以使用自定義形狀輕松地豐富圖編輯器。該編輯器可以平滑地集成到任何Web應用程序中，并可以通過靈活的API對其進行調整。
圖表編輯器的用戶友好界面有助于最大程度地縮短其學習曲線。通過工具欄中的導入選項將帶有DFD的JSON文件

• 安排數據流程圖的結構

• 編輯數據流程圖的節點和連接器

如果要使圖表看起來唯一，則編輯器的右側面板提供了許多編輯選項。例如，您可以為每個形狀更精確地定義尺寸和位置，對形狀和連接器應用筆觸修改，更改顏色，并利用多種文本編輯功能。

• 導出和導入JavaScript數據流程圖

圖表準備就緒后，您可以通過導出功能與他人共享它，該功能允許將JavaScript數據流程圖轉換為PDF，PNG和JSON格式。并且，如果您發現有關如何使已完成的圖更好的新想法，只需單擊幾下，即可將以JSON格式保存的圖導入編輯器，并進行必要的更改。

如您所見，圖編輯器是一個簡單但有效的工具，可輕松為您的項目生成漂亮的數據流程圖。

最后的話

在本指南中，我們回顧了JavaScript中數據流程圖的主要特性，并學習了如何使用DHTMLX創建它。

綜上所述，DHTMLX JavaScript圖庫可以擴展任何Web項目中的數據可視化功能。它帶有豐富且直觀的API，可通過編碼進行圖表繪制，并提供了Diagram Editor工具來完成這項工作而無需進行編程。

APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率

想要購買dhtmlxDiagram正版授權，或了解慧都APS系統請點擊