CN111638881A - 图表的调整方法及仪表盘 - Google Patents

Abstract

本发明提供了图表的调整方法及仪表盘，该方法包括：接收用户输入的设置命令，其中，设置命令用于表征用户针对仪表盘的布局组件页面的初始位置设置信息；根据设置命令，对布局组件页面进行初始位置设置；根据对布局组件页面的初始位置设置，确定图表的初始位置，以能够将图表展示在仪表盘；获取拖拽节点的第一当前位置信息以及占位节点的第二当前位置信息；根据拖拽节点的第一当前位置信息和第一初始位置信息，确定拖拽节点是否发生位移；在确定出拖拽节点发生位移时，将拖拽节点的第一初始位置信息更改为第一当前位置信息，将占位节点的第二初始位置信息更改为第二当前位置信息。本方案可以灵活调整图表的位置。

Description

图表的调整方法及仪表盘

技术领域

本发明涉及计算机技术领域，特别涉及图表的调整方法及仪表盘。

背景技术

图表泛指在屏幕中显示的，可直观展示统计信息属性，对知识挖掘和信息直观生动感受起关键性作用的图形结构，是一种很好地将对象属性数据直观、形象地可视化手段。

目前，Vue作为一套构建用户界面的渐进式JavaScript框架，被设计为可以自底向上逐层应用。其核心库只关注视图层，方便与第三方库或既有项目整合。一般在VUE中图表的展示，其页面布局都是固定的，需要根据不同位置的图表进行不同的配置。

通过上述描述可见，现有技术由于展示图表的页面布局是固定的，从而导致不能灵活调整图表的位置。

发明内容

本发明实施例提供了图表的调整方法及仪表盘，可以灵活调整图表的位置。

第一方面，本发明实施例提供了图表的调整方法，应用于仪表盘，包括：

接收用户从外部输入的设置命令，其中，所述设置命令用于表征所述用户针对仪表盘的布局组件页面的初始位置设置信息，所述初始位置设置信息包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息，所述拖拽节点为图表的左上角节点，所述占位节点用于表征所述拖拽节点所能覆盖的布局节点；

根据所述设置命令，对所述布局组件页面进行初始位置设置；

根据对所述布局组件页面的所述初始位置设置，确定所述图表的初始位置，以能够将所述图表展示在所述仪表盘；

获取所述拖拽节点的第一当前位置信息以及所述占位节点的第二当前位置信息；

根据所述拖拽节点的所述第一当前位置信息和所述第一初始位置信息，确定所述拖拽节点是否发生位移；

在确定出所述拖拽节点发生位移时，将所述拖拽节点的第一初始位置信息更改为所述第一当前位置信息，将所述占位节点的第二初始位置信息更改为所述第二当前位置信息，以对所述图表的位置进行调整。

优选地，

进一步包括：

所述初始位置设置信息还包括：所述拖拽节点的初始宽度信息以及初始高度信息；

获取所述拖拽节点的当前宽度信息以及当前高度信息；

根据所述初始宽度信息以及所述当前宽度信息，确定所述拖拽节点的宽度是否发生位移；

根据所述初始高度信息以及所述当前高度信息，确定所述拖拽节点的高度是否发生位移；

在确定出所述拖拽节点的所述宽度和/或所述高度发生位移时，将所述拖拽节点的所述初始宽度信息更改为所述当前宽度信息，将所述拖拽节点的所述初始高度信息更改为所述当前高度信息，以对所述图表的尺寸进行调整。

优选地，

所述根据所述拖拽节点的所述第一当前位置信息和所述第一初始位置信息，确定所述拖拽节点是否发生位移，包括：

获取所述仪表盘距离图表页面的距离；

根据所述拖拽节点的所述第一当前位置信息确定鼠标距离所述图表页面的距离；

根据所述拖拽节点的所述第一当前位置信息确定所述鼠标距离所述拖拽节点的距离；

通过下述公式，计算所述拖拽节点的位移量，

L＝L₁-L₂-L₃

其中，所述L表示所述拖拽节点的所述位移量，所述L₁表示所述鼠标距离所述图表页面的距离，所述L₂表示所述仪表盘距离所述图表页面的距离，所述L₃表示所述鼠标距离所述拖拽节点的距离；

根据计算出的所述位移量，确定所述拖拽节点是否发生位移。

优选地，

所述根据对所述布局组件页面的所述初始位置设置，将所述图表展示在所述仪表盘，包括：

将所述图表所在的页面映射为坐标网格；

在所述坐标网格中构建坐标系；

将所述图表映射为所述坐标系中的节点；

根据所述初始位置设置信息，利用所述坐标系确定所述节点的坐标信息；

根据所述节点的所述坐标信息以及所述初始位置设置信息中所包括的所述宽度信息和所述高度信息，将所述图表展示在所述仪表盘。

优选地，

进一步包括：

接收所述用户从外部输入的删除指令；

根据所述删除指令，执行对所述图表的删除操作；

优选地，

所述初始设置信息还包括：所述图表的类型、大小以及数据源信息；

