使用DHTMLX制作JavaScript树状图的全面指南

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

点击下载dhtmlxSuite最新版

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

什么是树状图

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

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

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

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

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

DHTMLX的JavaScript树形图示例

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

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

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

如何使用DHTMLX创建JavaScript树图

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

1.初始化JavaScript树形图：

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

添加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 }) => (`

name</h3><p>{name}</h3> <p>name</h3><p>{post}

KaTeX parse error: Expected group after '_' at position 88: …o_personal-card_̲_info"> …{mail}" target="_blank">${mail}

);

在为树形图创建自定义形状时，您应该做的第一件事就是为形状设置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类图）来构建任何其他图。

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率
想要了解甘特图或慧都APS系统，请登录慧都网咨询在线客服，解决您的问题！
本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果
原文链接：https://www.evget.com/article/2020/10/13/38605.html

使用DHTMLX制作JavaScript树状图的全面指南相关推荐

html树状图右侧_树状图及制作方法（Excel 2016/Excel 2013）
↑↑↑关注ExcelEasy,让Excel更简单树状图是一种展示层次结构数据的图表,可以很好的揭示各类别数据的比例关系及类别内数据的组成结构.今天为大家详细介绍一下树状图的制作方法树状图在Exce ...
word列表数据计算机,怎么把树状图的数据填成excel表格-谁会计算机啊，怎么把word里的表格数据转换成簇状......
excel中生成后的数据透视表如何把树形结构每层的空... 打开Word文档窗口,切换到"插入"功能区.在"插图"分组中单击"图表"按钮. ...
【微信小程序】可拖拽操作的“树状图”模块的制作和小程序经验的总结
去年三月份高中同学拉我做的微信小程序,尽管可能除了高一的时候做网页写过些js以后就再也没碰过(甚至高一时因为觉得"以后肯定不会做程序员"而拒绝学习代码),但得到了"你就写 ...
json树状图可视化_12个流行的Python数据可视化库总结
总结了10个不同领域的 Python 数据可视化库,有常用的,也有比较小众的. 1. matplotlib matplotlib是Python数据可视化库的OG.尽管它已有十多年的历史,但仍然是Pyt ...
一款很好用的JQuery dtree树状图插件（一）
一款很好用的JQuery dtree树状图插件树状图 -dtree 由于他的节点设置思想不错,使连接数据库的数据库设计比较方便. 下载dtree资源包,引用一下dtree.css和dtree.js ...
一个有意思的echarts3D树状图
玩了一个有意思的echarts3D树状图,贴出来供大家看看 <!DOCTYPE html> <html><head><meta charset="U ...
html树状图在线画板,五款在线思维导图工具，总有一款适合你
原标题:五款在线思维导图工具,总有一款适合你思维导图是表达发散性思维的有效图形思维工具,通过一些主要的关键词,用非线性的方式展现出来.思维导图的真正用处不是让你能直接获得多少多少的好处,它更多的,还 ...
聚类分析树状图的初探
参考官方文档:https://docs.scipy.org/doc/scipy/reference/index.html 此次使用聚类分析是因为文章需要,然后参考官方文档简单制作满足分析要求的树状图. ...
画出计算机系统构成的树状图,如何绘制树状层次结构的树状思维导图？
树状图,(又为树形图)因其外观像倒过来的树的样子,所以命名树状图.树形图是数据树的图形表示形式,以父子层次结构来组织对象.是枚举法的一种表达方式.初中学生学习概率时通常会要画的树状图.学会分析一件事物 ...
d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...

使用DHTMLX制作JavaScript树状图的全面指南

name</h3><p>{name}</h3> <p>name</h3><p>{post}

使用DHTMLX制作JavaScript树状图的全面指南相关推荐

最新文章

热门文章