国产lululu在线视频,99视频在线免费,一区二区三区

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

交互式圖表dhtmlxDiagram教程：如何創(chuàng)建基本的JavaScript實(shí)體關(guān)系圖

翻譯|使用教程|編輯：楊鵬連|2020-11-17 09:51:07.413|閱讀 352 次

概述：如果您曾經(jīng)設(shè)計(jì)關(guān)系數(shù)據(jù)庫(kù)，那么您可能知道專(zhuān)門(mén)用于此任務(wù)的關(guān)鍵數(shù)據(jù)可視化工具-JavaScript實(shí)體關(guān)系圖。這是一種更有用的圖類(lèi)型，可以使用DHTMLX Diagram從頭開(kāi)始構(gòu)建，我們?cè)诒疚闹懈嬖V您應(yīng)該如何做。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

dhtmlxDiagram是一個(gè)圖表庫(kù)，只需幾行代碼就能生成任何你需要的圖表。借助自動(dòng)布局和實(shí)時(shí)圖編輯器，以整齊的層次結(jié)構(gòu)可視化復(fù)雜數(shù)據(jù)。JavaScript dhtmlxDiagram允許您向Web應(yīng)用程序中添加漂亮的交互式圖表，圖表和圖形。借助這種輕巧而快速的組件，您的數(shù)據(jù)將以清晰直觀的方式表示。

點(diǎn)擊下載dhtmlxDiagram試用版

什么是實(shí)體關(guān)系圖

實(shí)體關(guān)系圖（也稱(chēng)為ER圖或ERD）是一種圖，旨在通過(guò)各種實(shí)體，它們的屬性以及它們之間的關(guān)系以圖形方式表示數(shù)據(jù)庫(kù)中的數(shù)據(jù)。這種類(lèi)似于流程圖的圖有助于理解數(shù)據(jù)庫(kù)的邏輯組成。應(yīng)該注意的是，ERD僅在處理關(guān)系和結(jié)構(gòu)化數(shù)據(jù)時(shí)才可行。

實(shí)體關(guān)系圖通常說(shuō)明三個(gè)關(guān)鍵組件：

實(shí)體

在ER圖中的實(shí)體下，我們指的是關(guān)于哪些數(shù)據(jù)存儲(chǔ)在系統(tǒng)中（例如數(shù)據(jù)庫(kù)中的行）的唯一可識(shí)別的人員，對(duì)象，概念等。實(shí)體以矩形可視化，并由單數(shù)名詞表示。

屬性

屬性通常充當(dāng)實(shí)體的命名區(qū)別特征，但也可以描述其他主要ERD組件的特定特征。屬性可以視為數(shù)據(jù)庫(kù)的列。所有圖表元素都可以具有以橢圓形表示的無(wú)限多個(gè)屬性。屬性通過(guò)連接器與實(shí)體和關(guān)系鏈接。

關(guān)系

關(guān)系顯示圖表中的多個(gè)元素（實(shí)體）如何通過(guò)某些動(dòng)作相互關(guān)聯(lián)。此動(dòng)作在菱形的幫助下顯示并使用動(dòng)詞標(biāo)記。這些關(guān)系通過(guò)使用帶有特殊符號(hào)（稱(chēng)為基數(shù)）的連接器顯示。在ERD的上下文中，基數(shù)指定可以在不同實(shí)體的實(shí)例之間建立多少關(guān)系。有幾種表示法可以幫助傳達(dá)基數(shù)，其中最流行的是“魚(yú)尾紋”和“ Chen”表示法。

ER圖具有廣泛的用途，但是在數(shù)據(jù)庫(kù)積極參與的領(lǐng)域尤其流行，例如：

軟件工程
商業(yè)分析
教育項(xiàng)目
科學(xué)研究

DHTMLX編寫(xiě)的JavaScript實(shí)體關(guān)系圖示例

現(xiàn)在，我們將探索借助圖表控件構(gòu)建的基本JavaScript ER圖。

我們的示例展示了軟件開(kāi)發(fā)公司的實(shí)體關(guān)系圖。圖表結(jié)構(gòu)包括四個(gè)實(shí)體，每個(gè)實(shí)體都補(bǔ)充有幾個(gè)描述其獨(dú)特屬性的屬性：

軟件開(kāi)發(fā)公司–名稱(chēng)，位置
客戶(hù)–名稱(chēng)，電子郵件
項(xiàng)目–名稱(chēng)，類(lèi)型
開(kāi)發(fā)人員–名稱(chēng)，技術(shù)，小時(shí)費(fèi)率

所有提供的實(shí)體都通過(guò)特定操作相互關(guān)聯(lián)，即訂單，薪資，雇用，專(zhuān)長(zhǎng)，工作。為了進(jìn)一步定義數(shù)字上下文中實(shí)體之間的關(guān)系，我們從Chen的符號(hào)類(lèi)型中求助于1-M（一對(duì)多）基數(shù)關(guān)系。簡(jiǎn)而言之，我們得到以下內(nèi)容：

有一家軟件開(kāi)發(fā)公司專(zhuān)門(mén)研究客戶(hù)訂購(gòu)的不同類(lèi)型的項(xiàng)目。該公司可以擁有許多客戶(hù)，并可以雇用任何數(shù)量的開(kāi)發(fā)人員來(lái)從事項(xiàng)目。
客戶(hù)向公司付款，并且只能訂購(gòu)一個(gè)項(xiàng)目。
一個(gè)開(kāi)發(fā)人員可以處理一個(gè)項(xiàng)目，但是一個(gè)項(xiàng)目可以由許多開(kāi)發(fā)人員完成。

我們必須指出，更復(fù)雜的ER圖可以包含我們?cè)诒疚闹形瓷婕暗膱D元素的不同類(lèi)型和類(lèi)別。

如何使用DHTMLX創(chuàng)建JavaScript實(shí)體關(guān)系圖

使用DHTMLX圖表組件，可以通過(guò)編碼或在圖編輯器中直接構(gòu)建ERD 。

DHTMLX JavaScript實(shí)體關(guān)系圖由預(yù)定義的形狀和連接器組成。因此，僅需執(zhí)行幾個(gè)步驟即可初始化圖，配置其形狀并用數(shù)據(jù)填充圖。您可以在我們的文檔指南中了解有關(guān)創(chuàng)建不同圖表類(lèi)型的更多信息。

圖表編輯器是一種開(kāi)箱即用的工具，無(wú)需編碼即可創(chuàng)建和設(shè)計(jì)圖表。它可以嵌入到任何Web應(yīng)用程序中，并借助DHTMLX Diagram API來(lái)根據(jù)您的需求進(jìn)行定制。

圖表編輯器具有直觀的界面，由兩個(gè)側(cè)面板，一個(gè)網(wǎng)格區(qū)域和一個(gè)工具欄組成。因此，最終用戶(hù)將不需要太多時(shí)間來(lái)掌握其功能并開(kāi)始繪制圖表。

讓我們重點(diǎn)介紹如何使用編輯器的主要功能。

添加和連接形狀

在左側(cè)面板中，列出了創(chuàng)建ER圖所需的內(nèi)置形狀，包括矩形，橢圓形和菱形。通過(guò)拖放，可以在網(wǎng)格區(qū)域上輕松移動(dòng)所有必需的形狀，并通過(guò)連接器將它們組合成一個(gè)單一的結(jié)構(gòu)。為了加快該過(guò)程，用戶(hù)可以利用多選功能同時(shí)操縱（復(fù)制，粘貼，刪除）形狀。

編輯形狀和連接器

當(dāng)用戶(hù)單擊放置在網(wǎng)格上的特定形狀時(shí)，該形狀變?yōu)榭删庉嫷模⑶铱梢哉{(diào)整大小，移動(dòng)和旋轉(zhuǎn)。同時(shí)，右側(cè)面板中提供了更多高級(jí)編輯選項(xiàng)。在這里，用戶(hù)可以通過(guò)指定形狀的精確大小和位置，修改筆觸和背景色，選擇并應(yīng)用適當(dāng)?shù)奈谋緲邮剑瑏?lái)使ER圖看起來(lái)像他們想要的樣子。