JavaScript的dhtmlxSuite建立的富客户端开发框架教程

转载

roffey 2020-10-19 16:58:59

文章标签 DHTMLX Diagram dhtmlxSuite JavaScript 文章分类 数字化转型

dhtmlxSuite是一个用JavaScript建立的富客户端开发框架。它是一个JavaScript UI库，用于建立一个完整的具有Ajax能力的前台组件。用户可以使用它建立一个企业级的跨浏览器Web应用和移动应用程序，它能提供优秀的性能和更丰富的用户体验。

现在可以用DHTMLX Diagram库实现的图表类型来扩展您的数据可视化工具库。本文分享关于如何制作JavaScript树状图的全面指南。您所需要做的就是下载我们的图表库的试用版，并遵守本文中提供的详细说明。

什么是树状图

树形图是一种广泛使用的工具，它允许以层次结构或树状结构的图形方式呈现各种数据。它通常由通过连接线（分支）连接在一起的树元素（节点）组成，生动地说明了节点之间的父子关系。使用这种类型的图，您可以享受一个简单的数据表示概念，轻松跟踪图元素之间的依赖关系以及所提供信息的清晰度的可能性。

由于简单性和高适应性的结合，JavaScript树形图（也称为树形图）在各种应用程序领域得到了普及，例如：

业务管理的不同领域，例如员工管理（组织结构图）或任务管理（WBS图）计算机科学（树数据结构，决策树）数学（概率论）生物学（进化树）家谱（家谱）和其他传统知识分支。 JavaScript家族树

除了在组织层次结构中得到广泛使用之外，树形图在族谱中也很流行，用于家谱的可视化。JavaScript家族树是一种图的类型，旨在直观地呈现家族中的亲属关系和世代联系。这些图不仅可以用于历史或家谱等学科领域，而且可以用于对祖先有兴趣的普通百姓。

上面的示例描绘了英国王室家族树的一部分，其继承线用红色突出显示。

DHTMLX的JavaScript树形图示例

让我们仔细看看DHTMLX图库生成的JavaScript树图的实例。

上图是一个组织结构图，它展示了医疗机构的分层组织结构。它带有自定义形状，其中包括有关医务人员的视觉和文字信息：医生的照片，姓名，位置，联系信息（电话号码和电子邮件）字段以及图标和标签。

直形和正交连接器（分支）演示了人员报告结构。

如何使用DHTMLX创建JavaScript树图

现在，我们将深入了解使用JavaScript库执行的操作序列，以绘制树形图，如上面的示例一样。

1.初始化JavaScript树形图：

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="codebase/diagram.js"></script> <link rel="stylesheet" href="codebase/diagram.css"> <link href="https://cdn.materialdesignicons.com/4.5.95/css/materialdesignicons.min.css?v=3.0.2" media="all" rel="stylesheet" type="text/css"> </head> <body> <div id="diagram"></div> <script> const diagram = new dhx.Diagram("diagram", { type: "org", defaultShapeType: "template" }); </script> </body> </html>

在初始化之前必须采取的第一步如下：

添加DHTMLX图JS和CSS源文件创建一个容器以将树形图嵌入其中添加带有Material Design图标的CDN文件，以用于医务人员的个人卡中然后调用dhx.Diagram构造函数执行树图的初始化。构造函数带有两个参数：一个已创建的容器和一个具有配置属性的对象。在配置对象中，您必须定义type：“ org”属性以创建组织结构图，这是一种用于显示组织层次结构的树形图。此外，您需要通过defaultShapeType属性指定图形状的类型。

2.设置图表形状的默认配置：

const defaults = { height: 115, width: 330 }; 您可以通过应用默认配置来加快从头开始创建JavaScript树形图的过程。它使您可以一次为所有形状设置特定元素的共同特征。我们的树图示例由12个具有相同尺寸（115 x 330）的节点组成。因此，我们可以为其指定默认的高度和宽度。

3.创建自定义形状的模板：

