彩票走势图

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

翻译|使用教程|编辑:杨鹏连|2020-11-17 09:51:07.413|阅读 283 次

概述:如果您曾经设计关系数据库,那么您可能知道专门用于此任务的关键数据可视化工具-JavaScript实体关系图。这是一种更有用的图类型,可以使用DHTMLX Diagram从头开始构建,我们在本文中告诉您应该如何做。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

dhtmlxDiagram是一个图表库,只需几行代码就能生成任何你需要的图表。借助自动布局和实时图编辑器,以整齐的层次结构可视化复杂数据。JavaScript dhtmlxDiagram允许您向Web应用程序中添加漂亮的交互式图表,图表和图形。借助这种轻巧而快速的组件,您的数据将以清晰直观的方式表示。

点击下载dhtmlxDiagram试用版

什么是实体关系图

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

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

  • 实体
在ER图中的实体下,我们指的是关于哪些数据存储在系统中(例如数据库中的行)的唯一可识别的人员,对象,概念等。实体以矩形可视化,并由单数名词表示。
  • 属性
属性通常充当实体的命名区别特征,但也可以描述其他主要ERD组件的特定特征。属性可以视为数据库的列。所有图表元素都可以具有以椭圆形表示的无限多个属性。属性通过连接器与实体和关系链接。
  • 关系
关系显示图表中的多个元素(实体)如何通过某些动作相互关联。此动作在菱形的帮助下显示并使用动词标记。这些关系通过使用带有特殊符号(称为基数)的连接器显示。在ERD的上下文中,基数指定可以在不同实体的实例之间建立多少关系。有几种表示法可以帮助传达基数,其中最流行的是“鱼尾纹”和“ Chen”表示法。

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

  • 软件工程
  • 商业分析
  • 教育项目
  • 科学研究
DHTMLX编写的JavaScript实体关系图示例

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

JavaScript实体关系图
我们的示例展示了软件开发公司的实体关系图。图表结构包括四个实体,每个实体都补充有几个描述其独特属性的属性:
  • 软件开发公司–名称,位置
  • 客户–名称,电子邮件
  • 项目–名称,类型
  • 开发人员–名称,技术,小时费率
所有提供的实体都通过特定操作相互关联,即订单,薪资,雇用,专长,工作。为了进一步定义数字上下文中实体之间的关系,我们从Chen的符号类型中求助于1-M(一对多)基数关系。简而言之,我们得到以下内容:
  • 有一家软件开发公司专门研究客户订购的不同类型的项目。该公司可以拥有许多客户,并可以雇用任何数量的开发人员来从事项目。
  • 客户向公司付款,并且只能订购一个项目。
  • 一个开发人员可以处理一个项目,但是一个项目可以由许多开发人员完成。
我们必须指出,更复杂的ER图可以包含我们在本文中未涉及的图元素的不同类型和类别。

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

使用DHTMLX图表组件,可以通过编码或在图编辑器中直接构建ERD 。

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

图表编辑器是一种开箱即用的工具,无需编码即可创建和设计图表。它可以嵌入到任何Web应用程序中,并借助DHTMLX Diagram API来根据您的需求进行定制。

图表编辑器具有直观的界面,由两个侧面板,一个网格区域和一个工具栏组成。因此,最终用户将不需要太多时间来掌握其功能并开始绘制图表。

实体关系图-DHTMLX图编辑器
让我们重点介绍如何使用编辑器的主要功能。
  • 添加和连接形状
DHTMLX图表编辑器-ERD

在左侧面板中,列出了创建ER图所需的内置形状,包括矩形,椭圆形和菱形。通过拖放,可以在网格区域上轻松移动所有必需的形状,并通过连接器将它们组合成一个单一的结构。为了加快该过程,用户可以利用多选功能同时操纵(复制,粘贴,删除)形状。

  • 编辑形状和连接器
DHTMLX图表编辑器-ERD
当用户单击放置在网格上的特定形状时,该形状变为可编辑的,并且可以调整大小,移动和旋转。同时,右侧面板中提供了更多高级编辑选项。在这里,用户可以通过指定形状的精确大小和位置,修改笔触和背景色,选择并应用适当的文本样式,来使ER图看起来像他们想要的样子。
  • 导出/导入ER图
可以将完成的图导出/导入为PDF / PNG和JSON格式。因此,用户可以与同事共享其图,从而增强其项目内的协作。

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

结论

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

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

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

想要购买dhtmlxDiagram正版授权,或了解慧都APS系统请点击


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP