交互式图表dhtmlxDiagram v3.1来袭！具有全新的思维导图

dhtmlxDiagram试用版

全新思维导图

版本3.1的主题演讲是引入了一种新的图表类型-心智图。思维导图用于可视化信息，具有从核心思想中分支出来的多个按层次排列的概念。此图类型可应用于构建业务，科学，技术和任何其他类型的数据。

由于专用于思维导图的新型形状称为“主题”形状，因此现在可以使用DHTMLX图库创建思维导图。它们是DHTMLX思维导图中默认的形状类型。

虽然实线是默认的连接器类型，但是您可以通过图表对象的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);

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

diagram.data.parse(customShape);<img decoding="async" src="https://dhtmlx.com/blog/wp-content/uploads/2021/04/Custom-mind-map.gif" alt="DHTMLXè1′">

在DHTMLX模板集合中，可以将此自定义思维导图用作CSS模板。

DHTMLX¨

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

DHTMLXè1′¨

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

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

<img decoding="async" alt="交互式图表dhtmlxDiagram v3.1来袭！具有全新的思维导图" src="https://dhtmlx.com/blog/wp-content/uploads/2021/04/fullcustom_toolbar_control.png" async class="j-lazy" data-original="https://dhtmlx.com/blog/wp-content/uploads/2021/04/fullcustom_toolbar_control.png" font-size:16px><strong>自定义事件处理程序</strong>

从现在开始，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);            }        }    }});

HTMLXè1o

TypeScript支持

锦上添花的是DHTMLX Diagram库从v3.1开始提供的TypeScript支持。从现在开始，您可以依靠内置的类型定义，并应用类型建议，类型检查和自动补全功能，以加快编码速度并使代码整洁而稳定。检查样品>

其他功能和更新

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

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

如果您对该图表控件感兴趣，可以在免费下载最新试用版，加入图表控件QQ交流群：

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

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

标签：

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

交互式图表dhtmlxDiagram v3.1来袭！具有全新的思维导图

相关推荐

发表回复