const template = ({ photo, name, post, phone, mail }) => (` <div class="dhx-diagram-demo_personal-card"> <div class="dhx-diagram-demo_personal-card__container dhx-diagram-demo_personal-card__img-container"> <img src="${photo}" alt="${name}-${post}"></img> </div> <div class="dhx-diagram-demo_personal-card__container"> <h3>${name}</h3> <p>${post}</p> <span class="dhx-diagram-demo_personal-card__info"> <i class="mdi mdi-cellphone-android"></i> <p>${phone}</p> </span> <span class="dhx-diagram-demo_personal-card__info"> <i class="mdi mdi-email-outline"></i> <a rel="nofollow" href="mailto:${mail}" target="_blank">${mail}</a> </span> </div> </div> );

在为树形图创建自定义形状时，您应该做的第一件事就是为形状设置HTML模板。为此，我们应用ES6 +标准。您可以通过以下模板定义自定义形状的所有必需属性：

医务工作者的照片医生的姓名和职位材料设计图标和电话号码包中的电话图标电子邮件图标和电子邮件地址链接 4.在树形图中添加形状：

diagram.addShape("template", { template, defaults }); 下一步将向JavaScript树形图中添加自定义形状。可以使用addShape方法来完成。这种简单的方法使您可以利用模板和默认的形状配置快速添加各种形状。

5.准备数据并将其解析到图中：

diagram.data.parse(data);

const data = [ { id: "main", name: "Kristin Mccoy", post: "Medical director", phone: "(405) 555-0128", mail: "kmccoy@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-1.jpg", }, { id: "1", name: "Theo Fisher", post: "Head of department", phone: "(405) 632-1372", mail: "tfisher@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-2.jpg", parent: "main" }, { id: "1.1", name: "Francesca Saunders", post: "Attending physician", phone: "(402) 371-6736", mail: "fsaunders@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-3.jpg", parent: "1", open: false }, { id: "2", name: "Alisha Hall", post: "Head of department", phone: "(405) 372-9756", mail: "ahall@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-4.jpg", parent: "main", open: false }, { id: "2.1", name: "Milena Hunter", post: "Attending physician", phone: "(124) 622-1256", mail: "mhunter@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-25.jpg", parent: "2", dir: "vertical", }, { id: "2.2", name: "Maximus Dixon", post: "Medical director", phone: "(264) 684-4373", mail: "mdixon@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-29.jpg", parent: "2", dir: "vertical", }, { id: "3", name: "Edward Sharp", post: "Head of department", phone: "(451) 251-2578", mail: "esharp@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-6.jpg", parent: "main", dir: "vertical", }, { id: "3.1", name: "Cruz Burke", post: "Attending physician", phone: "(587) 234-8975", mail: "cburke@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-7.jpg", parent: "3", }, { id: "3.2", name: "Eloise Saunders", post: "Attending physician", phone: "(875) 231-5332", mail: "esaunders@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-8.jpg", parent: "3", }, { id: "3.3", name: "Sophia Matthews", post: "Attending physician", phone: "(361) 423-7234", mail: "smatthews@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-9.jpg", parent: "3", }, { id: "3.4", name: "Kara Foster", post: "Attending physician", phone: "(565) 525-0672", mail: "kfoster@gmail.com", photo: "https://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-10.jpg", parent: "3", }, ]; 为了用内容填充树形图，您必须应用parse方法。

6.修改JavaScript树形图中特定元素的外观：

最后，您可以通过CSS为个人卡片元素定义样式，从而操纵HTML5树形图的外观。您可以将一系列CSS属性应用于所选元素，并指定其尺寸，对齐方式，间距，颜色和任何其他设置。

完成最后一步后，您可以开始使用此树形图来勾勒公司的内部结构。

该指南显示了如何将我们的JavaScript图库用于构建树图。除了此图类型之外，您还可以使用简单的HTML模板（例如网络图或UML类图）来构建任何其他图。

想要购买dhtmlxSuite正版授权，或了解更多产品信息慧都网