接收所述用户从外部输入的编辑指令；

根据所述编辑指令，执行对所述图表的编辑操作，其中，所述编辑操作包括针对所述图表的类型、大小以及数据源的初始设置信息的编辑。

第二方面，本发明实施例提供了仪表盘，包括：

接收模块，用于接收用户从外部输入的设置命令，其中，所述设置命令用于表征所述用户针对仪表盘的布局组件页面的初始位置设置信息，所述初始位置设置信息包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息，所述拖拽节点为图表的左上角节点，所述占位节点用于表征所述拖拽节点所能覆盖的布局节点；

设置模块，用于根据所述接收模块接收到的所述设置命令，对所述布局组件页面进行初始位置设置；

确定模块，用于根据所述设置模块对所述布局组件页面的所述初始位置设置，确定所述图表的初始位置，以能够将所述图表展示在所述仪表盘；

位置调整模块，用于获取所述拖拽节点的第一当前位置信息以及所述占位节点的第二当前位置信息；根据所述拖拽节点的所述第一当前位置信息和所述第一初始位置信息，确定所述拖拽节点是否发生位移；在确定出所述拖拽节点发生位移时，将所述拖拽节点的第一初始位置信息更改为所述第一当前位置信息，将所述占位节点的第二初始位置信息更改为所述第二当前位置信息，以对所述图表的位置进行调整。

优选地，

所述初始位置设置信息还包括：所述拖拽节点的初始宽度信息以及初始高度信息；

进一步包括：

尺寸调整模块，用于获取所述拖拽节点的当前宽度信息以及当前高度信息；根据所述初始宽度信息以及所述当前宽度信息，确定所述拖拽节点的宽度是否发生位移；根据所述初始高度信息以及所述当前高度信息，确定所述拖拽节点的高度是否发生位移；在确定出所述拖拽节点的所述宽度和/或所述高度发生位移时，将所述拖拽节点的所述初始宽度信息更改为所述当前宽度信息，将所述拖拽节点的所述初始高度信息更改为所述当前高度信息，以对所述图表的尺寸进行调整。

优选地，

所述位置调整模块，用于执行：

获取所述仪表盘距离图表页面的距离；

根据所述拖拽节点的所述第一当前位置信息确定鼠标距离所述图表页面的距离；

根据所述拖拽节点的所述第一当前位置信息确定所述鼠标距离所述拖拽节点的距离；

通过下述公式，计算所述拖拽节点的位移量，

L＝L₁-L₂-L₃

其中，所述L表示所述拖拽节点的所述位移量，所述L₁表示所述鼠标距离所述图表页面的距离，所述L₂表示所述仪表盘距离所述图表页面的距离，所述L₃表示所述鼠标距离所述拖拽节点的距离；

根据计算出的所述位移量，确定所述拖拽节点是否发生位移。

优选地，

所述确定模块，用于执行：

将所述图表所在的页面映射为坐标网格；

在所述坐标网格中构建坐标系；

将所述图表映射为所述坐标系中的节点；

根据所述初始位置设置信息，利用所述坐标系确定所述节点的坐标信息；

根据所述节点的所述坐标信息以及所述初始位置设置信息中所包括的所述宽度信息和所述高度信息，将所述图表展示在所述仪表盘。

优选地，

进一步包括：

删除模块，用于接收所述用户从外部输入的删除指令；根据所述删除指令，执行对所述图表的删除操作；

优选地，

编辑模块，用于接收所述用户从外部输入的编辑指令；

根据所述编辑指令，执行对所述图表的编辑操作，其中，所述编辑操作包括针对所述图表的类型、大小以及数据源的初始设置信息的编辑。

本发明实施例提供了图表的调整方法及仪表盘，页面上图表的位置一般都是固定的，需要针对不同位置的图表进行不同的配置，无法满足用户动态拖拽图表位置的需求，因此，为了满足用户动态拖拽图表位置的需求，实现对页面上的图表位置的调整，可以在接收到用户输入的设置命令的触发下，针对仪表盘的布局组件页面进行包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息的设置，以确定图表的初始位置，并根据确定的图表的初始位置将图表展示在仪表盘上对应的位置，然后获取图表左上角的拖拽节点对应的第一当前位置信息以及占位节点对应的第二当前位置信息，基于拖拽节点的第一当前位置信息和第一初始位置信息确定是否存在位移，并在确定出拖拽节点发生位移时，针对布局组件页面中的初始位置信息进行更新，从而实现对页面上图表的动态拖拽，通过上述方式，可以灵活调整图表的位置。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例提供的一种图表的调整方法的流程图；

图2是本发明一实施例提供的另一种图表的调整方法的流程图；

图3是本发明一实施例提供的一种仪表盘的示意图；

图4是本发明一实施例提供的另一种仪表盘的示意图；

图5是本发明一实施例提供的又一种仪表盘的示意图；

图6是本发明一实施例提供的再一种仪表盘的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明实施例提供了图表的调整方法，该方法可以包括以下步骤：

