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

DHTMLX Diagram正版試用下載

什么是 Javascript 流程圖？

可以將 javascript 流程圖（也稱為 javascript 工作流圖、過程流或簡稱流程圖）集成到應(yīng)用程序中，以實(shí)現(xiàn)公司活動的可視化。它可以反映整個(gè)業(yè)務(wù)過程、某些部門的工作流程或單個(gè)操作的步驟。圖表的范圍完全取決于最終用戶的需求。

讓我們看一下構(gòu)建流程圖可能有用的一些情況：

• 使用此圖表類型說明流程有助于公司成員更好地理解此流程及其包含的內(nèi)容。
• 通過流程圖中詳細(xì)的工作流程表示，查找錯(cuò)誤、缺點(diǎn)和弱點(diǎn)變得更加容易。
• 流程圖對于向同事或團(tuán)隊(duì)成員解釋復(fù)雜的問題非常有效，因?yàn)樗鼈儠鸩斤@示流程。
• 這些圖表也可以在頭腦風(fēng)暴時(shí)使用，以可視化問題、解決問題的方法或應(yīng)該改進(jìn)的地方。

如您所見，js 流程圖有許多不同的用途。因此，它們被應(yīng)用于廣泛的領(lǐng)域。我們將舉幾個(gè)例子。

流程圖在編程中經(jīng)常用于描述復(fù)雜的序列和主題，例如用戶在網(wǎng)站上的路徑、代碼結(jié)構(gòu)或軟件架構(gòu)。

業(yè)務(wù)建模還受益于 js 工作流圖，用于說明業(yè)務(wù)流程、構(gòu)建策略、可視化基礎(chǔ)架構(gòu)和其他目標(biāo)。

流程圖被認(rèn)為是項(xiàng)目經(jīng)理的便捷工具，因?yàn)樗鼈兎浅＿m合顯示項(xiàng)目的步驟。

流程圖在企業(yè)資源規(guī)劃領(lǐng)域也很流行，用于展示人力、財(cái)務(wù)、制造或任何其他資源的流動。

此外，它們經(jīng)常應(yīng)用于科學(xué)方法和研究。

流程圖如何幫助可視化數(shù)據(jù)

由于這種圖表類型具有多種圖形元素特征，因此可以通過多種方式使用流程圖來可視化數(shù)據(jù)。您可以以獨(dú)特的方式組合流程圖元素來說明您的需要。

我們的庫提供了30 多種不同類型的流程圖形狀，每種類型都用于特定目的。以下是最常用的形狀：

在許多情況下，流程圖以“開始”形狀開始，以“結(jié)束”形狀結(jié)束，這標(biāo)志著流程的開始和結(jié)束點(diǎn)。

“流程”形狀被繪制在流程圖的中間，作為流程的某些步驟，例如，作為用戶在網(wǎng)站上要采取的行動。同時(shí)，流程步驟基于描述流程流動條件（例如，用戶未登錄）的“準(zhǔn)備”形狀。

“或”形狀允許添加前面步驟的幾個(gè)可能結(jié)果。

您還可以使用“子程序”形狀，它們是鏈接到另一個(gè)流程圖中現(xiàn)有流程的預(yù)定義流程形狀。

其他常見形狀包括“數(shù)據(jù)庫”和“文檔”形狀。他們的名字不言而喻。

除了形狀之外，連接線對于構(gòu)建流程圖也起著重要作用，因?yàn)樗鼈冿@示了流程圖元素如何相互關(guān)聯(lián)并確保您的圖表被正確閱讀。

為什么使用 DHTMLX 圖構(gòu)建 Javascript 流程圖

能夠操作流程圖對于工作流可視化非常重要。豐富而靈活的 API 讓您有機(jī)會實(shí)現(xiàn)您使用我們的 javascript/html5 工作流圖設(shè)定的任何目標(biāo)。

