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

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

下載DHTMLX Diagram

全新思維導圖

DHTMLX Diagram3.1的主要引入了一種新的圖表類型-思維導圖。思維導圖用于可視化信息，具有從核心思想中分支出來的多個按層次排列的概念。此圖類型可應用于構建業務，科學，技術和任何其他類型的數據。

由于專用于思維導圖的新型形狀稱為“主題”形狀，因此現在可以使用DHTMLX圖庫創建思維導圖。它們是DHTMLX思維導圖中默認的形狀類型。

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

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

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" },
];

雖然實線是默認的連接器類型，但是您可以通過圖表對象的defaultLinkType屬性對其進行更改：

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

DHTMLX思維導圖提供了將子形狀布置在根形狀的右側和左側的機會。為此，我們引入了typeConfig選項，該選項確定思維導圖分支的方向。typeConfig選項的direction屬性可以設置為left或right：

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

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

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

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

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" },
];

思維導圖中的自定義形狀

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

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配置選項更改形狀的默認類型。新的默認類型將應用于所有形狀，但在形狀配置對象中指定了其他類型的形狀除外：

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（）方法添加自定義形狀并將其設置為默認形狀，從而創建一個完全自定義的思維導圖。在下面的示例中，我們創建了一個帶有目標網頁預覽的站點地圖，而不是主題形狀和形狀中的自定義HTML內容：icon（打開一個彈出窗口），帶有嵌入到目標網頁的鏈接的圖標以及自定義文本（當用戶點擊一個形狀：

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模板集合中，可以將此自定義思維導圖用作CSS模板。

思維導圖編輯器

伴隨引入全新的圖表類型，DHTMLX圖表獲得了一個專門用于處理思維導圖的新編輯器。在編輯器提供了所有的圖中可用的可能性和組織結構圖編輯器。它有兩個面板：一個在編輯區域的頂部，另一個在編輯區域的右側。

為了創建思維導圖編輯器，您需要在編輯器配置對象中指定編輯器類型：

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

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

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

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

對于思維導圖編輯器，默認工具欄由四個控件組成，這些控件用于添加新的子形狀，在根形狀的右側和根形狀的左側創建新形狀，以及刪除形狀。

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

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

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

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

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

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

自定義事件處理程序

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

在下面的示例中，我們添加了一個事件處理程序，以偵聽帶有info類的圖標的點擊，之后將打開一個模式窗口：

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支持。從現在開始，您可以依靠內置的類型定義，并應用類型建議，類型檢查和自動補全功能，以加快編碼速度并使代碼整潔而穩定。

其他功能和更新

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

當通過導出服務導出圖表時，V3.1還提供了控制圖表CSS樣式的功能。從現在開始，您可以禁用CSS樣式的導出，或者僅包括將它們與圖表一起導出所需的樣式。

我們渴望為您提供完整的工具包，以創建思維導圖并對其進行自定義以滿足您的需求。如有任何疑問，請隨時將您的反饋和問題發送給我們。

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