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

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

DHTMLX Diagram已更新至版本3.1。我們已經(jīng)將來自JavaScript圖表組件的用戶的大量反饋整合到了發(fā)行版中。現(xiàn)在，您可以創(chuàng)建和自定義思維導(dǎo)圖，通過思維導(dǎo)圖編輯器即時(shí)對(duì)其進(jìn)行編輯，微調(diào)每個(gè)形狀的工具欄，并將自定義事件處理程序添加到自定義形狀。此外，可以使用內(nèi)置的類型定義來幫助您更快地對(duì)圖進(jìn)行編碼。

全新思維導(dǎo)圖

版本3.1的主題演講是引入了一種新的圖表類型-心智圖。思維導(dǎo)圖用于可視化信息，具有從核心思想中分支出來的多個(gè)按層次排列的概念。此圖類型可應(yīng)用于構(gòu)建業(yè)務(wù)，科學(xué)，技術(shù)和任何其他類型的數(shù)據(jù)。

要以正確的層次結(jié)構(gòu)順序排列形狀，可以通過父級(jí)配置屬性指定每個(gè)形狀的父級(jí)ID，也可以使用連接器對(duì)象的配置屬性將形狀彼此鏈接。使用連接器對(duì)象的from和to屬性，您可以定義與特定連接器鏈接的形狀。此外，您可以借助可選的type屬性選擇連接器是虛線還是實(shí)線：

const data = [
       // shapes
    { id: "1", text: "49 emotions" },
    { id: "2", text: "Positive and lively" },
    { id: "3", text: "Quiet positive" },
    { id: "4", text: "Caring" },
    { id: "5", text: "Reactive" },
    // connectors
    { "id": "1-2", "from": "1", "to": "2", "type": "dash" },
    { "id": "1-3", "from": "1", "to": "3", "type": "dash" },
    { "id": "1-4", "from": "1", "to": "4", "type": "line" },
    { "id": "1-5", "from": "1", "to": "5", "type": "line" },
];

const diagram = new dhx.Diagram(document.body, { 
    type: "mindmap", 
    defaultLinkType: "line"        
});

const diagram = new dhx.Diagram(document.body, { 
    type: "mindmap",
    typeConfig: {
        direction: "right",
    }
});
diagram.data.parse(data);

const diagram = new dhx.Diagram(document.body, { 
    type: "mindmap",
    typeConfig: {
        side: {
            left: ["2", "3"],
            right: ["4", "5"],
        }
    }
});
diagram.data.parse(data);

配置思維導(dǎo)圖時(shí)，您還可以決定要顯示和隱藏哪些子形狀。在開放的屬性顯示孩子塑造一個(gè)特定父形狀是的真實(shí)默認(rèn)。借助openDir屬性，您可以更精確地指定是在父形狀的左側(cè)還是右側(cè)顯示子形狀：

const data = [
    {
        "id": "1", "text": "49 emotions",
        "openDir": {
            left: true,
            right: false,
        }
    },
    { "id": "2", "text": "Positive and lively", "parent": "1" },
    { "id": "3", "text": "Quiet positive", "parent": "1" },
    { "id": "4", "text": "Caring", "parent": "1" },
    { "id": "5", "text": "Reactive", "parent": "1" },
];

思維導(dǎo)圖中的自定義形狀

const data = [
    // create an "img-card" shape of Org Chart with the related configuration
    { id: "1", text: "Chairman & CEO", type: "img-card", img: "../avatar-06.jpg" },
    // create default "topic" shapes of Mind Map
    { id: "2", text: "Manager", parent: "1" },
    { id: "2.1", text: "Marketer", parent: "2" },
    { id: "2.2", text: "Team Lead ", parent: "2" },
    // more options
];
 
// initializing the mind map
const diagram = new dhx.Diagram(document.body, {
    type: "mindmap",
});
diagram.data.parse(data);

const diagram = new dhx.Diagram(document.body, {
    type: "mindmap",
    defaultShapeType: "rectangle" 
});
 
const data = [
    { id: "1", text: "Chairman & CEO", type: "card" },     
    { id: "2", text: "Manager", parent: "1" },
    { id: "3", text: "Technical Director", parent: "1" },
    { id: "4", text: "CCO", parent: "1" },
    { id: "5", text: "Product Manager", parent: "1" }
];

此外，您可以通過addShape（）方法添加自定義形狀并將其設(shè)置為默認(rèn)形狀，從而創(chuàng)建一個(gè)完全自定義的思維導(dǎo)圖。在下面的示例中，我們創(chuàng)建了一個(gè)帶有目標(biāo)網(wǎng)頁預(yù)覽的站點(diǎn)地圖，而不是主題形狀和形狀中的自定義HTML內(nèi)容：icon（打開一個(gè)彈出窗口），帶有嵌入到目標(biāo)網(wǎng)頁的鏈接的圖標(biāo)以及自定義文本（當(dāng)用戶點(diǎn)擊一個(gè)形狀：