步骤101：接收用户从外部输入的设置命令，其中，设置命令用于表征用户针对仪表盘的布局组件页面的初始位置设置信息，初始位置设置信息包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息，拖拽节点为图表的左上角节点，占位节点用于表征拖拽节点所能覆盖的布局节点；

步骤102：根据设置命令，对布局组件页面进行初始位置设置；

步骤103：根据对布局组件页面的初始位置设置，确定图表的初始位置，以能够将图表展示在仪表盘；

步骤104：获取拖拽节点的第一当前位置信息以及占位节点的第二当前位置信息；

步骤105：根据拖拽节点的第一当前位置信息和第一初始位置信息，确定拖拽节点是否发生位移；

步骤106：在确定出拖拽节点发生位移时，将拖拽节点的第一初始位置信息更改为第一当前位置信息，将占位节点的第二初始位置信息更改为第二当前位置信息，以对图表的位置进行调整。

在本发明实施例中，页面上图表的位置一般都是固定的，需要针对不同位置的图表进行不同的配置，无法满足用户动态拖拽图表位置的需求，因此，为了满足用户动态拖拽图表位置的需求，实现对页面上的图表位置的调整，可以在接收到用户输入的设置命令的触发下，针对仪表盘的布局组件页面进行包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息的设置，以确定图表的初始位置，并根据确定的图表的初始位置将图表展示在仪表盘上对应的位置，然后获取图表左上角的拖拽节点对应的第一当前位置信息以及占位节点对应的第二当前位置信息，基于拖拽节点的第一当前位置信息和第一初始位置信息确定是否存在位移，并在确定出拖拽节点发生位移时，针对布局组件页面中的初始位置信息进行更新，从而实现对页面上图表的动态拖拽，通过上述方式，可以灵活调整图表的位置。

为了调整图表的尺寸，在本发明一实施例中，上述实施例进一步包括：

初始位置设置信息还包括：拖拽节点的初始宽度信息以及初始高度信息；

获取拖拽节点的当前宽度信息以及当前高度信息；

根据初始宽度信息以及当前宽度信息，确定拖拽节点的宽度是否发生位移；

根据初始高度信息以及当前高度信息，确定拖拽节点的高度是否发生位移；

在确定出拖拽节点的宽度和/或高度发生位移时，将拖拽节点的初始宽度信息更改为当前宽度信息，将拖拽节点的初始高度信息更改为当前高度信息，以对图表的尺寸进行调整。

在本发明一实施例中，由于页面上图表的尺寸一般都是固定的，需要针对不同尺寸的图表进行不同的配置，无法满足用户动态拖拽图表尺寸的需求，因此，为了满足用户动态拖拽图表尺寸的需求，实现对页面上的图表尺寸的调整，可以通过获取拖拽节点的当前宽度信息以及当前高度信息，并基于设置好的初始位置信息所包括的初始宽度信息以及初始高度信息，确定拖拽节点的宽度和/或高度是否发生位移，并在确定出拖拽节点的宽度和/或高度发生位移时，对布局组件页面中设置的初始位置信息进行更新，以实现对图表尺寸的调整。

为了确定拖拽节点是否发生位移，在本发明一实施例中，上述实施例中的步骤105根据拖拽节点的第一当前位置信息和第一初始位置信息，确定拖拽节点是否发生位移，包括：

获取仪表盘距离图表页面的距离；

根据拖拽节点的第一当前位置信息确定鼠标距离图表页面的距离；

根据拖拽节点的第一当前位置信息确定鼠标距离拖拽节点的距离；

通过下述公式，计算拖拽节点的位移量，

L＝L₁-L₂-L₃

其中，L表示拖拽节点的位移量，L₁表示鼠标距离图表页面的距离，L₂表示仪表盘距离图表页面的距离，L₃表示鼠标距离拖拽节点的距离；

根据计算出的位移量，确定拖拽节点是否发生位移。

在本发明一实施例中，通过不断更新拖拽节点的当前位置信息使图表发生位置移动的效果，因此，可以获取仪表盘距离图表页面的距离，根据拖拽节点的第一当前位置信息确定鼠标距离图表页面的距离；根据拖拽节点的第一当前位置信息确定鼠标距离拖拽节点的距离，并基于鼠标距离图表页面的距离、仪表盘距离图表页面的距离以及鼠标距离拖拽节点的距离计算拖拽节点的位移量，以确定拖拽节点是否发生位移。

为了将图表展示在仪表盘，在本发明实施例中，上述实施例中的步骤103根据对布局组件页面的初始位置设置，将图表展示在仪表盘，包括：

将图表页面映射为坐标网格；

在坐标网格中构建坐标系；

将图表映射为坐标系中的节点；

根据初始位置设置信息，利用坐标系确定节点的坐标信息；

根据节点的坐标信息以及初始位置设置信息中所包括的宽度信息和高度信息，将图表展示在仪表盘。

