dhtmlxSuite是一個用JavaScript建立的富客戶端開發框架。它是一個JavaScript UI庫，用于建立一個完整的具有Ajax能力的前臺組件。用戶可以使用它建立一個企業級的跨瀏覽器Web應用和移動應用程序，它能提供優秀的性能和更豐富的用戶體驗。
點擊下載dhtmlxSuite最新版
現在可以用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 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 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: "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",
},
];
為了用內容填充樹形圖，您必須應用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為個人卡片元素定義樣式，從而操縱HTML5樹形圖的外觀。您可以將一系列CSS屬性應用于所選元素，并指定其尺寸，對齊方式，間距，顏色和任何其他設置。
完成最后一步后，您可以開始使用此樹形圖來勾勒公司的內部結構。
該指南顯示了如何將我們的JavaScript圖庫用于構建樹圖。除了此圖類型之外，您還可以使用簡單的HTML模板（例如網絡圖或UML類圖）來構建任何其他圖。
想要購買dhtmlxSuite正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
1次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線