91青青青,理论片第一页,亚洲精品久久鸭子

交互式圖表dhtmlxDiagram教程：如何在JavaScript中創建數據流程圖

翻譯|使用教程|編輯：楊鵬連|2021-01-04 09:40:26.803|閱讀 336 次

概述：您是否曾經嘗試用自然語言描述項目的工作流程或業務流程？您的工作效率很可能會很低，因為此類任務需要特殊的工具，例如JavaScript數據流程圖。

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

點擊下載dhtmlxDiagram試用版

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

什么是數據流程圖

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

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

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

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

外部實體

它是一個圖元素（也稱為終結器），用于將數據引入系統或從中獲取處理后的數據。該組件不是系統本身的一部分，它揭示了系統如何與外界通信。實體可以由各種對象表示，例如人，外部系統或組織。未經處理的信息不能在實體之間直接交換，也不能被任何實體從系統接收。實體以矩形表示，并以名詞命名。

處理

信息流期間的任何數據更改都通過流程發生。它是最引人注目的DFD參數，它接收傳入的數據并使用特定的操作（計算，排序等）生成輸出。該圖可以包括一個或多個過程，每個過程都以自己的方式處理數據。沒有至少一個輸入點和一個輸出點，DFD進程將不存在（同一規則適用于數據存儲）。流程通過數據存儲進行交互，而不是通過流程之間的直接流進行交互。根據符號類型的不同，可以用圓形或圓角矩形說明此組件。通常，枚舉的“動詞+名詞”組合用于標記DFD過程，以解釋輸入數據發生了什么。

數據存儲

DFD??-?????°??®?-???¨

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

數據流

它是一個有向箭頭，指示圖的其他元素之間的數據移動方向。每個箭頭均通過文字加以說明，說明正在發送/接收的數據。

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

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

DHTMLX編寫的JavaScript數據流程圖的示例

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

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

如何使用DHTMLX構建JavaScript數據流程圖

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

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

上傳到DHTMLX圖表編輯器，并使用我們的JavaScript數據流程圖示例

現在，讓我們看一下DHTMLX圖的關鍵功能，這些功能將幫助您構建自己的JavaScript數據流程圖。

安排數據流程圖的結構

??°??®?μ??¨????

使用左側面板，可以添加創建數據流程圖所需的所有內置形狀。只需從顯示的列表中拖動所需的形狀，將其放在網格區域中，然后使用旋轉功能將其正確定位。由于您需要每個DFD形狀的多個實例，因此可以在單擊形狀時出現的相應選項的幫助下創建副本。如果您不想浪費時間分別調整每個形狀，則此功能特別有用。要相互鏈接形狀，應選擇一個連接器，如上圖所示。