在本发明一实施例中，布局组件页面可以用来动态拖拽图表的位置和尺寸。因此，可以将整个图表页面映射为一个坐标网格，并将不同的图表视为不同的节点。通过在坐标网格中构建坐标系之后，每个节点可以根据初始位置设置信息，利用坐标系确定拖拽节点的坐标信息，比如：横坐标(x)和纵坐标(y)，从而控制节点的当前位置，并基于拖拽节点的坐标信息以及初始位置设置信息中所包括的宽度信息和高度信息，将图表展示在仪表盘，以便用户查看。

为了删除不需要展示的图表，在本发明一实施例中，上述实施例进一步包括：

接收所述用户从外部输入的删除指令；

根据所述删除指令，执行对所述图表的删除操作；

在本发明一实施例中，对于仪表盘上的图表，在用户不需要进行展示的情况下，可以对不需要展示的图表进行删除操作，因此，可以在接收到用户从外部输入的删除指令时，基于删除指令，对不需要展示的图表进行删除操作。

为了对图表进行编辑，在本发明一实施例中，上述实施例进一步包括：

接收所述用户从外部输入的编辑指令；

根据所述编辑指令，执行对所述图表的编辑操作，其中，所述编辑操作包括针对所述图表的类型、大小以及数据源的初始设置信息的编辑。

在本发明一实施例中，对于仪表盘上的图表，在用户需要对当前图表信息进行编辑的情况下，可以执行对该图表的编辑操作，因此，可以在接收到用户从外部输入的编辑指令时，基于编辑指令，对需要编辑的图表信息进行相应的编辑。

本发明可以基于VUE进行仪表盘动态配置及拖拽，解决传统软件项目中数据可视化仪表盘开发工作量大、重复工作多、适用场景单一、难以做到灵活可配的需求。实现一种在VUE的框架下，动态配置图表的相关信息并展示，由图表组合成仪表盘，并能动态拖拽图表尺寸及位置的功能。

如图2所示，为了更加清楚地说明本发明的技术方案及优点，下面对本发明实施例提供了图表的调整方法进行详细说明，具体可以包括以下步骤：

步骤201：接收用户从外部输入的设置命令，其中，设置命令用于表征用户针对仪表盘的布局组件页面的初始位置设置信息，初始位置设置信息包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息，拖拽节点的初始宽度信息以及初始高度信息；拖拽节点为图表的左上角节点，占位节点用于表征拖拽节点所能覆盖的布局节点。

具体地，可以预先存储图表配置的相关信息，由于每个图表相关字段不固定，可以采用JSON字符串的方式进行存储，同时另建枚举表在数据库中内置所有可选的图表类型，如：折线图、柱状图、饼图、指标卡等。图表组件页面可以预置不同的图表渲染方法。

举例来说，可以设置以下图表相关字段：ID存储图表ID编号；DashBoardType存储仪表盘类型；DeviceID存储设备ID，DeviceitemID存储设备属性ID；ModelID存储模板ID；ModeitemlID存储模板属性ID；ChartName用来存储图表名称；ChartType用来存储图表类型；ChartConfig用来存储图表配置信息，包括数据类型(比如，包含起始时间和截止时间的固定时段)、统计间隔(比如，30分钟)、数据源等字段；DashBoardData用来存储图表尺寸及位置信息；在接收到用户对以上字段对应的图表输入的图表信息时，将对应的图表信息存储到数据库中。

可以采用ECharts对图表进行渲染，需要预置不同类型的ECharts图表渲染方式，例如折线图、柱状图、饼图、指标卡等图表。

步骤202：根据设置命令，对布局组件页面进行初始位置设置。

步骤203：将图表页面映射为坐标网格。

步骤204：在坐标网格中构建坐标系。

步骤205：将图表映射为坐标系中的节点。

步骤206：根据初始位置设置信息，利用坐标系确定节点的坐标信息。

步骤207：根据拖拽节点的坐标信息以及初始位置设置信息中所包括的宽度信息和高度信息，确定图表的初始位置，以能够将图表展示在仪表盘。

具体地，布局组件页面用来动态拖拽图表的位置及尺寸，可以把整个图表页面视为一个网格，不同的图表视为不同的节点。每个节点就可以通过横坐标(x)和纵坐标(y)来控制节点的位置。

举例来说，假设拖拽节点位于图表页面的左上角，可以确定该节点对应的坐标信息为(0,0)；并通过初始设置信息中所包括的宽度信息和高度信息设置数据结构为{"x":0,"y":0,"w":2,"h":2,"i":"0"}，同时，图表也会展示在对应的位置，并且可以根据初始位置信息确定图表的初始位置。

步骤208：获取拖拽节点的第一当前位置信息以及占位节点的第二当前位置信息。

步骤209：获取仪表盘距离图表页面的距离。

步骤210：根据拖拽节点的第一当前位置信息确定鼠标距离图表页面的距离。

步骤211：根据拖拽节点的第一当前位置信息确定鼠标距离拖拽节点的距离。

步骤212：根据鼠标距离图表页面的距离，仪表盘距离图表页面的距离以及鼠标距离拖拽节点的距离，计算拖拽节点的位移量。

