CN113805781A - 图表组件排列方法、装置、设备、存储介质及程序产品 - Google Patents
图表组件排列方法、装置、设备、存储介质及程序产品 Download PDFInfo
- Publication number
- CN113805781A CN113805781A CN202110897457.7A CN202110897457A CN113805781A CN 113805781 A CN113805781 A CN 113805781A CN 202110897457 A CN202110897457 A CN 202110897457A CN 113805781 A CN113805781 A CN 113805781A
- Authority
- CN
- China
- Prior art keywords
- chart
- component
- assembly
- graph
- dragging
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 96
- 238000010586 diagram Methods 0.000 claims abstract description 29
- 238000012544 monitoring process Methods 0.000 claims abstract description 13
- 238000004590 computer program Methods 0.000 claims description 14
- 230000000712 assembly Effects 0.000 description 5
- 238000000429 assembly Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 5
- 230000000694 effects Effects 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供一种图表组件排列方法、装置、设备、存储介质及程序产品，该方法包括：监听图表拖动事件，获取当前拖动的第一图表组件；根据拖动方向判断第一图表组件移动后是否能够与拖动方向上的至少一个第二图表组件进行相对位置互换；若是，则将至少一个第二图表组件和第一图表组件进行相对位置互换。本发明提供的图表组件排列方法、装置、设备、存储介质及程序产品，通过监听图表拖动事件，获取当前拖动的第一图表组件，根据第一图表组件的拖动方向判断第一图表组件移动后是否能够与拖动方向上的至少一个第二图表组件进行相对位置互换，若是，则将至少一个第二图表组件和第一图表组件进行相对位置互换，实现了图表组件的快速自动调整。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种图表组件排列方法、装置、设备、存储介质及程序产品。
背景技术
在很多的应用场景，需要对图表组件的位置进行调整、排列。如果图表组件太多，排列图表组件的时候，需要耗费大量时间。比如现在已经排列好了100个图表组件，若需要在最上面增加一个新的图表组件，则需要把所有的图表组件依次往下调整位置，才能空出来最上面的空间，放入新的图表组件。
因此，在图表组件较多的情况下，需要大量时间单独调整每个图表组件的位置，人力消耗巨大。
发明内容
为解决现有技术中的问题，本发明提供一种图表组件排列方法、装置、设备、存储介质及程序产品。
本发明提供一种图表组件排列方法，包括：监听图表拖动事件，根据所述图表拖动事件获取当前拖动的第一图表组件；根据所述第一图表组件的拖动方向判断所述第一图表组件移动后是否能够与所述拖动方向上的至少一个第二图表组件进行相对位置互换；若能够互换，则将所述至少一个第二图表组件和所述第一图表组件进行相对位置互换；其中，各个图表组件的实时位置信息已知。
根据本发明提供的一种图表组件排列方法，所述方法还包括：当所述拖动方向为左右拖动时，若所述第一图表组件移动后不能与所述拖动方向上的至少一个第二图表组件进行相对位置互换，则将与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件；或，当所述拖动方向为上下拖动时，若所述第一图表组件移动后不能与所述拖动方向上的至少一个第二图表组件进行相对位置互换，则将所述第一图表组件回归至所述图表拖动事件发生时的初始位置。
根据本发明提供的一种图表组件排列方法，所述将与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件，包括：当所述拖动方向为向右/左拖动时，将所述与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件向右/左推移，并将与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件向右/左推移；优选地，若进行所述向右/左推移的图表组件移动过程中右/左侧边框到达右/左侧截止线，则将所述到达右/左侧截止线的图表组件沿所述右/左侧截止线向下推移；其中，所述右/左侧截止线距离画布的右/左侧边缘具有预设距离。
根据本发明提供的一种图表组件排列方法，所述方法还包括：在所述第一图表组件的拖动过程中，若所述第一图表组件的右侧边框/左侧边框超出所述右侧截止线/左侧截止线，则将所述第一图表组件调整到所述右侧截止线/左侧截止线以内；和/或，实时获取位于最下方的图表组件的位置，并根据所述位于最下方的图表组件的位置自动调整画布长度。
根据本发明提供的一种图表组件排列方法，在所述将与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件之后，所述方法还包括：按照预设顺序遍历本次所述图表拖动事件结束后未发生移动的图表组件，判断所述未发生移动的图表组件的上方是否有空白空间；若是，则将所述图表组件上移至相应所述空白空间。
根据本发明提供的一种图表组件排列方法，在所述根据所述图表拖动事件获取当前拖动的第一图表组件之后，所述方法还包括：判断所述第一图表组件和所述拖动方向上的图表组件的重叠部分覆盖的像素宽度是否大于预设像素宽度；若否，则忽略所述图表拖动事件。
本发明还提供一种图表组件排列装置，包括：监听模块，用于：监听图表拖动事件，根据所述图表拖动事件获取当前拖动的第一图表组件；排列模块，用于：根据所述第一图表组件的拖动方向判断所述第一图表组件移动后是否能够与所述拖动方向上的至少一个第二图表组件进行相对位置互换；若能够互换，则将所述至少一个第二图表组件和所述第一图表组件进行相对位置互换；其中，各个图表组件的实时位置信息已知。
本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述图表组件排列方法的步骤。
本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述图表组件排列方法的步骤。
本发明还提供一种计算机程序产品，包括计算机程序/指令，其特征在于，所述计算机程序/指令被处理器执行时实现如上述任一种所述图表组件排列方法的步骤。
本发明提供的图表组件排列方法、装置、设备、存储介质及程序产品，通过监听图表拖动事件，根据图表拖动事件获取当前拖动的第一图表组件，根据第一图表组件的拖动方向判断第一图表组件移动后是否能够与拖动方向上的至少一个第二图表组件进行相对位置互换，若是，则将至少一个第二图表组件和第一图表组件进行相对位置互换，实现了图表组件的快速自动调整。
附图说明
为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明提供的图表组件排列方法流程图；
图2是本发明提供的图表组件排列方法中图表组件的显示示意图之一；
图3是本发明提供的图表组件排列方法中图表组件的显示示意图之二；
图4是本发明提供的图表组件排列方法中图表组件的显示示意图之三；
图5是本发明提供的图表组件排列方法中图表组件的显示示意图之四；
图6是本发明提供的图表组件排列装置的结构示意图；
图7示例了一种电子设备的实体结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
图表组件主要用来做数据可视化展示，如报告中的图表展示。利用不同的图表组件可以实现不同的图表类型展示，如柱状图、折线图、散点图等等。图表组件与图片不同，图表组件的位置、大小等信息是可以实时获取的，并且图表组件的位置是可以实现自动化控制的。由此，利用图表组件不仅可以实现展示需求，而且可以实现图表组件的自动化位置排列控制。
下面结合图1-图7描述本发明的图表组件排列方法、装置、设备、存储介质及程序产品。
图1是本发明提供的图表组件排列方法流程图。如图1所示，所述方法包括：
步骤101、监听图表拖动事件，根据所述图表拖动事件获取当前拖动的第一图表组件。
可以通过鼠标拖动图表组件触发图表拖动事件。图表组件排列装置可以监听到图表拖动事件，并可以获取到当前拖动的第一图表组件的信息。第一图表组件的信息如包括图表组件的坐标(可以用左上角的坐标表示)，大小(包括长度、宽度的信息)、拖动方向等信息。
步骤102、根据所述第一图表组件的拖动方向判断所述第一图表组件移动后是否能够与所述拖动方向上的至少一个第二图表组件进行相对位置互换；若能够互换，则将所述至少一个第二图表组件和所述第一图表组件进行相对位置互换；其中，各个图表组件的实时位置信息已知。
根据第一图表组件的拖动方向判断第一图表组件移动后是否能够与拖动方向上的至少一个第二图表组件进行相对位置互换。沿第一图表组件的拖动方向上可能具有多个图表组件。这些图表组件的大小可能会有不同的情况。比如，可能和第一图表组件的大小相同，或者可能比第一图表组件小，或者可能比第一图表组件大。那么，在监听到第一图表组件的拖动事件后，根据第一图表组件的拖动方向判断第一图表组件移动后是否能够与拖动方向上的至少一个第二图表组件进行相对位置互换是指，根据第一图表组件移动后可以形成的空白区域判断拖动方向上有多少个第二图表组件可以移动到第一图表组件移动后形成的空白区域。若拖动方向上存在至少一个第二图表组件可以与第一图表组件进行相对位置互换，则将至少一个第二图表组件和第一图表组件进行相对位置互换，从而实现图表组件的快速位置调整。至少一个第二图表组件的整体与第一图表组件的相对位置关系发生互换，这些第二图表组件移动前后的相互之间的相对位置关系保持不变。根据图表组件的大小情况不同，第一图表组件可以与一个或多个第二图表组件进行相对位置互换。
图2是本发明提供的图表组件排列方法中图表组件的显示示意图之一。图3是本发明提供的图表组件排列方法中图表组件的显示示意图之二。图4是本发明提供的图表组件排列方法中图表组件的显示示意图之三。图3是图2中的图表组件1向下移动后的显示示意图。由于图表组件1向下移动后可以形成的空白区域只能够容纳图表组件2，因此只实现了图表组件2和图表组件3的相对位置互换。图4是图2中的图表组件3向下移动后的显示示意图。由于图表组件3向下移动后可以形成的空白区域可以容纳图表组件4和图表组件5，但是不够容纳图表组件4、图表组件5和图表组件6，因此，只实现了图表组件3与图表组件4及图表组件5的相对位置互换。并且，图表组件4和图表组件5作为整体和图表组件3进行相对位置互换，移动前后图表组件4和图表组件5的相对位置关系不变。
需要说明的是，图表组件的位置移动体现于上下移动或左右移动，图表组件之间的相对位置互换是指的是上下或左右的相对位置互换，并不要求坐标上的严格互换。并且，进行图表组件的位置调整可以在图表组件的拖动过程中进行。比如，若监听到向下移动第一图表组件的图表拖动事件，则计算第一图表组件向下移动后可以形成的空白区域的大小，并计算第一图表组件的拖动方向上至少一个第二图表组件所占空间大小，判断第一图表组件可以与几个第二图表组件进行相对位置互换。若第一图表组件移动后能够与拖动方向上的至少一个第二图表组件进行相对位置互换，则将第一图表组件向下移动，将至少一个第二图表组件向上移动，由此实现至少一个第二图表组件和第一图表组件进行相对位置互换。若监听到向右移动第一图表组件的图表拖动事件，则计算第一图表组件向右移动后可以形成的空白区域的大小，并计算第一图表组件的拖动方向上至少一个第二图表组件所占空间大小，判断第一图表组件可以与几个第二图表组件进行相对位置互换，若第一图表组件移动后能够与拖动方向上的至少一个第二图表组件进行相对位置互换，则将第一图表组件向右移动，将至少一个第二图表组件向左移动，由此实现至少一个第二图表组件和第一图表组件进行相对位置互换。利用本发明提供的图表组件排列方法解决在已经排列好的多个图表组件的最上面增加一个新的图表组件的问题时，方法如下：新建的图表组件初始位置默认放置在最下面，然后用鼠标拖动新建的图表组件向上移动，向上移动的过程中，依次判断是否能够与上面的至少一个图表组件进行相对位置互换，若是，则将新建的图表组件和上面的至少一个图表组件进行相对位置互换，由此可以通过拖动图表组件实现自动化地将新建的图表组件移动到最上面。
本发明提供的图表组件排列方法，通过监听图表拖动事件，根据图表拖动事件获取当前拖动的第一图表组件，根据第一图表组件的拖动方向判断第一图表组件移动后是否能够与拖动方向上的至少一个第二图表组件进行相对位置互换，若是，则将至少一个第二图表组件和第一图表组件进行相对位置互换，实现了图表组件的快速自动调整。
根据本发明提供的一种图表组件排列方法，所述方法还包括：当所述拖动方向为左右拖动时，若所述第一图表组件移动后不能与所述拖动方向上相邻的至少一个第二图表组件进行相对位置互换，则将与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件；或，当所述拖动方向为上下拖动时，若所述第一图表组件移动后不能与所述拖动方向上的至少一个第二图表组件进行相对位置互换，则将所述第一图表组件回归至所述图表拖动事件发生时的初始位置。
根据第一图表组件的拖动方向判断第一图表组件移动后是否能够与拖动方向上的至少一个第二图表组件进行相对位置互换，若第一图表组件移动后形成的空白空间不够大，则可能第一图表组件移动后不能够与拖动方向上的任何一个第二图表组件进行相对位置互换，这时区分两种情况进行处理：
若拖动方向为左右拖动，则若第一图表组件移动后不能与拖动方向上的至少一个第二图表组件进行相对位置互换，则将与第一图表组件在拖动方向上相邻的第二图表组件按照预设方式进行位置调整，并连带调整与第一图表组件在拖动方向上相邻的第二图表组件位置调整过程中受影响的图表组件，受影响的图表组件为与进行位置调整的第二图表组件的坐标产生交集的图表组件。也即，若拖动方向为左右拖动，即使第一图表组件移动后不能与拖动方向上的至少一个第二图表组件进行相对位置互换，这时仍将第一图表组件按照拖动方向进行位置调整，并将与第一图表组件相邻的第二图表组件按照预设方式进行位置调整，并连带调整与第一图表组件相邻的第二图表组件位置调整过程中受影响的其他图表组件。
若拖动方向为上下拖动，则若第一图表组件移动后不能与拖动方向上的至少一个第二图表组件进行相对位置互换，则将第一图表组件回归原位置，原位置为图表拖动事件发生时第一图表组件的初始位置。也即，若拖动方向为上下拖动，则若第一图表组件移动后不能与拖动方向上的至少一个第二图表组件进行相对位置互换，这时将不再将第一图表组件按照拖动方向进行位置调整，而是回归原位置。
需要说明的，拖动方向上与第一图表组件相邻的第二图表组件可能为多个。
本发明提供的图表组件排列方法，通过在第一图表组件移动后不能与拖动方向上的至少一个第二图表组件进行相对位置互换时，根据拖动方向的不同进行不同的操作，提高了图表组件位置调整的有序性。
根据本发明提供的图表组件排列方法，所述将与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件，包括：当所述拖动方向为向右/左拖动时，将所述与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件向右/左推移，并将与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件向右/左推移；优选地，若进行所述向右/左推移的图表组件移动过程中右/左侧边框到达右/左侧截止线，则将所述到达右/左侧截止线的图表组件沿所述右/左侧截止线向下推移；其中，所述右/左侧截止线距离画布的右/左侧边缘具有预设距离。
当拖动方向为向右拖动，则将与第一图表组件相邻的第二图表组件向右推移，并带动其他与第一图表组件相邻的第二图表组件相邻的图表组件一并向右推移，若与第一图表组件相邻的第二图表组件和/或与第一图表组件相邻的第二图表组件相邻的图表组件向右推移的过程中右侧边框到达右侧截止线，则将到达右侧截止线的图表组件沿右侧截止线向下推移；其中，右侧截止线距离画布的右侧边缘具有预设距离；若拖动方向为向左拖动，则将与第一图表组件相邻的第二图表组件向左推移，并带动与第一图表组件相邻的第二图表组件相邻的图表组件向左推移，若与第一图表组件相邻的第二图表组件和/或与第一图表组件相邻的第二图表组件相邻的图表组件向左推移的过程中左侧边框到达左侧截止线，则将到达左侧截止线的图表组件沿左侧截止线向下推移；其中，左侧截止线距离画布的左侧边缘具有预设距离。
将与第一图表组件相邻的第二图表组件按照预设方式进行位置调整，并连带调整与第一图表组件相邻的第二图表组件位置调整过程中受影响的其他图表组件时，若拖动方向为向右拖动，则将与第一图表组件相邻的第二图表组件向右推移，并带动其他相邻的图表组件向右推移。也即，第一图表组件向右移动后，会“挤占”掉相邻的第二图表组件的位置，这时与第一图表组件相邻的第二图表组件也会向右推移，继续“挤占”其他的图表组件的位置，其他图表组件继续向右推移，继续“挤占”右侧的其他的图表组件的位置。由于画布是有一定大小的，图表组件不能无限制地向右移动，若与第一图表组件相邻的第二图表组件和/或其他相邻的图表组件向右推移的过程中右侧边框到达右侧截止线，则将到达右侧截止线的图表组件沿右侧截止线向下推移。其中，右侧截止线距离画布的右侧边缘具有预设距离。预设距离可以设置为0或其他值。
同理，将与第一图表组件相邻的第二图表组件按照预设方式进行位置调整，并连带调整与第一图表组件相邻的第二图表组件位置调整过程中受影响的其他图表组件时，若拖动方向为向左拖动，则将与第一图表组件相邻的第二图表组件向左推移，并带动其他相邻的图表组件向左推移。也即，第一图表组件向左移动后，会“挤占”掉相邻的第二图表组件的位置，这时与第一图表组件相邻的第二图表组件也会向左推移，继续“挤占”其他的图表组件的位置，其他图表组件继续向左推移，继续“挤占”左侧的其他的图表组件的位置。由于画布是有一定大小的，图表组件不能无限制地向左移动，若与第一图表组件相邻的第二图表组件和/或其他相邻的图表组件向左推移的过程中左侧边框到达左侧截止线，则将到达左侧截止线的图表组件沿左侧截止线向下推移。其中，左侧截止线距离画布的左侧边缘具有预设距离。预设第二距离可以设置为0或其他值。
本发明提供的图表组件排列方法，通过在向左右拖动图表组件时，先左右移动，左右无法移动时再上下移动，进一步提高了组件排列的有序性。
根据本发明提供的一种图表组件排列方法，所述方法还包括：在所述第一图表组件的拖动过程中，若所述第一图表组件的右侧边框/左侧边框超出所述右侧截止线/左侧截止线，则将所述第一图表组件调整到所述右侧截止线/左侧截止线以内。
在左右拖动第一图表组件时，为保证第一图表组件不超出合理范围之外，则若获知第一图表组件的右侧边框超出右侧截止线，则将第一图表组件调整到右侧截止线以内；若获知第一图表组件的左侧边框超出左侧截止线，则将第一图表组件调整到左侧截止线以内。
实时获取位于最下方的图表组件的位置，并根据所述位于最下方的图表组件的位置自动调整画布长度。
在向下拖动第一图表组件时，由于位于第一图表组件下方的图表组件可能会随着第一图表组件向下移动而跟随下移，则为了满足能够容纳所有的图表组件，随着图表组件的下移自适应调整画布长度，也即根据位于最下方的图表组件的位置自动调整画布长度。其中，画布的长度调整支持跨页。
图5是本发明提供的图表组件排列方法中图表组件的显示示意图之四。如图5所示，图表组件的拖动位置超出了画布的右侧截止线，则将图表组件自动调整到右侧截止线以内。
本发明提供的图表组件排列方法，通过在第一图表组件超出左侧截止线或右侧截止线时，对应调整到左侧截止线或右侧截止线以内，以及通过自适应调整画布长度，进一步提高了组件快速排列的性能。
根据本发明提供的一种图表组件排列方法，在所述将与所述第一图表组件在所述拖动方向上相邻的第一个所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件之后，所述方法还包括：按照预设顺序遍历本次所述图表拖动事件结束后未发生移动的图表组件，判断所述未发生移动的图表组件的上方是否有空白空间；若是，则将所述图表组件上移至相应所述空白空间。
在将与第一图表组件相邻的第二图表组件按照预设方式进行位置调整，并连带调整与第一图表组件相邻的第二图表组件位置调整过程中受影响的其他图表组件之后，可能会由于图表组件的移动产生空白空间，因此按照预设顺序(比如从上到下、从左到右的顺序)遍历在本次图表拖动事件结束后未发生移动的图表组件，判断未发生移动的图表组件的上方是否有空白空间，若是，则将相应的图表组件上移至相应的空白空间，做到一种吸顶的效果。
可以根据第一图表组件是否持续移动判断图表拖动事件是否结束，若第一图表组件持续移动则第一图表组件的图表拖动事件持续进行，若第一图表组件停止移动则第一图表组件的图表拖动事件结束。可以理解的，一次拖动结束后，可以继续触发第一图表组件的图表拖动事件。
本发明提供的图表组件排列方法，通过在拖动结束后，将未发生移动的图表组件移动到上方空白空间，可以实现吸顶效果，提高图表组件排列的密集性。
根据本发明提供的一种图表组件排列方法，在所述根据所述图表拖动事件获取当前拖动的第一图表组件之后，所述方法还包括：判断所述第一图表组件和所述拖动方向上的图表组件的重叠部分覆盖的像素宽度是否大于预设像素宽度；若否，则忽略所述图表拖动事件。
在监听图表拖动事件的时候(此时可以是拖动事件正在进行的过程，第一图表组件已经产生一定的移动，根据移动幅度以及图表组件尺寸的不同，可能与一个或多个图表组件产生区域重叠)，先进行容错处理，判断第一图表组件和拖动方向上的图表组件的重叠部分覆盖的像素宽度是否大于预设像素宽度；若否，则忽略图表拖动事件。比如，拖动的图表和其他图表覆盖小于50px，则认为用户并不想真正的操作图表，防止反应太灵敏，影响用户体验。
本发明提供的图表组件排列方法，通过在判断第一图表组件和拖动方向上其他图表重叠部分覆盖的像素宽度不大于预设像素宽度时忽略图表拖动事件，提高了容错性能。
本发明提供的图表组件排列方法，可以包括如下步骤：
1.根据用户拖动，计算落地位置。根据方向的不同，落地位置有所不同。比如若向下拖动，则落地位置在初始位置的下方。具体的落地位置需要根据图表移动后形成的空白区域可以使得能够与拖动方向上的几个图表进行互换来确定。
2.根据落地位置，判断哪些图表需要调整位置。落地位置确定，需要调整的图表是可以与拖动的图表进行相对位置互换的图表，将相应的图表与拖动的图表进行位置互换。
3.调整需要调整的图表，过程中可能需要再调整其他图表的位置。比如，向左/右移动时，需要调整与拖动的图表相邻的图表，进一步需要再调整与拖动的图表相邻的图表相邻的其他图表。
4.所有图表调整完成之后，把需要吸顶的图表进行吸顶操作。需要吸顶的图表即上方具有空白空间的图表。
本发明提供的图表组件排列方法，可以达到的技术效果：
1.组件互斥，不可重叠，拖动过程中图表会自动调整位置，解决用户图表多导致操作多的问题。本发明可以自动调整图表组件的位置，调整完成后图表组件之间不会发生重叠现象(拖动开始时的重叠只是实现过程中的短暂瞬间)。
2.组件自动吸顶，保持密集的排列。拖动事件完成后，遍历未发生移动的图表组件，并对上方有空白空间的组件自动调整至空白空间，由此实现吸顶效果。
3.画布尺寸自适应，不需要用户手动调整，可以实现自动根据最下方图表组件的位置调整画布大小。
下面对本发明提供的图表组件排列装置进行描述，下文描述的图表组件排列装置与上文描述的图表组件排列方法可相互对应参照。
图6是本发明提供的图表组件排列装置的结构示意图。如图6所示，所述装置包括监听模块10和排列模块20，其中：监听模块10用于：监听图表拖动事件，根据所述图表拖动事件获取当前拖动的第一图表组件；排列模块20用于：根据所述第一图表组件的拖动方向判断所述第一图表组件移动后是否能够与所述拖动方向上的至少一个第二图表组件进行相对位置互换；若能够互换，则将所述至少一个第二图表组件和所述第一图表组件进行相对位置互换；其中，各个图表组件的实时位置信息已知。
本发明提供的图表组件排列装置，通过监听图表拖动事件，根据图表拖动事件获取当前拖动的第一图表组件，根据第一图表组件的拖动方向判断第一图表组件移动后是否能够与拖动方向上的至少一个第二图表组件进行相对位置互换，若是，则将至少一个第二图表组件和第一图表组件进行相对位置互换，实现了图表组件的快速自动调整。
根据本发明提供的一种图表组件排列装置，排列模块20还用于：当所述拖动方向为左右拖动时，若所述第一图表组件移动后不能与所述拖动方向上的至少一个第二图表组件进行相对位置互换，则将与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件；或，当所述拖动方向为上下拖动时，若所述第一图表组件移动后不能与所述拖动方向上的至少一个第二图表组件进行相对位置互换，则将所述第一图表组件回归至所述图表拖动事件发生时的初始位置。
本发明提供的图表组件排列装置，通过在第一图表组件移动后不能与拖动方向上的至少一个第二图表组件进行相对位置互换时，根据拖动方向的不同进行不同的操作，提高了图表组件位置调整的有序性。
根据本发明提供的一种图表组件排列装置，排列模块20在用于将与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件时，具体用于：当所述拖动方向为向右/左拖动时，将所述与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件向右/左推移，并将与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件向右/左推移；优选地，若进行所述向右/左推移的图表组件移动过程中右/左侧边框到达右/左侧截止线，则将所述到达右/左侧截止线的图表组件沿所述右/左侧截止线向下推移；其中，所述右/左侧截止线距离画布的右/左侧边缘具有预设距离。
本发明提供的图表组件排列装置，通过在向左右拖动图表组件时，先左右移动，左右无法移动时再上下移动，进一步提高了组件排列的有序性。
根据本发明提供的一种图表组件排列装置，排列模块20还用于：在所述第一图表组件的拖动过程中，若所述第一图表组件的右侧边框/左侧边框超出所述右侧截止线/左侧截止线，则将所述第一图表组件调整到所述右侧截止线/左侧截止线以内；和/或，实时获取位于最下方的图表组件的位置，并根据所述位于最下方的图表组件的位置自动调整画布长度。
本发明提供的图表组件排列装置，通过在第一图表组件超出左侧截止线或右侧截止线时，对应调整到左侧截止线或右侧截止线以内，以及通过自适应调整画布长度，进一步提高了组件快速排列的性能。
根据本发明提供的一种图表组件排列装置，排列模块20在用于将与所述第一图表组件在所述拖动方向上相邻的第一个所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件之后，还用于：按照预设顺序遍历本次所述图表拖动事件结束后未发生移动的图表组件，判断所述未发生移动的图表组件的上方是否有空白空间；若是，则将所述图表组件上移至相应所述空白空间。
本发明提供的图表组件排列装置，通过在拖动结束后，将未发生移动的图表组件移动到上方空白空间，可以实现吸顶效果，提高图表组件排列的密集性。
根据本发明提供的一种图表组件排列装置，监听模块10在用于根据所述图表拖动事件获取当前拖动的第一图表组件之后，还用于：判断所述第一图表组件和所述拖动方向上的图表组件的重叠部分覆盖的像素宽度是否大于预设像素宽度；若否，则忽略所述图表拖动事件。
本发明提供的图表组件排列装置，通过在判断第一图表组件和其他图表重叠部分覆盖的像素宽度不大于预设像素宽度时忽略图表拖动事件，提高了容错性能。
图7示例了一种电子设备的实体结构示意图，如图7所示，该电子设备可以包括：处理器(processor)610、通信接口(Communications Interface)620、存储器(memory)630和通信总线660，其中，处理器610，通信接口620，存储器630通过通信总线660完成相互间的通信。处理器610可以调用存储器630中的逻辑指令，以执行图表组件排列方法，该方法包括：监听图表拖动事件，根据所述图表拖动事件获取当前拖动的第一图表组件；根据所述第一图表组件的拖动方向判断所述第一图表组件移动后是否能够与所述拖动方向上的至少一个第二图表组件进行相对位置互换；若能够互换，则将所述至少一个第二图表组件和所述第一图表组件进行相对位置互换；其中，各个图表组件的实时位置信息已知。
此外，上述的存储器630中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
另一方面，本发明还提供一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法所提供的图表组件排列方法，该方法包括：监听图表拖动事件，根据所述图表拖动事件获取当前拖动的第一图表组件；根据所述第一图表组件的拖动方向判断所述第一图表组件移动后是否能够与所述拖动方向上的至少一个第二图表组件进行相对位置互换；若能够互换，则将所述至少一个第二图表组件和所述第一图表组件进行相对位置互换；其中，各个图表组件的实时位置信息已知。
又一方面，本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各提供的图表组件排列方法，该方法包括：监听图表拖动事件，根据所述图表拖动事件获取当前拖动的第一图表组件；根据所述第一图表组件的拖动方向判断所述第一图表组件移动后是否能够与所述拖动方向上的至少一个第二图表组件进行相对位置互换；若能够互换，则将所述至少一个第二图表组件和所述第一图表组件进行相对位置互换；其中，各个图表组件的实时位置信息已知。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
1.一种图表组件排列方法，其特征在于，包括：
监听图表拖动事件，根据所述图表拖动事件获取当前拖动的第一图表组件；
根据所述第一图表组件的拖动方向判断所述第一图表组件移动后是否能够与所述拖动方向上的至少一个第二图表组件进行相对位置互换；若能够互换，则将所述至少一个第二图表组件和所述第一图表组件进行相对位置互换；其中，各个图表组件的实时位置信息已知。
2.根据权利要求1所述的图表组件排列方法，其特征在于，所述方法还包括：
当所述拖动方向为左右拖动时，若所述第一图表组件移动后不能与所述拖动方向上的至少一个第二图表组件进行相对位置互换，则将与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件；或，
当所述拖动方向为上下拖动时，若所述第一图表组件移动后不能与所述拖动方向上的至少一个第二图表组件进行相对位置互换，则将所述第一图表组件回归至所述图表拖动事件发生时的初始位置。
3.根据权利要求2所述的图表组件排列方法，其特征在于，所述将与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件，包括：
当所述拖动方向为向右/左拖动时，将所述与所述第一图表组件在所述拖动方向上相邻的所述第二图表组件向右/左推移，并将与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件向右/左推移；
优选地，若进行所述向右/左推移的图表组件移动过程中右/左侧边框到达右/左侧截止线，则将所述到达右/左侧截止线的图表组件沿所述右/左侧截止线向下推移；其中，所述右/左侧截止线距离画布的右/左侧边缘具有预设距离。
4.根据权利要求3所述的图表组件排列方法，其特征在于，所述方法还包括：
在所述第一图表组件的拖动过程中，若所述第一图表组件的右侧边框/左侧边框超出所述右侧截止线/左侧截止线，则将所述第一图表组件调整到所述右侧截止线/左侧截止线以内；
和/或，
实时获取位于最下方的图表组件的位置，并根据所述位于最下方的图表组件的位置自动调整画布长度。
5.根据权利要求2所述的图表组件排列方法，其特征在于，在所述将与所述第一图表组件在所述拖动方向上相邻的第一个所述第二图表组件按照预设方式进行位置调整，同时调整与进行所述位置调整的所述第二图表组件的坐标产生交集的图表组件之后，所述方法还包括：
按照预设顺序遍历本次所述图表拖动事件结束后未发生移动的图表组件，判断所述未发生移动的图表组件的上方是否有空白空间；若是，则将所述图表组件上移至相应所述空白空间。
6.根据权利要求1所述的图表组件排列方法，其特征在于，在所述根据所述图表拖动事件获取当前拖动的第一图表组件之后，所述方法还包括：
判断所述第一图表组件和所述拖动方向上的图表组件的重叠部分覆盖的像素宽度是否大于预设像素宽度；若否，则忽略所述图表拖动事件。
7.一种图表组件排列装置，其特征在于，包括：
监听模块，用于：监听图表拖动事件，根据所述图表拖动事件获取当前拖动的第一图表组件；
排列模块，用于：根据所述第一图表组件的拖动方向判断所述第一图表组件移动后是否能够与所述拖动方向上相邻的至少一个第二图表组件进行相对位置互换；若能够互换，则将所述至少一个第二图表组件和所述第一图表组件进行相对位置互换；其中，各个图表组件的实时位置信息已知。
8.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述图表组件排列方法的步骤。
9.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述图表组件排列方法的步骤。
10.一种计算机程序产品，包括计算机程序/指令，其特征在于，所述计算机程序/指令被处理器执行时实现如权利要求1至6任一项所述图表组件排列方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110897457.7A CN113805781A (zh) | 2021-08-05 | 2021-08-05 | 图表组件排列方法、装置、设备、存储介质及程序产品 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110897457.7A CN113805781A (zh) | 2021-08-05 | 2021-08-05 | 图表组件排列方法、装置、设备、存储介质及程序产品 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113805781A true CN113805781A (zh) | 2021-12-17 |
Family
ID=78893332
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110897457.7A Pending CN113805781A (zh) | 2021-08-05 | 2021-08-05 | 图表组件排列方法、装置、设备、存储介质及程序产品 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113805781A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114816202A (zh) * | 2022-05-09 | 2022-07-29 | 广州市易工品科技有限公司 | tab组件里的图表跨界交互方法、装置、设备及介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060136825A1 (en) * | 2004-12-20 | 2006-06-22 | Microsoft Corporation | Method, system, and computer-readable medium for the layout of automatically-placed elements and user-placed elements in a chart |
| CN103440131A (zh) * | 2013-08-30 | 2013-12-11 | 四川九洲电器集团有限责任公司 | 一种基于安卓系统的移动终端触摸屏视图布局调整方法 |
| CN105224205A (zh) * | 2015-07-06 | 2016-01-06 | 深圳市美贝壳科技有限公司 | 一种调整照片位置的方法 |
| CN107329656A (zh) * | 2017-06-28 | 2017-11-07 | 维沃移动通信有限公司 | 一种应用图标的位置调整方法及移动终端 |
| CN107992253A (zh) * | 2017-11-28 | 2018-05-04 | 广州视源电子科技股份有限公司 | 组合立体图形显示状态的调控方法、装置及计算机设备 |
| CN108491150A (zh) * | 2018-04-03 | 2018-09-04 | 百度在线网络技术（北京）有限公司 | 控件迁移方法、装置、终端及存储介质 |
| CN109885222A (zh) * | 2019-02-13 | 2019-06-14 | Oppo广东移动通信有限公司 | 图标处理方法、装置、电子设备及计算机可读介质 |
-
2021
- 2021-08-05 CN CN202110897457.7A patent/CN113805781A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060136825A1 (en) * | 2004-12-20 | 2006-06-22 | Microsoft Corporation | Method, system, and computer-readable medium for the layout of automatically-placed elements and user-placed elements in a chart |
| CN103440131A (zh) * | 2013-08-30 | 2013-12-11 | 四川九洲电器集团有限责任公司 | 一种基于安卓系统的移动终端触摸屏视图布局调整方法 |
| CN105224205A (zh) * | 2015-07-06 | 2016-01-06 | 深圳市美贝壳科技有限公司 | 一种调整照片位置的方法 |
| CN107329656A (zh) * | 2017-06-28 | 2017-11-07 | 维沃移动通信有限公司 | 一种应用图标的位置调整方法及移动终端 |
| CN107992253A (zh) * | 2017-11-28 | 2018-05-04 | 广州视源电子科技股份有限公司 | 组合立体图形显示状态的调控方法、装置及计算机设备 |
| CN108491150A (zh) * | 2018-04-03 | 2018-09-04 | 百度在线网络技术（北京）有限公司 | 控件迁移方法、装置、终端及存储介质 |
| CN109885222A (zh) * | 2019-02-13 | 2019-06-14 | Oppo广东移动通信有限公司 | 图标处理方法、装置、电子设备及计算机可读介质 |
Non-Patent Citations (3)
| Title |
|---|
| JIA LI: "The Research on Virtual Assembly Technology and its Application Based on OSG", MEETINGPERVASIVE COMPUTING AND THE NETWORKED WORLD. JOINT INTERNATIONAL CONFERENCE, ICPCA/SWS 2012, 29 April 2013 (2013-04-29), pages 274 - 281 * |
| 卢春兰，赵蓓蓓: "《计算机应用技术教程》", 31 October 2008, 武汉：华中科技大学出版社, pages: 141 - 149 * |
| 陈庆容: "PowerBuilder数据元素拖动的实现", 暨南大学学报(自然科学与医学版), no. 05, 20 October 1998 (1998-10-20), pages 60 - 62 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114816202A (zh) * | 2022-05-09 | 2022-07-29 | 广州市易工品科技有限公司 | tab组件里的图表跨界交互方法、装置、设备及介质 |
| CN114816202B (zh) * | 2022-05-09 | 2024-06-11 | 广州市易工品科技有限公司 | tab组件里的图表跨界交互方法、装置、设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20140157167A1 (en) | Method and Device for Controlling Icon | |
| CN107798715B (zh) | 立体图形的对齐吸附方法、装置、计算机设备及存储介质 | |
| EP3035170B1 (en) | Method for displaying interface content and user equipment | |
| JP6002840B2 (ja) | 画像表示処理方法、画像表示処理装置、プログラム、及び記録媒体 | |
| CN108803968B (zh) | 用户显示界面的多视图联动方法、计算设备及存储介质 | |
| CN109324722B (zh) | 思维导图的节点添加方法、装置、设备及存储介质 | |
| CN104793874A (zh) | 一种界面显示方法及电子设备 | |
| CN113805781A (zh) | 图表组件排列方法、装置、设备、存储介质及程序产品 | |
| JP7513731B2 (ja) | 画像カッティング方法、装置、設備及び記憶媒体 | |
| CN107423366A (zh) | 一种轮播图切换方法及装置 | |
| CN103985373A (zh) | 一种应用于拼接显示设备的图像处理方法及装置 | |
| CN111127543A (zh) | 图像处理方法、装置、电子设备以及存储介质 | |
| CN112370780A (zh) | 虚拟控件的显示方法和装置、存储介质及电子设备 | |
| CN110007915B (zh) | 一种自适应子控件的线性布局方法及装置 | |
| CN108961316A (zh) | 图像处理方法、装置及服务器 | |
| WO2017113713A1 (zh) | 显示界面调整方法及装置 | |
| CN105094586A (zh) | 一种显示窗口的调节方法及电子设备 | |
| CN111966934B (zh) | 一种电网信息显示方法、设备、系统及存储介质 | |
| CA2947020A1 (en) | Systems and methods for programming behavior of a website to respond to capabilities of different devices | |
| CN117111921A (zh) | 一种流程图编辑方法、装置以及电子设备 | |
| CN110119270A (zh) | 网页搭建方法、装置、设备和框架 | |
| CN103259932A (zh) | 一种触摸屏移动终端彩信的编辑方法及系统 | |
| KR20130054372A (ko) | 그래픽 객체 이동 방법 및 장치 | |
| CN111625154B (zh) | 一种应用显示方法及装置 | |
| CN109960562B (zh) | 一种信息展示方法、装置和计算机可读存储介质 |
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: 20220323 Address after: 100085 Floor 101 102-1, No. 35 Building, No. 2 Hospital, Xierqi West Road, Haidian District, Beijing Applicant after: Seashell Housing (Beijing) Technology Co.,Ltd. Address before: 101309 room 24, 62 Farm Road, Erjie village, Yangzhen, Shunyi District, Beijing Applicant before: Beijing fangjianghu Technology Co.,Ltd. |