交互式图表dhtmlxDiagram教程：如何创建基本的JavaScript实体关系图

dhtmlxDiagram试用版

什么是实体关系图

实体关系图（也称为ER图或ERD）是一种图，旨在通过各种实体，它们的属性以及它们之间的关系以图形方式表示数据库中的数据。这种类似于流程图的图有助于理解数据库的逻辑组成。应该注意的是，ERD仅在处理关系和结构化数据时才可行。

实体关系图通常说明三个关键组件：

• 实体

在ER图中的实体下，我们指的是关于哪些数据存储在系统中（例如数据库中的行）的唯一可识别的人员，对象，概念等。实体以矩形可视化，并由单数名词表示。

• 属性

属性通常充当实体的命名区别特征，但也可以描述其他主要ERD组件的特定特征。属性可以视为数据库的列。所有图表元素都可以具有以椭圆形表示的无限多个属性。属性通过连接器与实体和关系链接。

• 关系

关系显示图表中的多个元素（实体）如何通过某些动作相互关联。此动作在菱形的帮助下显示并使用动词标记。这些关系通过使用带有特殊符 （称为基数）的连接器显示。在ERD的上下文中，基数指定可以在不同实体的实例之间建立多少关系。有几种表示法可以帮助传达基数，其中最流行的是“鱼尾纹”和“ Chen”表示法。

ER图具有广泛的用途，但是在数据库积极参与的领域尤其流行，例如：

• 软件工程
• 商业分析
• 教育项目
• 科学研究

DHTMLX编写的JavaScript实体关系图示例

现在，我们将探索借助图表控件构建的基本JavaScript ER图。

• 软件开发公司–名称，位置
• 客户–名称，电子邮件
• 项目–名称，类型
• 开发人员–名称，技术，小时费率

所有提供的实体都通过特定操作相互关联，即订单，薪资，雇用，专长，工作。为了进一步定义数字上下文中实体之间的关系，我们从Chen的符 类型中求助于1-M（一对多）基数关系。简而言之，我们得到以下内容：

• 有一家软件开发公司专门研究客户订购的不同类型的项目。该公司可以拥有许多客户，并可以雇用任何数量的开发人员来从事项目。
• 客户向公司付款，并且只能订购一个项目。
• 一个开发人员可以处理一个项目，但是一个项目可以由许多开发人员完成。

如何使用DHTMLX创建JavaScript实体关系图

DHTMLX JavaScript实体关系图由预定义的形状和连接器组成。因此，仅需执行几个步骤即可初始化图，配置其形状并用数据填充图。您可以在我们的文档指南中了解有关创建不同图表类型的更多信息。

• 添加和连接形状

• 导出/导入ER图

可以将完成的图导出/导入为PDF / PNG和JSON格式。因此，用户可以与同事共享其图，从而增强其项目内的协作。

遵循此简单算法，最终用户可以轻松构建实体关系图并继续将其用于业务目的。

结论

总而言之，我们的JavaScript Diagram组件为Web开发人员提供了广泛的功能，通过添加几行代码或在Diagram Editor中安排和样式化所需的形状，即可通过各种类型的图表可视化数据。

想要在您的项目中免费试用吗是我们的JS库的30天免费试用版。

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买dhtmlxDiagram正版授权，或了解APS系统请点击【咨询在线客服】

标签：