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

點擊下載dhtmlxDiagram試用版

在尋找合適的工具來可視化系統和概念時，請不要忘記JavaScript框圖提供的簡單有效的決策。這種圖表類型有助于快速說明相關系統或主題的主要部分。您可以下載帶有此圖類型和其他圖類型的圖表庫，以進行30天試用。

此外，您可能會發現依靠JavaScript框圖作為草繪想法，項目步驟或某些要點的一種方法很有用。

繪圖框圖

框圖的所有元素在可視化中都起著同等的作用。它們由相似的矩形表示，通常被視為“黑匣子”。

了解這些元素本身與框圖的創建過程無關，而更重要的是它們的互連。框圖中可能沒有層次結構，并且它們的元素可能以閉合回路組織。

箭頭表示從一個塊到另一塊的數據流，并指示應如何讀取該圖。為了使其更清楚，可以在形狀旁邊提供標題以添加簡要說明。

JavaScript框圖與組織結構圖，工作流圖，決策樹，UML圖等圖類型一起包含在DHTMLX圖表庫中。由于具有豐富的API，廣泛的瀏覽器支持以及各種簡單的實現，所有這些圖都可以輕松集成到應用程序中框架和技術。可以將數據以JSON格式加載到js框圖（請在此處查看文檔）。

定制選項的靈活性使您可以完全按照所需的方式從頭開始構建框圖，并改善其外觀和風格，從而滿足項目的所有要求。形狀和連接器的對象屬性的完整列表在此處。我們的CSS樣式指南將幫助您確定圖表的外觀。此外，還有許多不同的操作可讓您操縱圖的形狀-添加新形狀，刪除舊形狀，更新形狀的內容，過濾形狀以及不進行其他操作。

讓我們仔細看看如何通過CSS以及形狀和連接器的對象屬性配置JavaScript框圖：

<style>
        html,body,.cont{
            background: #FFF;
        }
        .dhx_diagram{
            background: #FFF;
        }
        .dhx_free_diagram .dhx_item_shape{
            fill: #A4E5D9;
            stroke:none;
        }
        .dhx_free_diagram .dhx_diagram_flow_item text{
            font-size: 16px;
        }
        .dhx_free_diagram .dhx_item_text{
            font-size: 16px;
        }
        #dhx_text_background feFlood{
            flood-color: #FFF;
        }
        .dhx_free_diagram .dhx_item_text{
            filter:url(#dhx_text_background);
            fill:#000;
        }
        .dhx_free_diagram .dhx_diagram_line{
            stroke: #7FBBB0;
        }
        .dhx_free_diagram .dhx_diagram_arrow{
            stroke:#7FBBB0;
            fill:#7FBBB0;
        }
        .titles .dhx_item_shape{
            fill:#FFF;
        }
    </style>

var dataPlanning = [
    { "id": 1, "x": 200, "y": 0, "text": "Arrival", "type": "process" },
    { "id": 2, "x": 200, "y": 130, "text": "Load", "type": "process" },
    { "id": 2.1, "x": 480, "y": 130, "text": "Part", "type": "process" },
    { "id": 3, "x": 200, "y": 260, "text": "Process Plan", "type": "process" },
    { "id": 3.1, "x": 0, "y": 240, "text": "Unit Load", "type": "process" },
...
    { "id": 19, "x": 270, "y": 500, "text": "Allocates", "type": "text" },
    { "id": 20, "x": 390, "y": 555, "text": "Works on", "type": "text" },
    { "id": 21, "x": 270, "y": 630, "text": "Is a", "type": "text" },
    { "id": 22, "x": 940, "y": 790, "text": "Connected through", "type": "text" },
...
    { from: 2, to: 2.1, type: "line", backArrow:"filled" },
    { from: 2, to: 3.1, type: "line", forwardArrow: "filled" , toSide: "top" },
    { from: 3, to: 4, type: "line", forwardArrow: "filled"  },
    { from: 4, to: 5, type: "line", forwardArrow: "filled"  },
    { from: 5, to: 5.1, type: "line", forwardArrow: "filled" , toSide: "bottom" },
    { from: 5, to: 5.2, type: "line", forwardArrow: "filled" , toSide: "bottom" },
    { from: 5, to: 5.3, type: "line", forwardArrow: "filled" , toSide: "bottom" },
    { from: 5, to: 5.4, type: "line", forwardArrow: "filled" , toSide: "bottom" },
...
    { from: 5, to: 10, type: "line", forwardArrow: "filled" , fromSide: "bottom", toSide: "top" },
    { from: 5, to: 11, type: "line", forwardArrow: "filled" , fromSide: "bottom", toSide: "top" },
    { from: 5, to: 12, type: "line", forwardArrow: "filled" , fromSide: "bottom", toSide: "top" },
    { from: 5, to: 13, type: "line", forwardArrow: "filled" , fromSide: "bottom", toSide: "top" },
]

設計完框圖后，請通過導出為PDF或PNG格式進行保存。

結論

框圖在我們的庫中加入了各種JavaScript圖類型，并為您提供了一種簡單而有效的方法的優點，可用于對系統和概念進行快速的常規可視化，創建草稿和草圖以及以清晰緊湊的方式記錄想法。

DHTMLX圖表庫為您提供了一個強大的工具，可用于構建高度可定制的JavaScript框圖并將其集成到任何項目中。我們的30天試用版可讓您測試庫的所有功能，并在評估期內為我們的開發團隊提供支持。

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

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