举例来说，可以通过下述公式计算拖拽节点的位移量：

L＝L₁-L₂-L₃

其中，L表示拖拽节点的位移量，L₁表示鼠标距离图表页面的距离，L₂表示仪表盘距离图表页面的距离，L₃表示鼠标距离拖拽节点的距离。

步骤213：根据计算出的位移量，确定拖拽节点是否发生位移。

步骤214：在确定出拖拽节点发生位移时，将拖拽节点的第一初始位置信息更改为第一当前位置信息，将占位节点的第二初始位置信息更改为第二当前位置信息，以对图表的位置进行调整。

具体地，在节点进行拖拽的过程，拖拽节点需要绑定mousedown、mousemove、mouseup等方法，同时，占位节点跟随拖拽节点一起移动。当单个图表进行拖拽时，与拖拽节点发生碰撞的节点及其下面的节点，都需要先下移一定距离，这样拖拽节点就可以移到相应位置，然后需要执行整个网格的节点数组的重新排版，将所有节点的位置重新计算并尽可能上移。通过计算拖拽节点距离仪表盘的偏移(drag方法中的x,y)，将其转化为对应网格的坐标。确定转化后的坐标信息是否发生变化，如果发生变化则更新占位节点的坐标。

举例来说，鼠标在拖拽节点上按下，触发mousedown方法，调用方法存储相关初始值，比如，拖拽节点的初始坐标信息，移动鼠标触发mousemove方法，此时需要根据鼠标横向或者纵向移动的距离判断是否为拖拽行为来执行drag相关方法，如果鼠标横向或纵向移动了一定的距离，则认为是拖拽行为，开始执行dragdrop.dragStart方法，之后鼠标继续移动执行dragdrop.drag方法。最后鼠标松开后，会执行mouseup方法，重置回初始状态，同时执行dragdrop.dragEnd方法。

drag方法在鼠标移动时都会执行该方法，通过不断更新拖拽节点的样式来使拖拽节点发生移动效果。

dragEnd方法用来重置仪表盘和节点状态。

步骤215：获取拖拽节点的当前宽度信息以及当前高度信息。

步骤216：根据初始宽度信息以及当前宽度信息，确定拖拽节点的宽度是否发生位移。

步骤217：根据初始高度信息以及当前高度信息，确定拖拽节点的高度是否发生位移。

步骤218：在确定出拖拽节点的宽度和/或高度发生位移时，将拖拽节点的初始宽度信息更改为当前宽度信息，将拖拽节点的初始高度信息更改为当前高度信息，以对图表的尺寸进行调整。

具体地，每个节点都可以拖拽改变其位置或者缩放改变其尺寸，若更改节点尺寸则会调用图表自适应方法，实现自由布局排版。

举例来说，可以通过公式：鼠标移动的距离＝鼠标移动一段距离之后距离仪表盘的距离-鼠标点击后距离仪表盘的距离，计算出节点移动的x和y的距离，进行节点的坐标转换。并根据鼠标距整个仪表盘距离的偏移，来修改节点的尺寸(比如，宽度信息和高度信息)。将移动和调整尺寸事件侦听器添加到每个节点中，以便在移动或调整节点元素时通知副页面，即移动和调整尺寸时会触发moveEvent(移动时触发)、resizeEvent(调整尺寸时触发)、movedEvent(移动后触发)、resizedEvent(调整尺寸后触发)等方法，在方法中传入图表id，根据id调用相对应的图表自适应方法，实现动态改变图表尺寸。缩放改变图表尺寸后，根据布局更新事件，完成更新会重新计算所有节点位置，生成新的布局数组。

步骤219：接收用户从外部输入的删除指令。

步骤220：根据删除指令，执行对图表的删除操作。

步骤221：接收用户从外部输入的编辑指令。

步骤222：根据编辑指令，执行对图表的编辑操作，其中，编辑操作包括针对图表的类型、大小以及数据源的初始设置信息的编辑。

具体地，每个图表点击编辑、删除即可进行图表的编辑、删除操作。编辑操作可以更换图表的类型，大小，数据源等，实现图表的动态生成，删除操作可以对不需要显示在仪表盘中的图表进行删除。

如图3所示，本发明实施例提供了仪表盘，包括：

接收模块301，用于接收用户从外部输入的设置命令，其中，设置命令用于表征用户针对仪表盘的布局组件页面的初始位置设置信息，初始位置设置信息包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息，拖拽节点为图表的左上角节点，占位节点用于表征拖拽节点所能覆盖的布局节点；

设置模块302，用于根据接收模块301接收到的设置命令，对布局组件页面进行初始位置设置；

确定模块303，用于根据设置模块302对布局组件页面的初始位置设置，确定图表的初始位置，以能够将图表展示在仪表盘；