const diagram = new dhx.Diagram(document.body, {
    type: "mindmap",
    // specifies the new shape type as a type for all shapes
    defaultShapeType: "flowView"
});
 
function template({ title, view, cr, br, conversion, link }){
    ...
}

function openModalInfo(title, text) {
     ...
}
 
diagram.addShape("flowView", {
    template: template,
    eventHandlers: {
        onclick: {
            info: function(event, item) {
                openModalInfo(item.title, item.info);
            }
        }
    }
});

const customShape = [
    // an appropriate data set
];

	diagram.data.parse(customShape); 

在DHTMLX模板集合中，可以將此自定義思維導(dǎo)圖用作CSS模板。

思維導(dǎo)圖編輯器

伴隨引入全新的圖表類型，DHTMLX圖表獲得了一個(gè)專門用于處理思維導(dǎo)圖的新編輯器。在心靈地圖編輯器提供了所有的圖中可用的可能性和組織結(jié)構(gòu)圖編輯器。它有兩個(gè)面板：一個(gè)在編輯區(qū)域的頂部，另一個(gè)在編輯區(qū)域的右側(cè)。

為了創(chuàng)建思維導(dǎo)圖編輯器，您需要在編輯器配置對(duì)象中指定編輯器類型：

var editor = new dhx.DiagramEditor(document.body, { 
    type: "mindmap" 
});

廣泛的API屬性使您可以配置編輯器以滿足您的需求。您可以操縱編輯器控件，此外，還可以自定義右側(cè)面板以為其配備必要的編輯選項(xiàng)。當(dāng)您要編輯自定義思維導(dǎo)圖時(shí)（如下面的示例），它可能特別有用。

編輯器中的自定義形狀工具欄

從v3.1開始，您可以在所有DHTMLX圖表編輯器中自定義每個(gè)形狀的工具欄。

對(duì)于思維導(dǎo)圖編輯器，默認(rèn)工具欄由四個(gè)控件組成，這些控件用于添加新的子形狀，在根形狀的右側(cè)和根形狀的左側(cè)創(chuàng)建新形狀，以及刪除形狀。

為了使自定義成為可能，我們添加了shapeToolbar配置屬性，該屬性允許操作工具欄控件并創(chuàng)建自定義控件。如果將此屬性指定為true，則工具欄將包含所有特定于您使用的編輯器的默認(rèn)控件。要修改工具欄，您可以通過shapeToolbar屬性僅包含所需的那些控件。指定控件的順序決定了它們?cè)诠ぞ邫谥械娘@示方式。

const editor = new dhx.DiagramEditor(document.body, {
    type: "mindmap",
    shapeToolbar: ["remove", "add"]
});

const editor = new dhx.DiagramEditor(document.body, {
    type: "mindmap",
    shapeToolbar: [       
 true,
{ id: "download", content:"<i class='dxi dxi-download'></i>" }    
    ] 
});

因此，v3.1使您能夠完全控制所有編輯器（圖表，組織結(jié)構(gòu)圖和思維導(dǎo)圖）中每個(gè)形狀的工具欄的配置，并使您能夠廣泛地自定義編輯器。

自定義事件處理程序

從現(xiàn)在開始，DHTMLX Diagram由于能夠添加自定義事件處理程序，因此能夠處理具有自定義形狀的用戶交互。為此，我們引入了addShape（）方法的新eventHandlers屬性。

在下面的示例中，我們添加了一個(gè)事件處理程序，以偵聽?zhēng)в衖nfo類的圖標(biāo)的點(diǎn)擊，之后將打開一個(gè)模式窗口：

diagram.addShape("template", {
    template: template,
    defaults: {
        height: 190,
        width: 97
    },
    eventHandlers: { 
        onclick: { 
            info: function(event, item) { 
                openModalInfo(item.title, item.info); 
            } 
        } 
    }
});

TypeScript支持

錦上添花的是DHTMLX Diagram庫從v3.1開始提供的TypeScript支持。從現(xiàn)在開始，您可以依靠?jī)?nèi)置的類型定義，并應(yīng)用類型建議，類型檢查和自動(dòng)補(bǔ)全功能，以加快編碼速度并使代碼整潔而穩(wěn)定。檢查樣品>

其他功能和更新

該版本帶來了編輯器對(duì)象的新事件：BeforeShapeIconClick和AfterShapeIconClick，BeforeShapeMove和AfterShapeMove。它們用于跟蹤用戶操作，例如單擊每個(gè)形狀的工具欄控件和移動(dòng)形狀。

當(dāng)通過導(dǎo)出服務(wù)導(dǎo)出圖表時(shí)，V3.1還提供了控制圖表CSS樣式的功能。從現(xiàn)在開始，您可以禁用CSS樣式的導(dǎo)出，或者僅包括將它們與圖表一起導(dǎo)出所需的樣式。

如果您對(duì)該圖表控件感興趣，可以在慧都網(wǎng)免費(fèi)下載最新試用版，加入圖表控件QQ交流群：740060302

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

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