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

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

在尋找合適的工具來(lái)可視化系統(tǒng)和概念時(shí)，請(qǐng)不要忘記JavaScript框圖提供的簡(jiǎn)單有效的決策。這種圖表類型有助于快速說(shuō)明相關(guān)系統(tǒng)或主題的主要部分。您可以下載帶有此圖類型和其他圖類型的圖表庫(kù)，以進(jìn)行30天試用。

此外，您可能會(huì)發(fā)現(xiàn)依靠JavaScript框圖作為草繪想法，項(xiàng)目步驟或某些要點(diǎn)的一種方法很有用。

繪圖框圖

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

了解這些元素本身與框圖的創(chuàng)建過(guò)程無(wú)關(guān)，而更重要的是它們的互連。框圖中可能沒(méi)有層次結(jié)構(gòu)，并且它們的元素可能以閉合回路組織。

箭頭表示從一個(gè)塊到另一塊的數(shù)據(jù)流，并指示應(yīng)如何讀取該圖。為了使其更清楚，可以在形狀旁邊提供標(biāo)題以添加簡(jiǎn)要說(shuō)明。

JavaScript框圖與組織結(jié)構(gòu)圖，工作流圖，決策樹(shù)，UML圖等圖類型一起包含在DHTMLX圖表庫(kù)中。由于具有豐富的API，廣泛的瀏覽器支持以及各種簡(jiǎn)單的實(shí)現(xiàn)，所有這些圖都可以輕松集成到應(yīng)用程序中框架和技術(shù)。可以將數(shù)據(jù)以JSON格式加載到j(luò)s框圖（請(qǐng)?jiān)诖颂幉榭次臋n）。

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

讓我們仔細(xì)看看如何通過(guò)CSS以及形狀和連接器的對(duì)象屬性配置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" },
]

設(shè)計(jì)完框圖后，請(qǐng)通過(guò)導(dǎo)出為PDF或PNG格式進(jìn)行保存。

結(jié)論

框圖在我們的庫(kù)中加入了各種JavaScript圖類型，并為您提供了一種簡(jiǎn)單而有效的方法的優(yōu)點(diǎn)，可用于對(duì)系統(tǒng)和概念進(jìn)行快速的常規(guī)可視化，創(chuàng)建草稿和草圖以及以清晰緊湊的方式記錄想法。

DHTMLX圖表庫(kù)為您提供了一個(gè)強(qiáng)大的工具，可用于構(gòu)建高度可定制的JavaScript框圖并將其集成到任何項(xiàng)目中。我們的30天試用版可讓您測(cè)試庫(kù)的所有功能，并在評(píng)估期內(nèi)為我們的開(kāi)發(fā)團(tuán)隊(duì)提供支持。

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)買(mǎi)dhtmlxDiagram正版授權(quán)，或了解慧都APS系統(tǒng)請(qǐng)點(diǎn)擊