dhtmlxSuite是一個(gè)用JavaScript建立的富客戶端開發(fā)框架。它是一個(gè)JavaScript UI庫，用于建立一個(gè)完整的具有Ajax能力的前臺(tái)組件。用戶可以使用它建立一個(gè)企業(yè)級(jí)的跨瀏覽器Web應(yīng)用和移動(dòng)應(yīng)用程序，它能提供優(yōu)秀的性能和更豐富的用戶體驗(yàn)。
點(diǎn)擊下載dhtmlxSuite最新版
現(xiàn)在可以用DHTMLX Diagram庫實(shí)現(xiàn)的圖表類型來擴(kuò)展您的數(shù)據(jù)可視化工具庫。本文分享關(guān)于如何制作JavaScript樹狀圖的全面指南。您所需要做的就是下載我們的圖表庫的試用版，并遵守本文中提供的詳細(xì)說明。
什么是樹狀圖
樹形圖是一種廣泛使用的工具，它允許以層次結(jié)構(gòu)或樹狀結(jié)構(gòu)的圖形方式呈現(xiàn)各種數(shù)據(jù)。它通常由通過連接線（分支）連接在一起的樹元素（節(jié)點(diǎn)）組成，生動(dòng)地說明了節(jié)點(diǎn)之間的父子關(guān)系。使用這種類型的圖，您可以享受一個(gè)簡(jiǎn)單的數(shù)據(jù)表示概念，輕松跟蹤圖元素之間的依賴關(guān)系以及所提供信息的清晰度的可能性。
由于簡(jiǎn)單性和高適應(yīng)性的結(jié)合，JavaScript樹形圖（也稱為樹形圖）在各種應(yīng)用程序領(lǐng)域得到了普及，例如：
-
業(yè)務(wù)管理的不同領(lǐng)域，例如員工管理（組織結(jié)構(gòu)圖）或任務(wù)管理（WBS圖）
-
計(jì)算機(jī)科學(xué)（樹數(shù)據(jù)結(jié)構(gòu)，決策樹）
-
數(shù)學(xué)（概率論）
-
生物學(xué)（進(jìn)化樹）
-
家譜（家譜）和其他傳統(tǒng)知識(shí)分支。
JavaScript家族樹
除了在組織層次結(jié)構(gòu)中得到廣泛使用之外，樹形圖在族譜中也很流行，用于家譜的可視化。JavaScript家族樹是一種圖的類型，旨在直觀地呈現(xiàn)家族中的親屬關(guān)系和世代聯(lián)系。這些圖不僅可以用于歷史或家譜等學(xué)科領(lǐng)域，而且可以用于對(duì)祖先有興趣的普通百姓。
上面的示例描繪了英國(guó)王室家族樹的一部分，其繼承線用紅色突出顯示。
DHTMLX的JavaScript樹形圖示例
讓我們仔細(xì)看看DHTMLX圖庫生成的JavaScript樹圖的實(shí)例。
上圖是一個(gè)組織結(jié)構(gòu)圖，它展示了醫(yī)療機(jī)構(gòu)的分層組織結(jié)構(gòu)。它帶有自定義形狀，其中包括有關(guān)醫(yī)務(wù)人員的視覺和文字信息：醫(yī)生的照片，姓名，位置，聯(lián)系信息（電話號(hào)碼和電子郵件）字段以及圖標(biāo)和標(biāo)簽。
直形和正交連接器（分支）演示了人員報(bào)告結(jié)構(gòu)。
如何使用DHTMLX創(chuàng)建JavaScript樹圖
現(xiàn)在，我們將深入了解使用JavaScript庫執(zhí)行的操作序列，以繪制樹形圖，如上面的示例一樣。
1.初始化JavaScript樹形圖：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="codebase/diagram.js"></script>
<link rel="stylesheet" href="codebase/diagram.css">
<link 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源文件
-
創(chuàng)建一個(gè)容器以將樹形圖嵌入其中
-
添加帶有Material Design圖標(biāo)的CDN文件，以用于醫(yī)務(wù)人員的個(gè)人卡中
然后調(diào)用dhx.Diagram構(gòu)造函數(shù)執(zhí)行樹圖的初始化。構(gòu)造函數(shù)帶有兩個(gè)參數(shù)：一個(gè)已創(chuàng)建的容器和一個(gè)具有配置屬性的對(duì)象。在配置對(duì)象中，您必須定義type：“ org”屬性以創(chuàng)建組織結(jié)構(gòu)圖，這是一種用于顯示組織層次結(jié)構(gòu)的樹形圖。此外，您需要通過defaultShapeType屬性指定圖形狀的類型。
2.設(shè)置圖表形狀的默認(rèn)配置：
const defaults = {
height: 115,
width: 330
};
您可以通過應(yīng)用默認(rèn)配置來加快從頭開始創(chuàng)建JavaScript樹形圖的過程。它使您可以一次為所有形狀設(shè)置特定元素的共同特征。我們的樹圖示例由12個(gè)具有相同尺寸（115 x 330）的節(jié)點(diǎn)組成。因此，我們可以為其指定默認(rèn)的高度和寬度。
3.創(chuàng)建自定義形狀的模板：
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 href="mailto:${mail}" target="_blank">${mail}</a>
</span>
</div>
</div>
);
在為樹形圖創(chuàng)建自定義形狀時(shí)，您應(yīng)該做的第一件事就是為形狀設(shè)置HTML模板。為此，我們應(yīng)用ES6 +標(biāo)準(zhǔn)。您可以通過以下模板定義自定義形狀的所有必需屬性：
-
醫(yī)務(wù)工作者的照片
-
醫(yī)生的姓名和職位
-
材料設(shè)計(jì)圖標(biāo)和電話號(hào)碼包中的電話圖標(biāo)
-
電子郵件圖標(biāo)和電子郵件地址鏈接
4.在樹形圖中添加形狀：
diagram.addShape("template", {
template,
defaults
});
下一步將向JavaScript樹形圖中添加自定義形狀。可以使用addShape方法來完成。這種簡(jiǎn)單的方法使您可以利用模板和默認(rèn)的形狀配置快速添加各種形狀。
5.準(zhǔn)備數(shù)據(jù)并將其解析到圖中：
diagram.data.parse(data);
const data = [
{
id: "main",
name: "Kristin Mccoy",
post: "Medical director",
phone: "(405) 555-0128",
mail: "kmccoy@gmail.com",
photo: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://docs.dhtmlx.com/diagram/samples/common/big_img/big-avatar-10.jpg",
parent: "3",
},
];
為了用內(nèi)容填充樹形圖，您必須應(yīng)用parse方法。
6.修改JavaScript樹形圖中特定元素的外觀：
<style>
.dhx-diagram-demo_personal-card {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: white;
color: rgba(0, 0, 0, 0.7);
border: 1px solid #DFDFDF;
padding: 10px 12px;
}
.dhx-diagram-demo_personal-card i {
color: rgba(0, 0, 0, 0.7);
height: 20px;
width: 20px;
font-size: 18px;
}
.dhx-diagram-demo_personal-card__info {
display: flex;
}
.dhx-diagram-demo_personal-card__info a {
color:#0288D1
}
.dhx-diagram-demo_personal-card__container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.dhx-diagram-demo_personal-card__container h3, .dhx-diagram-demo_personal-card__container p {
text-align: left;
font-size: 14px;
line-height: 20px;
height: 20px;
margin: 0 0 4px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dhx-diagram-demo_personal-card__container i {
margin-right: 4px;
}
.dhx-diagram-demo_personal-card__img-container {
min-width: 93px;
width: 93px;
margin-right: 12px;
}
.dhx-diagram-demo_personal-card__img-container img {
width: inherit;
height: auto;
}
</style>
最后，您可以通過CSS為個(gè)人卡片元素定義樣式，從而操縱HTML5樹形圖的外觀。您可以將一系列CSS屬性應(yīng)用于所選元素，并指定其尺寸，對(duì)齊方式，間距，顏色和任何其他設(shè)置。
完成最后一步后，您可以開始使用此樹形圖來勾勒公司的內(nèi)部結(jié)構(gòu)。
該指南顯示了如何將我們的JavaScript圖庫用于構(gòu)建樹圖。除了此圖類型之外，您還可以使用簡(jiǎn)單的HTML模板（例如網(wǎng)絡(luò)圖或UML類圖）來構(gòu)建任何其他圖。
想要購(gòu)買dhtmlxSuite正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買球 
16次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線