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

點(diǎn)擊下載dhtmlxDiagram試用版

您是否曾經(jīng)嘗試用自然語(yǔ)言描述項(xiàng)目的工作流程或業(yè)務(wù)流程？您的工作效率很可能會(huì)很低，因?yàn)榇祟惾蝿?wù)需要特殊的工具，例如JavaScript數(shù)據(jù)流程圖。這是可以用DHTMLX圖表生成的另一種有用的圖表。有趣的是，即使不編寫任何代碼也可以做到！了解這篇文章中的所有詳細(xì)信息。

什么是數(shù)據(jù)流程圖

數(shù)據(jù)流程圖（通常縮寫為DFD）是用于結(jié)構(gòu)化分析的流行數(shù)據(jù)可視化工具。這種類型的圖表有助于清楚地呈現(xiàn)系統(tǒng)內(nèi)的轉(zhuǎn)換過(guò)程，由給定系統(tǒng)處理的數(shù)據(jù)或物理材料的集合，以及過(guò)程，存儲(chǔ)庫(kù)和外部世界之間的信息或材料流。

DFD可以具有旨在描述系統(tǒng)中某些復(fù)雜過(guò)程的多個(gè)分解級(jí)別。這些級(jí)別從基本的命名上下文圖（僅提供一個(gè)關(guān)鍵流程即可提供數(shù)據(jù)流的整體視圖）到更復(fù)雜的結(jié)構(gòu)（標(biāo)有從0開(kāi)始的數(shù)字（低級(jí)DFD），并輔以多個(gè)子流程）有所不同。這種方法非常適合事務(wù)處理系統(tǒng)和功能密集型應(yīng)用程序。

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

現(xiàn)在，讓我們考慮任何JavaScript數(shù)據(jù)流程圖的四個(gè)主要組成部分以及構(gòu)建此圖表類型時(shí)應(yīng)考慮的一些規(guī)則。

外部實(shí)體

處理

數(shù)據(jù)存儲(chǔ)

數(shù)據(jù)存儲(chǔ)表示系統(tǒng)中可以由給定進(jìn)程檢索或產(chǎn)生的持久性數(shù)據(jù)存儲(chǔ)庫(kù)。顯示為開(kāi)放式矩形或兩條平行線，數(shù)據(jù)存儲(chǔ)區(qū)不會(huì)單獨(dú)運(yùn)行，而是始終與相關(guān)進(jìn)程交互。未經(jīng)修改，新數(shù)據(jù)不能出現(xiàn)在數(shù)據(jù)存儲(chǔ)中或移動(dòng)到外部實(shí)體或其他數(shù)據(jù)存儲(chǔ)中。

數(shù)據(jù)流

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

• 軟件開(kāi)發(fā)
• 商業(yè)分析
• 項(xiàng)目管理建模

我們的示例使用Yourdon＆Coad標(biāo)記類型演示了運(yùn)輸公司的備件跟蹤系統(tǒng)中信息和物理物料的流動(dòng)。0級(jí)數(shù)據(jù)流程圖的體系結(jié)構(gòu)包括以下組件：

• 外部實(shí)體（機(jī)械，庫(kù)房人員，供應(yīng)商）顯示了外部方如何與系統(tǒng)交互。機(jī)械師發(fā)送備件請(qǐng)求并接收備件包。可使用倉(cāng)庫(kù)人員和賣方分別提供的庫(kù)存?zhèn)浼陀嗁?gòu)備件信息來(lái)滿足此請(qǐng)求。實(shí)體以淡粉紅色矩形表示。
• 清楚描述提供一整套備件所需的操作順序的過(guò)程。它們用枚舉的綠色圓圈顯示。
• 數(shù)據(jù)存儲(chǔ)用于保存/檢索零件請(qǐng)求和零件庫(kù)庫(kù)存的信息。這些元素以開(kāi)放式矩形的形式顯示。
• 數(shù)據(jù)流通過(guò)帶有澄清說(shuō)明的有向藍(lán)線指定系統(tǒng)內(nèi)信息的傳輸路徑。

除了本指南中描述的傳統(tǒng)編碼方法外，DHTMLX Diagram還使您可以使用Diagram Editor快速創(chuàng)建JavaScript數(shù)據(jù)流程圖。

這個(gè)功能豐富的工具可用于構(gòu)建圖，而無(wú)需進(jìn)行編碼操作。它提供了一組預(yù)定義的圖形形狀，連接器和編輯選項(xiàng)。如果您打算使用JavaScript和Yourdon＆Coad以外的其他符號(hào)類型來(lái)構(gòu)建數(shù)據(jù)流程圖，則可以使用自定義形狀輕松地豐富圖編輯器。該編輯器可以平滑地集成到任何Web應(yīng)用程序中，并可以通過(guò)靈活的API對(duì)其進(jìn)行調(diào)整。
圖表編輯器的用戶友好界面有助于最大程度地縮短其學(xué)習(xí)曲線。通過(guò)工具欄中的導(dǎo)入選項(xiàng)將帶有DFD的JSON文件

• 安排數(shù)據(jù)流程圖的結(jié)構(gòu)

• 編輯數(shù)據(jù)流程圖的節(jié)點(diǎn)和連接器

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

• 導(dǎo)出和導(dǎo)入JavaScript數(shù)據(jù)流程圖

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

如您所見(jiàn)，圖編輯器是一個(gè)簡(jiǎn)單但有效的工具，可輕松為您的項(xiàng)目生成漂亮的數(shù)據(jù)流程圖。

最后的話

在本指南中，我們回顧了JavaScript中數(shù)據(jù)流程圖的主要特性，并學(xué)習(xí)了如何使用DHTMLX創(chuàng)建它。

綜上所述，DHTMLX JavaScript圖庫(kù)可以擴(kuò)展任何Web項(xiàng)目中的數(shù)據(jù)可視化功能。它帶有豐富且直觀的API，可通過(guò)編碼進(jìn)行圖表繪制，并提供了Diagram Editor工具來(lái)完成這項(xiàng)工作而無(wú)需進(jìn)行編程。

APS幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)計(jì)劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場(chǎng)景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率

想要購(gòu)買dhtmlxDiagram正版授權(quán)，或了解慧都APS系統(tǒng)請(qǐng)點(diǎn)擊