位置调整模块304，用于获取拖拽节点的第一当前位置信息以及占位节点的第二当前位置信息；根据拖拽节点的第一当前位置信息和第一初始位置信息，确定拖拽节点是否发生位移；在确定出拖拽节点发生位移时，将拖拽节点的第一初始位置信息更改为第一当前位置信息，将占位节点的第二初始位置信息更改为第二当前位置信息，以对确定模块304展示的图表的位置进行调整。

在本发明实施例中，页面上图表的位置一般都是固定的，需要针对不同位置的图表进行不同的配置，无法满足用户动态拖拽图表位置的需求，因此，为了满足用户动态拖拽图表位置的需求，实现对页面上的图表位置的调整，可以在接收模块接收到用户输入的设置命令的触发下，通过设置模块针对仪表盘的布局组件页面进行包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息的设置，以确定图表的初始位置，并根据确定的图表的初始位置将图表通过确定模块展示在仪表盘上对应的位置，然后通过位置调整模块获取图表左上角的拖拽节点对应的第一当前位置信息以及占位节点对应的第二当前位置信息，基于拖拽节点的第一当前位置信息和第一初始位置信息确定是否存在位移，并在确定出拖拽节点发生位移时，针对布局组件页面中的初始位置信息进行更新，从而实现对页面上图表的动态拖拽，通过上述方式，可以灵活调整图表的位置。

如图4所示，基于图3所示的仪表盘，在本发明一实施例中，初始位置设置信息还包括：拖拽节点的初始宽度信息以及初始高度信息；

进一步包括：

尺寸调整模块305，用于获取拖拽节点的当前宽度信息以及当前高度信息；根据初始宽度信息以及当前宽度信息，确定拖拽节点的宽度是否发生位移；根据初始高度信息以及当前高度信息，确定拖拽节点的高度是否发生位移；在确定出拖拽节点的宽度和/或高度发生位移时，将拖拽节点的初始宽度信息更改为当前宽度信息，将拖拽节点的初始高度信息更改为当前高度信息，以对图表的尺寸进行调整。

在本发明一实施例中，位置调整模块304，用于执行：

获取仪表盘距离图表页面的距离；

根据拖拽节点的第一当前位置信息确定鼠标距离图表页面的距离；

根据拖拽节点的第一当前位置信息确定鼠标距离拖拽节点的距离；

通过下述公式，计算拖拽节点的位移量，

L＝L₁-L₂-L₃

其中，L表示拖拽节点的位移量，L₁表示鼠标距离图表页面的距离，L₂表示仪表盘距离图表页面的距离，L₃表示鼠标距离拖拽节点的距离；

根据计算出的位移量，确定拖拽节点是否发生位移。

在本发明一实施例中，确定模块303，用于执行：

将图表页面映射为坐标网格；

在坐标网格中构建坐标系；

将图表映射为坐标系中的节点；

根据初始位置设置信息，利用坐标系确定拖拽节点的坐标信息；

根据拖拽节点的坐标信息以及初始位置设置信息中所包括的宽度信息和高度信息，将图表展示在仪表盘。

如图5所示，基于图3所示的仪表盘，在本发明一实施例中，进一步包括：

删除模块306，用于接收用户从外部输入的删除指令；根据删除指令，执行对图表的删除操作。

如图6所示，基于图3所示的仪表盘，在本发明一实施例中，进一步包括

编辑模块307，用于接收用户从外部输入的编辑指令；根据编辑指令，执行对图表的编辑操作，其中，编辑操作包括针对图表的类型、大小以及数据源的初始设置信息的编辑。

可以理解的是，本发明实施例示意的结构并不构成对仪表盘的具体限定。在本发明的另一些实施例中，仪表盘可以包括比图示更多或者更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件、软件或者软件和硬件的组合来实现。

上述装置内的各单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

本发明实施例还提供了仪表盘，包括：至少一个存储器和至少一个处理器；

至少一个存储器，用于存储机器可读程序；

至少一个处理器，用于调用机器可读程序，执行本发明任一实施例中的图表的调整方法。

本发明实施例还提供了一种计算机可读介质，计算机可读介质上存储有计算机指令，计算机指令在被处理器执行时，使处理器执行本发明任一实施例中的图表的调整方法。

具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或CPU或MPU)读出并执行存储在存储介质中的程序代码。

在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。

用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-RAM、DVD-RW、DVD+RW)、磁带、非易失性存储卡和ROM。可选择地，可以由通信网络从服务器计算机上下载程序代码。

此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。

此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的CPU等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。

本发明各个实施例至少具有如下有益效果：

1、在本发明实施例中，页面上图表的位置一般都是固定的，需要针对不同位置的图表进行不同的配置，无法满足用户动态拖拽图表位置的需求，因此，为了满足用户动态拖拽图表位置的需求，实现对页面上的图表位置的调整，可以在接收到用户输入的设置命令的触发下，针对仪表盘的布局组件页面进行包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息的设置，以确定图表的初始位置，并根据确定的图表的初始位置将图表展示在仪表盘上对应的位置，然后获取图表左上角的拖拽节点对应的第一当前位置信息以及占位节点对应的第二当前位置信息，基于拖拽节点的第一当前位置信息和第一初始位置信息确定是否存在位移，并在确定出拖拽节点发生位移时，针对布局组件页面中的初始位置信息进行更新，从而实现对页面上图表的动态拖拽，通过上述方式，可以灵活调整图表的位置；