1. 使用多個(gè)配置選項(xiàng)設(shè)置流程圖元素
當(dāng)您開始使用 DHTMLX 構(gòu)建 JavaScript 流程圖時(shí)，您肯定會喜歡大量有用的配置選項(xiàng)。在這里，您有機(jī)會指定形狀和線條的默認(rèn)類型、形狀之間的邊距、帶有形狀圖標(biāo)的工具欄、工具提示等等。

如果您需要我們庫中可用的任何特定流程圖形狀類型，只需將其設(shè)置為形狀對象內(nèi)類型屬性中的值。同樣，單個(gè)連接器的線型是使用線對象中的類型屬性指定的。為了在為復(fù)雜流程圖準(zhǔn)備數(shù)據(jù)時(shí)節(jié)省時(shí)間，您可以使用默認(rèn) 屬性一次為所有形狀和連接線指定默認(rèn)配置。這種方法還有助于提高代碼的可讀性。在我們文檔的這一部分查看配置選項(xiàng)的完整列表。

2. 對每個(gè)流程圖元素進(jìn)行自定義和樣式化以根據(jù)您的需要對其進(jìn)行定制
我們的 JavaScript 圖表庫的另一個(gè)關(guān)鍵優(yōu)勢是其增強(qiáng)的可定制性。您可以在它們的對象中使用形狀和連接線的樣式設(shè)置并重新定義相應(yīng)的 CSS 類。因此，根據(jù)項(xiàng)目的要求調(diào)整主要流程圖元素的外觀將不是問題。形狀中的文本內(nèi)容可以通過內(nèi)聯(lián)編輯輕松更改。

如果這還不夠，可以創(chuàng)建自定義流程圖形狀并為它們定義模板。要將您自己的形狀添加到流程圖，您應(yīng)該使用addShape方法。訪問此頁面以了解有關(guān) DHTMLX 圖表的自定義功能的更多信息。

3. 通過 API 自由操作形狀以在需要時(shí)進(jìn)行更改
我們的 js 流程圖在通過組件的 API 操作圖表項(xiàng)目時(shí)非常靈活。

例如，如果您想構(gòu)建一個(gè)大型流程圖，則無需費(fèi)心去按正確的順序安排整個(gè)結(jié)構(gòu)。有一種特殊的自動布局算法可以更快地完成這項(xiàng)工作。該算法將一組隨機(jī)鏈接的形狀轉(zhuǎn)換為具有形狀正交或徑向定位的漂亮層次結(jié)構(gòu)。在自動放置期間，可以使用對角線（直接模式）或直角（邊緣模式）連接線連接形狀。

此功能以兩種方式啟用：

• 使用自動放置屬性：

const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

diagram.autoPlace({
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial"
});

• 使用autoPlace()方法：

const diagram = new dhx.Diagram(document.body, {
type: "default",
autoplacement: {
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial",
}
});

還可以隨時(shí)添加新形狀、刪除舊形狀，甚至可以使用相關(guān)的數(shù)據(jù)收集 API 從頭開始繪制圖表。
add方法使您能夠向流程圖添加新形狀：

diagram.data.add({id:"3.2", text:"New Item", parent:"3"});

刪除一些你不需要的形狀，甚至全部都可以用remove方法來完成：

diagram.data.remove(3.2);
diagram.data.removeAll();

如果您對現(xiàn)有的形狀感到滿意，但它們的內(nèi)容需要改進(jìn)，您可以應(yīng)用更新方法將新數(shù)據(jù)放入您的形狀中。

diagram.data.update("1", {text:"Some new text"});

4. 使寬流程圖易于閱讀和分析
由于具有縮放和滾動功能，包含大量數(shù)據(jù)的寬流程圖不會再給您和您的最終用戶帶來麻煩。考慮到流程圖的大小，您可以在scale屬性的幫助下放大或縮小

var diagram = new dhx.Diagram (diagram"diagram_container", {type: "org", scale: 0.7});
diagram.data.parse(data);

另一種選擇是添加水平和/或垂直滾動以查看流程圖。

為了方便最終用戶使用復(fù)雜的結(jié)構(gòu)進(jìn)行工作，您還可以使用泳道來補(bǔ)充流程圖，這有助于將整個(gè)可視化過程劃分為單獨(dú)的階段，如本示例中所示。

