DHTMLX Diagram v3.1：新增可自定义思维导图形状、时间处理程序等！

想要购买

全新思维导图

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 mapconst 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模板。

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

在下面的示例中，我们在工具栏中保留了两个控件：一个用于删除形状，另一个用于添加形状。

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

自定义事件处理程序

从现在开始，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支持。从现在开始，您可以依靠内置的类型定义，并应用类型建议，类型检查和自动补全功能，以加快编码速度并使代码整洁而稳定。

其他功能和更新

当通过导出服务导出图表时，V3.1还提供了控制图表CSS样式的功能。从现在开始，您可以禁用CSS样式的导出，或者仅包括将它们与图表一起导出所需的样式。

我们渴望为您提供完整的工具包，以创建思维导图并对其进行自定义以满足您的需求。如有任何疑问，请随时将您的反馈和问题发送给我们。

想要购买dhtmlxDiagram正版授权，或了解APS系统请点击【咨询在线客服】

标签：