如何使用交互式图表创建基本的JavaScript实体关系图
dhtmlxDiagram是一个图表库，只需几行代码就能生成任何你需要的图表。借助自动布局和实时图编辑器，以整齐的层次结构可视化复杂数据。JavaScript dhtmlxDiagram允许您向Web应用程序中添加漂亮的交互式图表，图表和图形。借助这种轻巧而快速的组件，您的数据将以清晰直观的方式表示。
什么是实体关系图
实体关系图（也称为ER图或ERD）是一种图，旨在通过各种实体，它们的属性以及它们之间的关系以图形方式表示数据库中的数据。这种类似于流程图的图有助于理解数据库的逻辑组成。应该注意的是，ERD仅在处理关系和结构化数据时才可行。
实体关系图通常说明三个关键组件：
实体
在ER图中的实体下，我们指的是关于哪些数据存储在系统中（例如数据库中的行）的唯一可识别的人员，对象，概念等。实体以矩形可视化，并由单数名词表示。
属性
属性通常充当实体的命名区别特征，但也可以描述其他主要ERD组件的特定特征。属性可以视为数据库的列。所有图表元素都可以具有以椭圆形表示的无限多个属性。属性通过连接器与实体和关系链接。
关系
关系显示图表中的多个元素（实体）如何通过某些动作相互关联。此动作在菱形的帮助下显示并使用动词标记。这些关系通过使用带有特殊符号（称为基数）的连接器显示。在ERD的上下文中，基数指定可以在不同实体的实例之间建立多少关系。有几种表示法可以帮助传达基数，其中最流行的是“鱼尾纹”和“ Chen”表示法。
ER图具有广泛的用途，但是在数据库积极参与的领域尤其流行，例如：
软件工程
商业分析
教育项目
科学研究
DHTMLX编写的JavaScript实体关系图示例
现在，我们将探索借助图表控件构建的基本JavaScript ER图。
我们的示例展示了软件开发公司的实体关系图。图表结构包括四个实体，每个实体都补充有几个描述其独特属性的属性：
软件开发公司–名称，位置
客户–名称，电子邮件
项目–名称，类型
开发人员–名称，技术，小时费率
所有提供的实体都通过特定操作相互关联，即订单，薪资，雇用，专长，工作。为了进一步定义数字上下文中实体之间的关系，我们从Chen的符号类型中求助于1-M（一对多）基数关系。简而言之，我们得到以下内容：
有一家软件开发公司专门研究客户订购的不同类型的项目。该公司可以拥有许多客户，并可以雇用任何数量的开发人员来从事项目。
客户向公司付款，并且只能订购一个项目。
一个开发人员可以处理一个项目，但是一个项目可以由许多开发人员完成。
我们必须指出，更复杂的ER图可以包含我们在本文中未涉及的图元素的不同类型和类别。
如何使用DHTMLX创建JavaScript实体关系图
使用DHTMLX图表组件，可以通过编码或在图编辑器中直接构建ERD 。
DHTMLX JavaScript实体关系图由预定义的形状和连接器组成。因此，仅需执行几个步骤即可初始化图，配置其形状并用数据填充图。您可以在我们的文档指南中了解有关创建不同图表类型的更多信息。
图表编辑器是一种开箱即用的工具，无需编码即可创建和设计图表。它可以嵌入到任何Web应用程序中，并借助DHTMLX Diagram API来根据您的需求进行定制。
图表编辑器具有直观的界面，由两个侧面板，一个网格区域和一个工具栏组成。因此，最终用户将不需要太多时间来掌握其功能并开始绘制图表。
让我们重点介绍如何使用编辑器的主要功能。
添加和连接形状
在左侧面板中，列出了创建ER图所需的内置形状，包括矩形，椭圆形和菱形。通过拖放，可以在网格区域上轻松移动所有必需的形状，并通过连接器将它们组合成一个单一的结构。为了加快该过程，用户可以利用多选功能同时操纵（复制，粘贴，删除）形状。
编辑形状和连接器
当用户单击放置在网格上的特定形状时，该形状变为可编辑的，并且可以调整大小，移动和旋转。同时，右侧面板中提供了更多高级编辑选项。在这里，用户可以通过指定形状的精确大小和位置，修改笔触和背景色，选择并应用适当的文本样式，来使ER图看起来像他们想要的样子。
导出/导入ER图
可以将完成的图导出/导入为PDF / PNG和JSON格式。因此，用户可以与同事共享其图，从而增强其项目内的协作。
遵循此简单算法，最终用户可以轻松构建实体关系图并继续将其用于业务目的。
结论
总而言之，我们的JavaScript Diagram组件为Web开发人员提供了广泛的功能，通过添加几行代码或在Diagram Editor中安排和样式化所需的形状，即可通过各种类型的图表可视化数据。
想要在您的项目中免费试用吗？这是我们的JS库的30天免费试用版。
APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率
想要购买dhtmlxDiagram正版授权，或了解慧都APS系统请点击【咨询在线客服】
本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果
原文链接：https://www.evget.com/article/2020/11/17/39178.html