這里的一個(gè)更有用的功能是能夠通過連接線上的標(biāo)題來闡明流程圖中棘手的部分。

5. 將流程圖導(dǎo)出為 PNG 和 PDF

如果您將流程圖導(dǎo)出為 png 或 pdf，則可以輕松保存、存儲和與他人共享您的過程可視化。
pdf或 png 導(dǎo)出方法不僅允許按原樣導(dǎo)出圖表，還允許調(diào)整導(dǎo)出設(shè)置：

//export with config settings
diagram.export.png({
type:"jpeg"
fullPage: true
});

6. 提供無縫的前端和后端集成
真正重要的是，我們的 javascript 流程圖可以集成到使用任何客戶端和服務(wù)器端技術(shù)構(gòu)建的任何 Web 應(yīng)用程序中。數(shù)據(jù)可以很容易地以 JSON 格式加載到圖表中。我們提供的演示可讓您清楚地了解如何將 DHTMLX Diagram 集成到基于流行的 JavaScript 框架（Angular、React、Vue.js）的應(yīng)用程序中。使用 DHTMLX Diagram，您的流程圖將在任何觸摸設(shè)備和所有現(xiàn)代瀏覽器中表現(xiàn)同樣出色。

7. 在 DHTMLX 圖表編輯器中構(gòu)建流程圖
作為常用編碼方法的替代方法，您還可以使用圖表編輯器。它作為我們圖表庫的輔助工具，具有三種操作模式（默認(rèn)、組織結(jié)構(gòu)圖、思維導(dǎo)圖）。通過將編輯器嵌入您的應(yīng)用程序，您將使最終用戶能夠以無代碼的方式使用 30 多種內(nèi)置形狀構(gòu)建流程圖和其他類型的圖表。它有一個(gè)用戶友好的界面，支持拖放，由四個(gè)主要部分組成：

• 用于控制整個(gè)編輯過程的工具欄，
• 用于選擇所需形狀的左側(cè)面板，
• 用于與形狀交互的網(wǎng)格區(qū)域，
• 用于更改圖表外觀的右側(cè)面板。

在功能方面，編輯器支持圖表組件的主要功能，如自動布局算法、自定義形狀、泳線、內(nèi)聯(lián)編輯等。為了方便使用自定義形狀，您可以自定義編輯器的兩個(gè)面板。

除此之外，編輯器還提供了一些獨(dú)特的功能。例如，可以選擇多個(gè)形狀并同時(shí)執(zhí)行一些基本操作（拖動、復(fù)制、粘貼、刪除）、為形狀設(shè)置自定義工具欄、使用特殊的熱鍵組合加快相似形狀的樣式設(shè)置等等。

除了自動布局算法之外，最終用戶還能夠使用捕捉線和多個(gè)對齊和分布選項(xiàng)在編輯器中準(zhǔn)確地組織形狀。

結(jié)論

使用 DHTMLX Diagram，您可以獲得多種功能，可以通過 JavaScript 流程圖可視化任何復(fù)雜的過程。這種類型的圖表可以以一致的結(jié)構(gòu)反映任何相互關(guān)聯(lián)的事實(shí)。您可以應(yīng)用它來說明您需要的任何內(nèi)容，并獲得非常具有描述性和直觀性的可視化效果。

我們確實(shí)希望我們的文章能幫助您了解流程圖的特性并使用 DHTMLX 創(chuàng)建您自己的 JavaScript 過程流程圖。

我們的文檔為開發(fā)人員提供了有關(guān)如何構(gòu)建流程圖以及 DHTMLX 圖表庫中包含的其他圖表類型的更多詳細(xì)信息。

如果您想立即嘗試 javascript 流程圖，只需下載我們的。

DHTMLX 享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺，性價(jià)比高，可滿足項(xiàng)目管理控件應(yīng)用的所有需求，是最完善的甘特圖圖表庫。

甘特圖控件交流群：764148812   

歡迎進(jìn)群交流討論，獲取更多幫助請聯(lián)系