CN109815239B - 一种结合ECharts创建关系图谱的方法 - Google Patents
一种结合ECharts创建关系图谱的方法 Download PDFInfo
- Publication number
- CN109815239B CN109815239B CN201910072297.5A CN201910072297A CN109815239B CN 109815239 B CN109815239 B CN 109815239B CN 201910072297 A CN201910072297 A CN 201910072297A CN 109815239 B CN109815239 B CN 109815239B
- Authority
- CN
- China
- Prior art keywords
- nodes
- node
- data
- displayed
- acquiring
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Processing Or Creating Images (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种结合ECharts创建关系图谱的方法，属于计算机技术领域。本发明的结合ECharts创建关系图谱的方法，包括以下步骤：S1、根据查询条件，查出第一个节点和所有要显示的数据；S2、从第一个节点开始，查出所有与第一个节点有关联的数据；S3、对所有要显示的数据进行循环，分别查找有关联的节点；S4、获取各层级的节点信息，对节点进行计算，获取节点坐标；S5、从所有要显示的数据中获取节点的所有关联关系；S6、根据节点的关联关系进行连线，创建关联图谱。该发明的结合ECharts创建关系图谱的方法能够将纷繁复杂的数据清晰的展示出来，同时对节点进行自由拖拽，具有很好的推广应用价值。
Description
技术领域
本发明涉及计算机技术领域，具体提供一种结合ECharts创建关系图谱的方法。
背景技术
ECharts即Enterprise Charts的缩写，为商业级数据图表，是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的适量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts的graph图可用来构建图谱，默认有环状布局、力引导布局两种布局方式，但是这两种布局方式无法直观的展现出数据间的层次关系，需要进一步改进。
发明内容
本发明的技术任务是针对上述存在的问题，提供一种能够将纷繁复杂的数据清晰的展示出来，同时对节点进行自由拖拽，增加展示效果灵活性的结合ECharts创建关系图谱的方法。
为实现上述目的，本发明提供了如下技术方案：
一种结合ECharts创建关系图谱的方法，该方法具体包括以下步骤：
S1、根据查询条件，查出第一个节点和所有要显示的数据；
S2、从第一个节点开始，查出所有与第一个节点有关联的数据；
S3、对所有要显示的数据进行循环，分别查找有关联的节点；
S4、获取各层级的节点信息，对节点进行计算，获取节点坐标；
S5、从所有要显示的数据中获取节点的所有关联关系；
S6、根据节点的关联关系进行连线，创建关联图谱。
根据查询条件，查出第一个节点L1和所有要显示的数据ListData。
从第一个节点L1开始，查出所有和L1有关联的数据，分别记为L1.1、L1.2、L1.3……L1.n。
对L1.1、L1.2、L1.3……L1.n进行循环，分别查找有关联的节点，比如第m个，则找出L1.m.1……L1.m.n，并且从中去掉前面出现过的节点。
获取各层级的节点信息，对节点进行计算，获取节点坐标(x，y)。
获取节点坐标分为从左到右分布和从上到下分布。
从左到右分布的过程为：
1)获取要展示数据的页面的高和宽，分别记为height和width。
2)通过所有要显示的数据ListData，得出节点的总层级Lc，获取到层与层之间的距离：Lcl＝width/Lc,如果Lcl<100,则我们赋值Lcl＝100，从而让我们保证了数据在横向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的横坐标x＝节点层级*Lcl。
3)通过所有要显示的数据ListData，对各个层级节点分层级处理，得出本层节点的总数Cs，获取同级相邻节点间的距离Csl＝height/Cs，如果Csl<60，则我们赋值Csl＝60，从而让我们保证了数据在纵向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的纵坐标y＝节点顺序*Csl。
4)获取各个节点的坐标(x,y)。
从上到下分布过程为：
1)获取要展示数据的页面的高和宽，分别记为height和width。
2)通过所有要显示的数据ListData，对各个层级节点分层级处理，得出本层节点的总数Cs，从而获取同级相邻节点之间的距离Csl＝width/Cs，如果Csl<100，则我们赋值Csl＝100，从而让我们保证了数据在横向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的横坐标x＝节点顺序*Csl。
3)通过所有要显示的数据ListData，得出节点的总层级Lc，获取层与层之间的距离Lcl＝height/Lc,如果Lcl<60,则我们赋值Lcl＝60，从而让我们保证了数据在纵向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的纵坐标y＝节点层级*Lcl。
4)获取各个节点的坐标(x,y)。
从ListData中获取节点的所有关联关系，记为(Ln，Lm，value)，表示节点Ln到节点Lm的value关系。
根据节点的关联关系进行连线，创建关联图谱。若节点之间有多条线，则设置连线为弧线，每条弧线的弧度不同，保证节点之间连线不重复。若节点在不同的层级，且层级差大于1，则连线使用弧线，保证连线与节点不重合。若节点在同层级，且中间隔着其他节点，则连线使用弧线，保证连线与节点不重合。
该结合ECharts创建关系图谱的方法减少了ECharts在节点摆放时需要大量计算和平衡节点所需的时间，解决了ECharts的图原有展示方式不能体现数据的层次结构的问题，并且使节点可以拖拽，从而将纷繁复杂的数据以清晰的树状结构展示出来，使数据间关系一目了然，增加了展示的灵活性。
作为优选，步骤S3中，查找有关联的节点，并从中去掉前面出现过的节点。
作为优选，步骤S4中，对节点进行计算，获取节点坐标分为从左到右分布和从上到下分布。
作为优选，从左到右分布的过程为：
1)获取要展示数据的页面的高和宽；
2)通过所有要显示的数据，得出节点的总层级，获取到层与层之间的距离，得出各个节点的横坐标；
3)通过所有要显示的数据，对各个层级节点分层级处理，得出本层节点的总数，获取同级相邻节点间的距离，得出各个节点的纵坐标；
4)获取各个节点的坐标。
作为优选，从上到下分布的过程为：
1)获取要展示数据的页面的高和宽；
2)通过所有要显示的数据，对各个层级节点分层级处理，得出本层节点的总数，从而获取同级相邻节点之间的距离，得出各个节点的横坐标；
3)通过所有要显示的数据，得出节点的总层级，获取层与层之间的距离，得出各个节点的纵坐标；
4)获取各个节点的坐标。
作为优选，步骤S6中，根据节点关联关系进行连线创建关联图谱过程中，若节点之间有多条线，则设置连线为弧线，每条弧线的弧度不同，保证节点之间连线不重复。
作为优选，步骤S6中，根据节点关联关系进行连线创建关联图谱过程中，若节点在不同的层级，且层级差大于1，则连线使用弧线，保证连线与节点不重合。
作为优选，步骤S6中，根据节点关联关系进行连线创建关联图谱过程中，若节点在同层级，且中间隔着其他节点，则连线使用弧线，保证连线与节点不重合。
与现有技术相比，本发明的结合ECharts创建关系图谱的方法具有以下突出的有益效果：所述结合ECharts创建关系图谱的方法减少了ECharts在节点摆放时需要大量计算和平衡节点所需的时间，解决了ECharts的图原有展示方式不能体现数据的层次结构的问题，并且使节点可以拖拽，从而将纷繁复杂的数据以清晰的树状结构展示出来，使数据间关系一目了然，增加了展示的灵活性，具有良好的推广应用价值。
附图说明
图1是本发明所述结合ECharts创建关系图谱的方法的过程示意图。
具体实施方式
下面将结合附图和实施例，对本发明的结合ECharts创建关系图谱的方法作进一步详细说明。
实施例
如图1所示，本发明的结合ECharts创建关系图谱的方法主要包括以下步骤：
S1、根据查询条件，查出第一个节点和所有要显示的数据。
根据查询条件，查出第一个节点L1和所有要显示的数据ListData。
S2、从第一个节点开始，查出所有与第一个节点有关联的数据。
从第一个节点L1开始，查出所有和L1有关联的数据，分别记为L1.1、L1.2、L1.3……L1.n。
S3、对所有要显示的数据进行循环，分别查找有关联的节点。
对L1.1、L1.2、L1.3……L1.n进行循环，分别查找有关联的节点，比如第m个，则找出L1.m.1……L1.m.n，并且从中去掉前面出现过的节点。
S4、获取各层级的节点信息，对节点进行计算，获取节点坐标。
对节点进行计算，获取节点坐标分为从左到右分布和从上到下分布。
从左到右分布的过程为：
1)获取要展示数据的页面的高和宽，分别记为height和width。
2)通过所有要显示的数据ListData，得出节点的总层级Lc，获取到层与层之间的距离：Lcl＝width/Lc,如果Lcl<100,则我们赋值Lcl＝100，从而让我们保证了数据在横向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的横坐标x＝节点层级*Lcl。
3)通过所有要显示的数据ListData，对各个层级节点分层级处理，得出本层节点的总数Cs，获取同级相邻节点间的距离Csl＝height/Cs，如果Csl<60，则我们赋值Csl＝60，从而让我们保证了数据在纵向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的纵坐标y＝节点顺序*Csl。
4)获取各个节点的坐标(x,y)。
从上到下分布过程为：
1)获取要展示数据的页面的高和宽，分别记为height和width。
2)通过所有要显示的数据ListData，对各个层级节点分层级处理，得出本层节点的总数Cs，从而获取同级相邻节点之间的距离Csl＝width/Cs，如果Csl<100，则我们赋值Csl＝100，从而让我们保证了数据在横向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的横坐标x＝节点顺序*Csl。
3)通过所有要显示的数据ListData，得出节点的总层级Lc，获取层与层之间的距离Lcl＝height/Lc,如果Lcl<60,则我们赋值Lcl＝60，从而让我们保证了数据在纵向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的纵坐标y＝节点层级*Lcl。
4)获取各个节点的坐标(x,y)。
S5、从所有要显示的数据中获取节点的所有关联关系，记为(Ln，Lm，value)，表示节点Ln到节点Lm的value关系。
S6、根据节点的关联关系(Ln，Lm，value)进行连线，创建关联图谱。
若节点之间有多条线，则设置连线为弧线，每条弧线的弧度不同，保证节点之间连线不重复。若节点在不同的层级，且层级差大于1，则连线使用弧线，保证连线与节点不重合。若节点在同层级，且中间隔着其他节点，则连线使用弧线，保证连线与节点不重合。除上述情况外，其余均用直线连线。
以上所述的实施例，只是本发明较优选的具体实施方式，本领域的技术人员在本发明技术方案范围内进行的通常变化和替换都应包含在本发明的保护范围内。
Claims (2)
1.一种结合ECharts创建关联图谱的方法，其特征在于：该方法具体包括以下步骤：
S1、根据查询条件，查出第一个节点和所有要显示的数据；
S2、从第一个节点开始，查出所有与第一个节点有关联的数据；
S3、对所有要显示的数据进行循环，分别查找有关联的节点；
S4、获取各层级的节点信息，对节点进行计算，获取节点坐标，对节点进行计算，获取节点坐标分为从左到右分布和从上到下分布，从左到右分布的过程为：
1)获取要展示数据的页面的高和宽；
2)通过所有要显示的数据，得出节点的总层级，获取到层与层之间的距离，得出各个节点的横坐标；
3)通过所有要显示的数据，对各个层级节点分层级处理，得出本层节点的总数，获取同级相邻节点间的距离，得出各个节点的纵坐标；
4)获取各个节点的坐标；
从上到下分布的过程为：
1)获取要展示数据的页面的高和宽；
2)通过所有要显示的数据，对各个层级节点分层级处理，得出本层节点的总数，从而获取同级相邻节点之间的距离，得出各个节点的横坐标；
3)通过所有要显示的数据，得出节点的总层级，获取层与层之间的距离，得出各个节点的纵坐标；
4)获取各个节点的坐标；
S5、从所有要显示的数据中获取节点的所有关联关系；
S6、根据节点的关联关系进行连线，创建关联图谱，根据节点关联关系进行连线创建关联图谱过程中，若节点之间有多条线，则设置连线为弧线，每条弧线的弧度不同，保证节点之间连线不重复；根据节点关联关系进行连线创建关联图谱过程中，若节点在不同的层级，且层级差大于1，则连线使用弧线，保证连线与节点不重合；根据节点关联关系进行连线创建关联图谱过程中，若节点在同层级，且中间隔着其他节点，则连线使用弧线，保证连线与节点不重合。
2.根据权利要求1所述的结合ECharts创建关联图谱的方法，其特征在于：步骤S3中，查找有关联的节点，并从中去掉前面出现过的节点。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910072297.5A CN109815239B (zh) | 2019-01-25 | 2019-01-25 | 一种结合ECharts创建关系图谱的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910072297.5A CN109815239B (zh) | 2019-01-25 | 2019-01-25 | 一种结合ECharts创建关系图谱的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109815239A CN109815239A (zh) | 2019-05-28 |
| CN109815239B true CN109815239B (zh) | 2023-05-12 |
Family
ID=66605081
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910072297.5A Active CN109815239B (zh) | 2019-01-25 | 2019-01-25 | 一种结合ECharts创建关系图谱的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109815239B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111008022B (zh) * | 2019-12-04 | 2023-12-12 | 浙江大搜车软件技术有限公司 | 关系图生成方法、装置、计算机设备和存储介质 |
| CN113094517A (zh) * | 2021-04-27 | 2021-07-09 | 中国美术学院 | 一种产品知识单元的构建方法和系统 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106445931A (zh) * | 2015-08-04 | 2017-02-22 | 阿里巴巴集团控股有限公司 | 数据库节点关联关系展示方法及装置 |
| CN106557323A (zh) * | 2016-11-09 | 2017-04-05 | 北京锐安科技有限公司 | 一种网络图可视化布局方法及装置 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2234089A1 (en) * | 2008-03-26 | 2010-09-29 | Mitsubishi Electric Corporation | Map data creating device and map drawing device |
-
2019
- 2019-01-25 CN CN201910072297.5A patent/CN109815239B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106445931A (zh) * | 2015-08-04 | 2017-02-22 | 阿里巴巴集团控股有限公司 | 数据库节点关联关系展示方法及装置 |
| CN106557323A (zh) * | 2016-11-09 | 2017-04-05 | 北京锐安科技有限公司 | 一种网络图可视化布局方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| 信息系统应用关系分析器;党执政等;《计算机系统应用》;20160715(第07期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109815239A (zh) | 2019-05-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9128998B2 (en) | Presentation of data object hierarchies | |
| US9928646B2 (en) | Rendering hierarchical visualizations of data sets | |
| US20110106636A1 (en) | Method and system for managing online presence | |
| CN109815239B (zh) | 一种结合ECharts创建关系图谱的方法 | |
| US10810364B2 (en) | Data flow view for a spreadsheet | |
| CN102831145A (zh) | 用于使用图形表示来管理查询结果的系统和方法 | |
| Wang et al. | A fast candidate viewpoints filtering algorithm for multiple viewshed site planning | |
| CN111177497A (zh) | 层次数据的关联关系可视化处理方法、服务器及存储介质 | |
| CN110567459A (zh) | 一种路径规划方法和装置 | |
| CN103852080B (zh) | 对象的地图显示方法及系统 | |
| CN102831169A (zh) | 地理信息系统中的平面图形关系确定方法及系统 | |
| CN111859931B (zh) | 文本的提取处理方法、装置、终端和存储介质 | |
| CN115309397B (zh) | 一种数据解释模型的画布拓扑管理方法和系统 | |
| US9129318B2 (en) | System and method for allocating suppliers using geographical information system and supplier capability | |
| US8488183B2 (en) | Moving labels in graphical output to avoid overprinting | |
| CN105512262A (zh) | 一种电子地图呈现方法及系统 | |
| CN108334251A (zh) | 一种视图复用的方法及装置 | |
| CN105808591A (zh) | 一种流量展示方法及装置 | |
| US20170060600A1 (en) | Systems and methods for navigating within and between websites | |
| CN104919454A (zh) | 管理与具有多个分组中成员资格的数据的交互 | |
| CN111782883B (zh) | 一种视图构建方法和系统 | |
| Jaramillo et al. | The generalised machine layout problem | |
| CN113190718A (zh) | 图数据库的数据处理方法、装置、电子设备及存储介质 | |
| CN111160863A (zh) | 基于思维导图的异类业务展示方法、电子设备和存储介质 | |
| US11163808B2 (en) | Hexagon clustering of spatial data |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20230413 Address after: 250000 Langchao Science Park, No. 1036, Langchao Road, high tech Zone, Jinan, Shandong Applicant after: Inspur Software Technology Co.,Ltd. Address before: 250100 First Floor of R&D Building 2877 Kehang Road, Sun Village Town, Jinan High-tech Zone, Shandong Province Applicant before: SHANDONG INSPUR BUSINESS SYSTEM Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |