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

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

下載DHTMLX Diagram

全新思維導(dǎo)圖

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

由于專用于思維導(dǎo)圖的新型形狀稱為“主題”形狀，因此現(xiàn)在可以使用DHTMLX圖庫創(chuàng)建思維導(dǎo)圖。它們是DHTMLX思維導(dǎo)圖中默認(rèn)的形狀類型。

該庫的API允許根據(jù)您的要求配置主題形狀。您可以調(diào)整形狀的大小，偏移量，背景和邊框顏色，文本修飾和對齊方式，以及將自己的CSS類應(yīng)用于形狀。

要按照正確的層次結(jié)構(gòu)順序排列形狀，可以通過父級配置屬性指定每個(gè)形狀的父級ID，也可以使用連接器對象的配置屬性將形狀彼此鏈接。使用連接器對象的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" },
];

雖然實(shí)線是默認(rèn)的連接器類型，但是您可以通過圖表對象的defaultLinkType屬性對其進(jìn)行更改：

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

DHTMLX思維導(dǎo)圖提供了將子形狀布置在根形狀的右側(cè)和左側(cè)的機(jī)會(huì)。為此，我們引入了typeConfig選項(xiàng)，該選項(xiàng)確定思維導(dǎo)圖分支的方向。typeConfig選項(xiàng)的direction屬性可以設(shè)置為left或right：

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

如果要在左側(cè)放置一些形狀，而在右側(cè)放置一些形狀，則可以使用typeConfig對象的side屬性。所述側(cè)屬性允許指示哪些形狀要被繪制到左和到根形狀的通過指定它們的ID的權(quán)利：

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)圖中的自定義形狀

DHTMLX圖庫使在一個(gè)圖中混合各種形狀成為可能。因此，您可以創(chuàng)建一個(gè)思維導(dǎo)圖并向其中添加組織結(jié)構(gòu)圖形狀或任何其他圖形狀。您需要做的就是在形狀配置對象中指定所需的形狀類型：

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);

您還可以通過圖的defaultShapeType配置選項(xiàng)更改形狀的默認(rèn)類型。新的默認(rèn)類型將應(yīng)用于所有形狀，但在形狀配置對象中指定了其他類型的形狀除外：

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)圖編輯器，您需要在編輯器配置對象中指定編輯器類型：

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

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

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

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

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

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

在下面的示例中，我們在工具欄中保留了兩個(gè)控件：一個(gè)用于刪除形狀，另一個(gè)用于添加形狀。

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

您不僅可以通過重新排列或禁用某些控件來微調(diào)工具欄，還可以添加自定義控件。向工具欄添加自定義控件的最佳方法是通過將shapeToolbar屬性指定為true并在shapeToolbar數(shù)組中設(shè)置圖標(biāo)對象來啟用工具欄的默認(rèn)配置。圖標(biāo)對象包含圖標(biāo)的ID和圖標(biāo)的HTML內(nèi)容：

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è)事件處理程序，以偵聽帶有info類的圖標(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)在開始，您可以依靠內(nèi)置的類型定義，并應(yīng)用類型建議，類型檢查和自動(dòng)補(bǔ)全功能，以加快編碼速度并使代碼整潔而穩(wěn)定。

其他功能和更新

該版本帶來了編輯器對象的新事件：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)出所需的樣式。

我們渴望為您提供完整的工具包，以創(chuàng)建思維導(dǎo)圖并對其進(jìn)行自定義以滿足您的需求。如有任何疑問，請隨時(shí)將您的反饋和問題發(fā)送給我們。

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