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

點擊下載dhtmlxDiagram試用版

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

全新思維導圖

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

要以正確的層次結構順序排列形狀，可以通過父級配置屬性指定每個形狀的父級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" },
];

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

配置思維導圖時，您還可以決定要顯示和隱藏哪些子形狀。在開放的屬性顯示孩子塑造一個特定父形狀是的真實默認。借助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" },
];

思維導圖中的自定義形狀

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（）方法添加自定義形狀并將其設置為默認形狀，從而創建一個完全自定義的思維導圖。在下面的示例中，我們創建了一個帶有目標網頁預覽的站點地圖，而不是主題形狀和形狀中的自定義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"]
});

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樣式的導出，或者僅包括將它們與圖表一起導出所需的樣式。

如果您對該圖表控件感興趣，可以在慧都網免費下載最新試用版，加入圖表控件QQ交流群：740060302

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

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