2、在本发明一实施例中，由于页面上图表的尺寸一般都是固定的，需要针对不同尺寸的图表进行不同的配置，无法满足用户动态拖拽图表尺寸的需求，因此，为了满足用户动态拖拽图表尺寸的需求，实现对页面上的图表尺寸的调整，可以通过获取拖拽节点的当前宽度信息以及当前高度信息，并基于设置好的初始位置信息所包括的初始宽度信息以及初始高度信息，确定拖拽节点的宽度和/或高度是否发生位移，并在确定出拖拽节点的宽度和/或高度发生位移时，对布局组件页面中设置的初始位置信息进行更新，以实现对图表尺寸的调整；

3、在本发明一实施例中，通过不断更新拖拽节点的当前位置信息使图表发生位置移动的效果，因此，可以获取仪表盘距离图表页面的距离，根据拖拽节点的第一当前位置信息确定鼠标距离图表页面的距离；根据拖拽节点的第一当前位置信息确定鼠标距离拖拽节点的距离，并基于鼠标距离图表页面的距离、仪表盘距离图表页面的距离以及鼠标距离拖拽节点的距离计算拖拽节点的位移量，以确定拖拽节点是否发生位移。

需要说明的是，上述各流程和各系统结构图中不是所有的步骤和模块都是必须的，可以根据实际的需要忽略某些步骤或模块。各步骤的执行顺序不是固定的，可以根据需要进行调整。上述各实施例中描述的系统结构可以是物理结构，也可以是逻辑结构，即，有些模块可能由同一物理实体实现，或者，有些模块可能分由多个物理实体实现，或者，可以由多个独立设备中的某些部件共同实现。

以上各实施例中，硬件单元可以通过机械方式或电气方式实现。例如，一个硬件单元可以包括永久性专用的电路或逻辑(如专门的处理器，FPGA或ASIC)来完成相应操作。硬件单元还可以包括可编程逻辑或电路(如通用处理器或其它可编程处理器)，可以由软件进行临时的设置以完成相应操作。具体的实现方式(机械方式、或专用的永久性电路、或者临时设置的电路)可以基于成本和时间上的考虑来确定。

上文通过附图和优选实施例对本发明进行了详细展示和说明，然而本发明不限于这些已揭示的实施例，基与上述多个实施例本领域技术人员可以知晓，可以组合上述不同实施例中的代码审核手段得到本发明更多的实施例，这些实施例也在本发明的保护范围之内。

Claims (10)

1.图表的调整方法，应用于仪表盘，其特征在于，包括：

接收用户从外部输入的设置命令，其中，所述设置命令用于表征所述用户针对仪表盘的布局组件页面的初始位置设置信息，所述初始位置设置信息包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息，所述拖拽节点为图表的左上角节点，所述占位节点用于表征所述拖拽节点所能覆盖的布局节点；

根据所述设置命令，对所述布局组件页面进行初始位置设置；

根据对所述布局组件页面的所述初始位置设置，确定所述图表的初始位置，以能够将所述图表展示在所述仪表盘；

获取所述拖拽节点的第一当前位置信息以及所述占位节点的第二当前位置信息；

根据所述拖拽节点的所述第一当前位置信息和所述第一初始位置信息，确定所述拖拽节点是否发生位移；

在确定出所述拖拽节点发生位移时，将所述拖拽节点的第一初始位置信息更改为所述第一当前位置信息，将所述占位节点的第二初始位置信息更改为所述第二当前位置信息，以对所述图表的位置进行调整。

2.根据权利要求1所述的方法，其特征在于，

进一步包括：

所述初始位置设置信息还包括：所述拖拽节点的初始宽度信息以及初始高度信息；

获取所述拖拽节点的当前宽度信息以及当前高度信息；

根据所述初始宽度信息以及所述当前宽度信息，确定所述拖拽节点的宽度是否发生位移；

根据所述初始高度信息以及所述当前高度信息，确定所述拖拽节点的高度是否发生位移；

在确定出所述拖拽节点的所述宽度和/或所述高度发生位移时，将所述拖拽节点的所述初始宽度信息更改为所述当前宽度信息，将所述拖拽节点的所述初始高度信息更改为所述当前高度信息，以对所述图表的尺寸进行调整。

3.根据权利要求1所述的方法，其特征在于，

所述根据所述拖拽节点的所述第一当前位置信息和所述第一初始位置信息，确定所述拖拽节点是否发生位移，包括：

获取所述仪表盘距离图表页面的距离；

根据所述拖拽节点的所述第一当前位置信息确定鼠标距离所述图表页面的距离；

根据所述拖拽节点的所述第一当前位置信息确定所述鼠标距离所述拖拽节点的距离；

通过下述公式，计算所述拖拽节点的位移量，

