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

點擊下載dhtmlxDiagram試用版

JavaScript活動圖表示庫中的UML圖。它們的主要目的是描述分步活動并提供指導。您可以在我們的dhtmlxDiagram 30天試用版中測試此圖類型。

UML中的活動圖反映了系統(tǒng)或人員的行為。因此，它們通常被定義為行為圖。這意味著它們用于顯示某些情況下在考慮不同場景的情況下的行為。

此圖類型在業(yè)務分析中廣泛傳播，用于說明特定的業(yè)務用例和其中涉及的活動。但是，甚至可以在描述任何工作流程的更大范圍內(nèi)應用UML活動圖，它顯示了事件過程中所有可能發(fā)生的情況。

活動圖的另一個使用領(lǐng)域是編程。開發(fā)人員使用此圖類型來制定系統(tǒng)或程序的行為方式。它涉及簡單的操作和更復雜的功能。

如何繪制活動圖

UML活動圖的區(qū)別在于可以說明并行活動。例如，我們上面看過的第一個活動圖描述了準備房間和筆記本電腦以滿足客戶需求的必要性，這由指向兩個不同矩形形狀的平行箭頭表示。

當發(fā)生錯誤或其他不利事件，并且箭頭指向要重復的先前活動之一時，這些圖還可以包括迭代。

活動圖通常使用3種形狀來構(gòu)建：

圓形標記活動圖的起點和終點。

矩形反映了活動本身-需要做什么。

決策形狀是一個十字路口，有兩種或多種可能的方法可以遵循。當一項活動導致多個結(jié)果時，就會發(fā)生這種情況，從而導致下一步需要采取不同的步驟。箭頭從決策形狀中流出，并指向單獨的矩形以創(chuàng)建用于進一步活動的幾種方案。

此外，這些圖還可以包括其他流程圖形狀，例如，以說明與另一個圖的連接。

節(jié)點與顯示活動流程的箭頭鏈接。為了使圖更具描述性，通常在形狀和箭頭附近提供文字注釋。

使用DHTMLX構(gòu)建Javascript活動圖的技巧

dhtmlxDiagram庫由許多圖表類型組成，例如flowhcarts，組織結(jié)構(gòu)圖，決策樹和UML活動圖。所有這些JavaScript圖都是高度可定制的，可以在所有主要的Web瀏覽器中很好地呈現(xiàn)，并且可以很容易地使用任何服務器端技術(shù)進行構(gòu)建。我們廣泛的API為您提供了很多操作，可以完全根據(jù)您的需求定制圖表。

在下面，您可以通過CSS以及形狀和連接器的對象屬性來檢查此活動圖的配置：

<style>
        html,body,.cont{
            background: #FFF;
        }
        .dhx_diagram{
            background: #FFF;
        }
        .dhx_free_diagram .dhx_diagram_flow_item text{
            fill:#FFF;
        }
        .dhx_free_diagram .dhx_item_shape{
            fill:#478D99;
            stroke:none;
        }
        .decision .dhx_item_shape{
            fill:#F7D768;
        }
        .start .dhx_item_shape{
            fill:#FE9998;
        }
        .dhx_free_diagram .dhx_diagram_line{
            stroke: #7D8495;
        }
        .dhx_free_diagram .dhx_diagram_arrow{
            stroke:#7D8495;
            fill:#7D8495;
        }
    </style>

var activity = [
    { "id": "start", "x": 200, "y": 0, "type": "start", text: "Start", css: "start" },
    { "id": 1, "x": 200, "y": 120, "text": "Call Client and \n set-up Appointment", "type": "process" },
    { "id": 2, "x": 200, "y": 240, "text": "", "type": "decision", css: "decision" },
    { "id": 3, "x": 20, "y": 360, "text": "Prepare \n a Conference Room", "type": "process" },
    { "id": 4, "x": 380, "y": 360, "text": "Prepare a Laptop", "type": "process" },
    { "id": 5, "x": 200, "y": 480, "text": "Meet with \n the Client", "type": "process" },
    { "id": 6, "x": 200, "y": 600, "text": "Send \n Follow-up Letter", "type": "process" },
    { "id": 7, "x": 200, "y": 720, "text": "", "type": "decision", css: "decision" },
    { "id": 8, "x": 200, "y": 840, "text": "Create Proposal", "type": "process" },
    { "id": 8.1, "x": 30, "y": 840, "text": "See the \n Activity Diagram \n for creating \n a document", "type": "document" },
    { "id": 9, "x": 200, "y": 960, "text": "Send Proposal \n to Client", "type": "process" },
    { "id": 10, "x": 200, "y": 1080, "type": "end", text: "End", css: "start" },
    { id: 11, "x": 110, "y": 270, type: "text", text: "[appointment onside]" },
    { id: 12, "x": 430, "y": 270, type: "text", text: "[appointment offside]" },
    { id: 13, "x": 440, "y": 750, type: "text", text: "[no statement of problem]" },
    { id: 14, "x": 150, "y": 820, type: "text", text: "[statement of problem]" },
    
{ from: "start", to: 1, type: "line", forwardArrow: "filled"  },
    { from: 1, to: 2, type: "line", forwardArrow: "filled"  },
    { from: 2, to: 3, type: "line", forwardArrow: "filled" , toSide: "top" },
    { from: 2, to: 4, type: "line", forwardArrow: "filled" , toSide: "top" },
    { from: 3, to: 5, type: "line", forwardArrow: "filled"  },
    { from: 4, to: 5, type: "line", forwardArrow: "filled"  },
    { from: 5, to: 6, type: "line", forwardArrow: "filled"  },
    { from: 6, to: 7, type: "line", forwardArrow: "filled"  },
    { from: 7, to: 8, type: "line", forwardArrow: "filled"  },
    { from: 8, to: 8.1, type: "dash" },
    { from: 8, to: 9, type: "line", forwardArrow: "filled"  },
    { from: 9, to: 10, type: "line", forwardArrow: "filled"  },
    { from: 7, to: 10, type: "line", fromSide: "right", toSide: "right", forwardArrow: "filled"  }

最終用戶可以通過具有交互式面板的實時編輯器來構(gòu)建和編輯UML活動圖，該交互式面板具有各種形狀和連接器以及用于樣式化它們的工具。

我們的導游提供的說明上初始化編輯器并使用它通過一個小應用程序的例子，能夠立即查看視圖模式下，所有的最新變化。

結(jié)論

UML中的活動圖定義將這種圖類型描述為逐步活動流的說明。活動基于各種條件，并且可能演變成不同的結(jié)果。因此，活動流程圖涵蓋了所討論的系統(tǒng)或人員的行為的所有可能發(fā)生。它使它們對于分析業(yè)務用例或描述編程中的系統(tǒng)行為非常有用。

我們的圖庫為您提供了用于構(gòu)建雄辯而全面的活動圖的所有必要工具。只需嘗試一下我們30天的評估版。

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

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