L＝L₁-L₂-L₃

其中，所述L表示所述拖拽节点的所述位移量，所述L₁表示所述鼠标距离所述图表页面的距离，所述L₂表示所述仪表盘距离所述图表页面的距离，所述L₃表示所述鼠标距离所述拖拽节点的距离；

根据计算出的所述位移量，确定所述拖拽节点是否发生位移。

4.根据权利要求1和2所述的方法，其特征在于，

所述确定所述图表的初始位置，包括：

将所述图表所在的页面映射为坐标网格；

在所述坐标网格中构建坐标系；

将所述图表映射为所述坐标系中的节点；

根据所述初始位置设置信息，利用所述坐标系确定所述节点的坐标信息；

根据所述节点的所述坐标信息以及所述初始位置设置信息中所包括的所述宽度信息和所述高度信息，确定所述图表的初始位置。

5.根据权利要求1-4中任一所述的方法，其特征在于，

进一步包括：

接收所述用户从外部输入的删除指令；

根据所述删除指令，执行对所述图表的删除操作；

和/或，

所述初始设置信息还包括：所述图表的类型、大小以及数据源信息；

接收所述用户从外部输入的编辑指令；

根据所述编辑指令，执行对所述图表的编辑操作，其中，所述编辑操作包括针对所述图表的类型、大小以及数据源的初始设置信息的编辑。

6.仪表盘，其特征在于，包括：

接收模块，用于接收用户从外部输入的设置命令，其中，所述设置命令用于表征所述用户针对仪表盘的布局组件页面的初始位置设置信息，所述初始位置设置信息包括拖拽节点的第一初始位置信息和占位节点的第二初始位置信息，所述拖拽节点为图表的左上角节点，所述占位节点用于表征所述拖拽节点所能覆盖的布局节点；

设置模块，用于根据所述接收模块接收到的所述设置命令，对所述布局组件页面进行初始位置设置；

确定模块，用于根据所述设置模块对所述布局组件页面的所述初始位置设置，确定所述图表的初始位置，以能够将所述图表展示在所述仪表盘；

位置调整模块，用于获取所述拖拽节点的第一当前位置信息以及所述占位节点的第二当前位置信息；根据所述拖拽节点的所述第一当前位置信息和所述第一初始位置信息，确定所述拖拽节点是否发生位移；在确定出所述拖拽节点发生位移时，将所述拖拽节点的第一初始位置信息更改为所述第一当前位置信息，将所述占位节点的第二初始位置信息更改为所述第二当前位置信息，以对所述图表的位置进行调整。

7.根据权利要求6所述的装置，其特征在于，

所述初始位置设置信息还包括：所述拖拽节点的初始宽度信息以及初始高度信息；

进一步包括：

尺寸调整模块，用于获取所述拖拽节点的当前宽度信息以及当前高度信息；根据所述初始宽度信息以及所述当前宽度信息，确定所述拖拽节点的宽度是否发生位移；根据所述初始高度信息以及所述当前高度信息，确定所述拖拽节点的高度是否发生位移；在确定出所述拖拽节点的所述宽度和/或所述高度发生位移时，将所述拖拽节点的所述初始宽度信息更改为所述当前宽度信息，将所述拖拽节点的所述初始高度信息更改为所述当前高度信息，以对所述图表的尺寸进行调整。

8.根据权利要求6所述的装置，其特征在于，

所述位置调整模块，用于执行：

获取所述仪表盘距离图表页面的距离；

根据所述拖拽节点的所述第一当前位置信息确定鼠标距离所述图表页面的距离；

根据所述拖拽节点的所述第一当前位置信息确定所述鼠标距离所述拖拽节点的距离；

通过下述公式，计算所述拖拽节点的位移量，

L＝L₁-L₂-L₃

其中，所述L表示所述拖拽节点的所述位移量，所述L₁表示所述鼠标距离所述图表页面的距离，所述L₂表示所述仪表盘距离所述图表页面的距离，所述L₃表示所述鼠标距离所述拖拽节点的距离；

根据计算出的所述位移量，确定所述拖拽节点是否发生位移。

9.根据权利要求6和7所述的装置，其特征在于，

所述确定模块，用于执行：

将所述图表所在的页面映射为坐标网格；

在所述坐标网格中构建坐标系；

将所述图表映射为所述坐标系中的节点；

根据所述初始位置设置信息，利用所述坐标系确定所述节点的坐标信息；

根据所述节点的所述坐标信息以及所述初始位置设置信息中所包括的所述宽度信息和所述高度信息，将所述图表展示在所述仪表盘。

10.根据权利要求6-9中任一所述的装置，其特征在于，

进一步包括：

删除模块，用于接收所述用户从外部输入的删除指令；根据所述删除指令，执行对所述图表的删除操作；

和/或，

编辑模块，用于接收所述用户从外部输入的编辑指令；

根据所述编辑指令，执行对所述图表的编辑操作，其中，所述编辑操作包括针对所述图表的类型、大小以及数据源的初始设置信息的编辑。

Images