WO2023097998A1

WO2023097998A1 - Chart display method and apparatus, electronic device, storage medium, and program

Info

Publication number: WO2023097998A1
Application number: PCT/CN2022/095559
Authority: WO
Inventors: 石明康
Original assignee: 上海商汤智能科技有限公司
Priority date: 2021-11-30
Filing date: 2022-05-27
Publication date: 2023-06-08
Also published as: CN114116106A

Abstract

Embodiments of the present disclosure provide a chart display method and apparatus, an electronic device, a storage medium, and a program. The method is applicable to a webpage end, and comprises: dividing a chart display region in a dashboard into multiple grids; displaying a chart in at least one of the grids; and in response to a display region change request regarding the chart, displaying the chart in a grid indicated by the change request. The embodiments of the present disclosure enable a chart display region at a webpage end to be changed, thereby improving user experience.

Description

图表显示方法、装置、电子设备、存储介质及程序Diagram display method, device, electronic device, storage medium, and program

相关申请的交叉引用Cross References to Related Applications

本公开要求2021年11月30日提交的中国专利申请号为202111446442.5、申请人为上海商汤科技开发有限公司，申请名称为“图表显示方法及装置、电子设备和存储介质”的优先权，该申请的全文以引用的方式并入本公开中。This disclosure claims the priority of the Chinese patent application number 202111446442.5 submitted on November 30, 2021, the applicant is Shanghai Shangtang Technology Development Co., Ltd., and the application name is "chart display method and device, electronic equipment and storage medium". is incorporated by reference in its entirety into this disclosure.

技术领域technical field

本公开涉及但不限于计算机技术领域，尤其涉及一种图表显示方法、装置、电子设备、存储介质及程序。The present disclosure relates to but not limited to the technical field of computers, and in particular relates to a graph display method, device, electronic equipment, storage medium and program.

背景技术Background technique

数据可视化技术是关于数据视觉表现形式的技术，允许利用图形、图像处理、计算机视觉以及用户界面，对数据进行可视化显示。在实际应用中，可以将数据保存在服务器端，客户端将统计的数据通过浏览器网页以可视化图表的形式显示出来，例如通过折线图、饼状图等形式显示出来。Data visualization technology is a technology about the visual representation of data, which allows the use of graphics, image processing, computer vision and user interface to visualize data. In practical applications, the data can be saved on the server side, and the client side can display the statistical data in the form of visual charts through the browser webpage, such as line charts, pie charts, etc.

在相关技术中，通过浏览器网页形式显示的可视化图表，通常无法支持用户观察一些数据细节或将多个图表对比查看，用户体验较差。In related technologies, visual charts displayed in the form of browser webpages usually cannot support users to observe some data details or compare and view multiple charts, and the user experience is poor.

发明内容Contents of the invention

本公开实施例提出了一种图表显示技术方案。The embodiment of the present disclosure proposes a technical solution for graph display.

本公开实施例提供了一种图表显示方法，应用于网页端，包括：An embodiment of the present disclosure provides a graph display method applied to a web page, including:

将数据可视化面板中的图表显示区域划分为多个栅格；Divide the chart display area in the data visualization panel into multiple grids;

将图表显示于至少一个所述栅格中；displaying a graph in at least one of said grids;

响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。In response to a display area change request for the graph, the graph is displayed in a grid indicated by the change request.

由此，通过调整图表所在的栅格，能够实现对图表显示区域的变更的基础上，基于栅格动态调整图表在图表显示区域的显示尺寸或显示位置等；这样，可以支持相关操作用户对图表内显示的一些数据细节进行观看，以便提高用户体验；且响应于相关变更请求，无需第三方插件，可通过浏览器网页自带元素响应于不同需求，来实现图表在图表显示区域内对应的栅格；这样，占用的处理资源较少，进而能够减少页面卡顿的情况，使得用户体验更好。Thus, by adjusting the grid where the chart is located, it is possible to dynamically adjust the display size or position of the chart in the chart display area based on the grid on the basis of changing the chart display area; In order to improve the user experience; and in response to related change requests, no third-party plug-ins are required, and the corresponding grid elements of the chart in the chart display area can be realized through the elements of the browser web page in response to different needs. In this way, less processing resources are occupied, which can reduce the situation of page freeze and make the user experience better.

在本公开的一些实施例中，所述显示区域变更请求包括图表显示尺寸变更请求，用于变更所述图表的尺寸；所述将所述图表显示于所述变更请求指示的栅格中，包括：根据所述图表显示尺寸变更请求所指示的第一栅格，将所述图表显示于所述第一栅格中。In some embodiments of the present disclosure, the display area change request includes a chart display size change request for changing the size of the chart; the displaying the chart in the grid indicated by the change request includes : Display the graph on the first grid according to the first grid indicated by the graph display size change request.

在本公开的一些实施例中，所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发；所述将所述图表显示于所述变更请求指示的栅格中，包括：确定所述第一拖动操作结束时拖动点的坐标；根据所述坐标，确定被拖动的边界在所述图表显示区域所占据的第一目标栅格；将所述第一目标栅格作为被拖动的边界所占据的栅格，对所述图表进行显示。In some embodiments of the present disclosure, the chart display size change request is triggered based on the user's first drag operation on the boundary of the chart; the displaying the chart in the grid indicated by the change request, The method includes: determining the coordinates of the drag point when the first drag operation ends; determining the first target grid occupied by the dragged boundary in the chart display area according to the coordinates; Grid The graph is displayed as the grid occupied by the dragged border.

在本公开的一些实施例中，所述显示区域变更请求包括图表移动请求，用于请求移动所述图表；所述将所述图表显示于所述变更请求指示的栅格中，包括：根据所述图表移动请求所指示的第二栅格，将所述图表显示于所述第二栅格中。In some embodiments of the present disclosure, the display area change request includes a chart movement request for requesting to move the chart; the displaying the chart in the grid indicated by the change request includes: according to the the second grid indicated by the chart movement request, and display the chart on the second grid.

在本公开的一些实施例中，所述图表移动请求基于用户对所述图表整体的第二拖动操作触发；所述将所述图表显示于所述变更请求指示的栅格中，包括：确定对所述图表整体的第二拖动操作所对应的位移；根据所述第二拖动操作前图表在所述图表显示区域所占据的栅格以及所述位移，确定所述第二拖动操作后所述图表所占据的所述第二栅格；将所述图表显示于所述第二栅格中。In some embodiments of the present disclosure, the graph movement request is triggered based on the user's second drag operation on the entire graph; the displaying the graph in the grid indicated by the change request includes: determining The displacement corresponding to the second drag operation on the entire chart; determining the second drag operation according to the grid occupied by the chart in the chart display area before the second drag operation and the displacement Then the second grid occupied by the graph; displaying the graph in the second grid.

在本公开的一些实施例中，在将所述图表显示于所述变更请求指示的栅格中后，所述方法还包括：将所述图表的显示参数进行存储，所述显示参数用于指示所述图表显示时所占据的栅格。In some embodiments of the present disclosure, after displaying the graph in the grid indicated by the change request, the method further includes: storing display parameters of the graph, the display parameters being used to indicate The grid that the chart will occupy when displayed.

在本公开的一些实施例中，在将所述图表的显示参数进行存储后，所述方法还包括：响应于用户对所述图表的显示请求，获取预先存储的所述显示参数；将所述图表显示于所述显示参数指示的栅格中。In some embodiments of the present disclosure, after storing the display parameters of the chart, the method further includes: acquiring the pre-stored display parameters in response to a user's display request for the chart; The graph is displayed in a grid indicated by said display parameters.

以下装置、电子设备等的效果描述参见上述图表显示方法的说明。For the description of the effects of the following devices, electronic equipment, etc., please refer to the description of the above-mentioned chart display method.

本公开实施例提供了一种图表显示装置，包括：An embodiment of the present disclosure provides a graph display device, including:

划分部分，被配置为将数据可视化面板中的图表显示区域划分为多个栅格；a division part configured to divide the chart display area in the data visualization panel into multiple grids;

第一显示部分，被配置为将图表显示于至少一个所述栅格中；a first display portion configured to display graphs in at least one of said grids;

第二显示部分，被配置为响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。A second display section configured to display the graph in a grid indicated by the change request in response to a display area change request for the graph.

在本公开的一些实施例中，所述显示区域变更请求包括图表显示尺寸变更请求，用于变更所述图表的尺寸；所述第二显示部分，还被配置为根据所述图表显示尺寸变更请求所指示的第一栅格，将所述图表显示于所述第一栅格中。In some embodiments of the present disclosure, the display area change request includes a graph display size change request for changing the size of the graph; the second display part is further configured to change the graph display size according to the graph display size change request The first grid is indicated, and the chart is displayed in the first grid.

在本公开的一些实施例中，所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发；所述第二显示部分，还被配置为确定所述第一拖动操作结束时拖动点的坐标；根据所述坐标，确定被拖动的边界在所述图表显示区域所占据的第一目标栅格；将所述第一目标栅格作为被拖动的边界所占据的栅格，对所述图表进行显示。In some embodiments of the present disclosure, the chart display size change request is triggered based on the user's first drag operation on the border of the chart; the second display part is further configured to determine the first drag operation The coordinates of the dragged point at the end of the operation; according to the coordinates, determine the first target grid occupied by the dragged boundary in the chart display area; use the first target grid as the dragged boundary Occupies the grid on which the graph is displayed.

在本公开的一些实施例中，所述显示区域变更请求包括图表移动请求，用于请求移动所述图表；所述第二显示部分，还被配置为根据所述图表移动请求所指示的第二栅格，将所述图表显示于所述第二栅格中。In some embodiments of the present disclosure, the display area change request includes a chart movement request for requesting movement of the chart; the second display part is further configured to grid, displaying the chart in the second grid.

在本公开的一些实施例中，所述图表移动请求基于用户对所述图表整体的第二拖动操作触发；所述第二显示部分，还被配置为确定对所述图表整体的拖动操作所对应的位移；根据所述拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移，确定所述第二拖动操作后所述图表所占据的所述第二栅格；将所述图表显示于所述第二栅格中。In some embodiments of the present disclosure, the chart movement request is triggered based on a user's second drag operation on the entire chart; the second display part is further configured to determine the drag operation on the entire chart The corresponding displacement: according to the grid occupied by the chart in the chart display area before the drag operation and the displacement, determine the second position occupied by the chart after the second drag operation grid; displaying the chart in the second grid.

在本公开的一些实施例中，所述装置还包括：存储部分，被配置为在将所述图表显示于所述变更请求指示的栅格中后，将所述图表的显示参数进行存储，所述显示参数用于指示所述图表显示时所占据的栅格。In some embodiments of the present disclosure, the device further includes: a storage part configured to store the display parameters of the graph after displaying the graph in the grid indicated by the change request, so that The display parameter is used to indicate the grid occupied by the chart when displayed.

在本公开的一些实施例中，所述装置还包括：第三显示部分，被配置为在将所述图表的显示参数进行存储后，响应于用户对所述图表的显示请求，获取预先存储的所述显示参数；将所述图表显示于所述显示参数指示的栅格中。In some embodiments of the present disclosure, the device further includes: a third display part configured to, after storing the display parameters of the chart, obtain the pre-stored display parameters in response to a user's display request for the chart. the display parameter; displaying the graph in a grid indicated by the display parameter.

本公开实施例提供了一种电子设备，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为调用所述存储器存储的指令，以执行上述任一实施例提供的图表显示方法。An embodiment of the present disclosure provides an electronic device, including: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to call the instructions stored in the memory to perform any of the above implementations Example provides a graph display method.

本公开实施例提供了一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现上述任一实施例提供的图表显示方法。An embodiment of the present disclosure provides a computer-readable storage medium, on which computer program instructions are stored, and when the computer program instructions are executed by a processor, the diagram display method provided by any of the foregoing embodiments is implemented.

本公开实施例提供了一种计算机程序产品，所述计算机程序产品包括计算机程序或指令，在所述计算机程序或指令在电子设备上运行的情况下，使得所述电子设备执行上述任一实施例提供的图表显示方法。An embodiment of the present disclosure provides a computer program product, the computer program product includes a computer program or an instruction, and when the computer program or instruction is run on an electronic device, the electronic device executes any of the above-mentioned embodiments The provided graph display method.

在本公开实施例中，通过将数据可视化面板中的图表显示区域划分为多个栅格；将图表显示于至少一个所述栅格中；响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。由此，通过调整图表所在的栅格，能够实现对图表显示区域的变更的基础上，基于栅格动态调整图表在图表显示区域的显示尺寸或显示位置等；这样，可以支持相关操作用户对图表内显示的一些数据细节进行观看，以便提高用户体验；且响应于相关变更请求，无需第三方插件，可通过浏览器网页自带元素响应于不同需求，来实现图表在图表显示区域内对应的栅格；这样，占用的处理资源较少，进而能够减少页面卡顿的情况，使得用户体验更好。In an embodiment of the present disclosure, by dividing the chart display area in the data visualization panel into multiple grids; displaying the chart in at least one of the grids; in response to a display area change request for the chart, all The above chart is displayed in the grid indicated by the change request. Thus, by adjusting the grid where the chart is located, it is possible to dynamically adjust the display size or position of the chart in the chart display area based on the grid on the basis of changing the chart display area; In order to improve the user experience; and in response to related change requests, no third-party plug-ins are required, and the corresponding grid elements of the chart in the chart display area can be realized through the elements of the browser web page in response to different needs. In this way, less processing resources are occupied, which can reduce the situation of page freeze and make the user experience better.

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，而非限制本公开。根据下面参考附图对示例性实施例的详细说明，本公开的其它特征及方面将变得清楚。It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure. Other features and aspects of the present disclosure will become apparent from the following detailed description of exemplary embodiments with reference to the accompanying drawings.

附图说明Description of drawings

为了更清楚地说明本公开实施例的技术方案，下面将对本公开实施例中所需要使用的附图进行说明。In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings that need to be used in the embodiments of the present disclosure will be described below.

此处的附图被并入说明书中并构成本说明书的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。The accompanying drawings here are incorporated into the description and constitute a part of the present description. These drawings show embodiments consistent with the present disclosure, and are used together with the description to explain the technical solution of the present disclosure.

图1示出根据本公开实施例提供的一种图表显示方法的流程图。Fig. 1 shows a flow chart of a graph display method according to an embodiment of the present disclosure.

图2A示出可以应用本公开实施例提供的图表显示方法的一种***架构示意图。FIG. 2A shows a schematic diagram of a system architecture to which the chart display method provided by the embodiment of the present disclosure can be applied.

图2B示出根据本公开实施例提供的一种在一行一列的栅格中显示图表的示意图。Fig. 2B shows a schematic diagram of displaying charts in a grid with one row and one column according to an embodiment of the present disclosure.

图3示出根据本公开实施例提供的一种在两行四列的栅格中显示图表的示意图。Fig. 3 shows a schematic diagram of displaying charts in a grid with two rows and four columns according to an embodiment of the present disclosure.

图4示出根据本公开实施例提供的一种在一行四列的栅格中显示图表的示意图。Fig. 4 shows a schematic diagram of displaying charts in a grid with one row and four columns according to an embodiment of the present disclosure.

图5示出根据本公开实施例提供的一种在一行两列的栅格中显示图表的示意图。Fig. 5 shows a schematic diagram of displaying charts in a grid with one row and two columns according to an embodiment of the present disclosure.

图6示出根据本公开实施例提供的一种在一行一列的栅格中显示图表的示意图。Fig. 6 shows a schematic diagram of displaying charts in a row-by-column grid according to an embodiment of the present disclosure.

图7示出根据本公开实施例提供的一种图表显示装置的框图。Fig. 7 shows a block diagram of a chart display device provided according to an embodiment of the present disclosure.

图8示出根据本公开实施例提供的一种电子设备900的框图。Fig. 8 shows a block diagram of an electronic device 900 provided according to an embodiment of the present disclosure.

图9示出根据本公开实施例提供的一种电子设备1900的框图。Fig. 9 shows a block diagram of an electronic device 1900 provided according to an embodiment of the present disclosure.

具体实施方式Detailed ways

以下将参考附图详细说明本公开的各种示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面，但是除非特别指出，不必按比例绘制附图。Various exemplary embodiments, features, and aspects of the present disclosure will be described in detail below with reference to the accompanying drawings. The same reference numbers in the figures indicate functionally identical or similar elements. While various aspects of the embodiments are shown in drawings, the drawings are not necessarily drawn to scale unless specifically indicated.

在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。The word "exemplary" is used exclusively herein to mean "serving as an example, embodiment, or illustration." Any embodiment described herein as "exemplary" is not necessarily to be construed as superior or better than other embodiments.

本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。The term "and/or" in this article is just an association relationship describing associated objects, which means that there can be three relationships, for example, A and/or B can mean: A exists alone, A and B exist simultaneously, and there exists alone B these three situations. In addition, the term "at least one" herein means any one of a variety or any combination of at least two of the more, for example, including at least one of A, B, and C, which may mean including from A, Any one or more elements selected from the set formed by B and C.

另外，为了更好地说明本公开，在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解，没有某些具体细节，本公开同样可以实施。在一些实例中，对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述，以便于凸显本公开的主旨。In addition, in order to better illustrate the present disclosure, numerous specific details are given in the following specific implementation manners. It will be understood by those skilled in the art that the present disclosure may be practiced without some of the specific details. In some instances, methods, means, components and circuits that are well known to those skilled in the art have not been described in detail so as to obscure the gist of the present disclosure.

在相关技术中，在对数据可视化图表进行显示时，往往无法由用户自定义图表的大小和位置，或者，在浏览器中通过第三方插件的形式进行图表的显示，往往会消耗较高的处理资源，容易造成页面卡顿等现象；例如，通过网页flash插件等形式，通过对flash进行放大缩小实现对图表的缩放，但是这样会占用较高的处理资源。In related technologies, when displaying data visualization charts, it is often impossible for users to customize the size and position of the charts, or displaying charts in the form of third-party plug-ins in the browser often consumes relatively high processing resources, it is easy to cause page freezes and other phenomena; for example, through the web page flash plug-in, etc., the zoom of the chart is realized by zooming in and out of the flash, but this will take up relatively high processing resources.

在本公开实施例中，通过将数据可视化面板中的图表显示区域划分为多个栅格；将图表显示于至少一个所述栅格中；响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。由此，通过调整图表所在的栅格，能够实现对图表显示区域的变更；同时该过程无需第三方插件，可通过浏览器网页自带元素实现，占用的处理资源较少，能够减少页面卡顿的情况，用户体验更好。In an embodiment of the present disclosure, by dividing the chart display area in the data visualization panel into multiple grids; displaying the chart in at least one of the grids; in response to a display area change request for the chart, all The above chart is displayed in the grid indicated by the change request. Therefore, by adjusting the grid where the chart is located, the change of the display area of the chart can be realized; at the same time, this process does not require a third-party plug-in, and can be realized through the built-in elements of the browser web page, which occupies less processing resources and can reduce page lag case, the user experience is better.

在本公开的一些实施例中，所述图表显示方法可以应用于浏览器和服务器(Browser/Server Architecture，B/S)架构；其中，该浏览器可以安装于客户机，该客户机可以是终端设备或服务器等电子设备，终端设备可以为用户设备(User Equipment，UE)、移动设备、用户终端、终端、蜂窝电话、无绳电话、个人数字助理(Personal Digital Assistant，PDA)、手持设备、计算设备、车载设备、可穿戴设备等，所述方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。In some embodiments of the present disclosure, the graph display method can be applied to a browser and server (Browser/Server Architecture, B/S) architecture; wherein, the browser can be installed on a client computer, and the client computer can be a terminal Electronic devices such as devices or servers, terminal devices can be user equipment (User Equipment, UE), mobile devices, user terminals, terminals, cellular phones, cordless phones, personal digital assistants (Personal Digital Assistant, PDA), handheld devices, computing devices , a vehicle-mounted device, a wearable device, etc., the method may be implemented by calling a computer-readable instruction stored in a memory by a processor.

为便于描述，本说明书一个或多个实施例中，图表显示方法的执行主体可以是浏览器，后文以执行主体为浏览器为例，对该方法的实施方式进行介绍。可以理解，该方法的执行主体为浏览器只是一种示例性的说明，并不应理解为对该方法的限定。For the convenience of description, in one or more embodiments of this specification, the execution subject of the chart display method may be a browser, and the implementation of the method will be introduced later by taking the execution subject as a browser as an example. It can be understood that the execution subject of the method is the browser, which is only an exemplary description and should not be construed as a limitation of the method.

图1示出根据本公开实施例提供的一种图表显示方法的流程图，应用于网页端；如图1所示，所述方法包括：Fig. 1 shows a flowchart of a graph display method provided according to an embodiment of the present disclosure, which is applied to a web page; as shown in Fig. 1 , the method includes:

在步骤S11中，将数据可视化面板中的图表显示区域划分为多个栅格。In step S11, the chart display area in the data visualization panel is divided into multiple grids.

数据可视化面板(dashboard)是用于进行数据可视化显示的界面，在该界面中，通过以折线图、柱状图、饼状图、雷达图等图表的形式对图表进行显示；同时图表会显示于数据可视化面板中的图表显示区域。The data visualization panel (dashboard) is an interface for visual display of data. In this interface, charts are displayed in the form of line charts, histograms, pie charts, radar charts, etc.; at the same time, the charts will be displayed on the data The graph display area in the visualization panel.

在图表显示区域中，可以划分为多个栅格，栅格的大小可以是相同的，通过对图表显示区域进行划分，可以得到N×M个栅格，其中N为栅格的行数，M为栅格的列数，N和M均为大于1的整数。In the chart display area, it can be divided into multiple grids, and the size of the grids can be the same. By dividing the chart display area, N×M grids can be obtained, where N is the number of rows of the grid, and M is the number of columns of the grid, and both N and M are integers greater than 1.

在步骤S12中，将图表显示于至少一个所述栅格中。In step S12, the graph is displayed in at least one of the grids.

划分得到的栅格可以不在用户图形界面中显示，而是用于布局图表显示的区域。具在本公开的一些实施例中，图表会在所占据的栅格中铺满显示，一个图表最多占据图表显示区域中的所有栅格，最少占据一个栅格。The divided grid may not be displayed in the graphical user interface, but is used to layout the display area of the chart. In some embodiments of the present disclosure, the charts are displayed in full grids, and a chart occupies at most all the grids in the chart display area, and occupies at least one grid.

例如，划分的栅格为一行四列，则一个可视化图表最多占据四列(一行)，最少占据一列，也就是一行最多有四个图表，同时一个图表可以占据一行或多行。For example, if the grid is divided into one row and four columns, a visual graph occupies at most four columns (one row), and at least one column, that is, a row has a maximum of four graphs, and a graph can occupy one or more rows.

在步骤S13中，响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。In step S13, in response to the request for changing the display area of the graph, the graph is displayed in the grid indicated by the change request.

显示区域变更请求用于变更图表在图表显示区域中显示的区域。在一个示例中，显示区域变更请求用于请求在图表显示区域中移动图表；在另一个示例中，显示区域变更请求用于请求在图表显示区域中对图表进行缩放。The display area change request is for changing the area where the graph is displayed in the graph display area. In one example, the display area change request is used to request to move the chart in the chart display area; in another example, the display area change request is to request to zoom the chart in the chart display area.

显示区域变更请求会指示显示图表的栅格，因此，可以将图表显示于变更请求指示的栅格中；由此，能够实现变更图表在图表显示区域中显示的区域。The display area change request indicates the grid for displaying the graph, so the graph can be displayed in the grid indicated by the change request; thus, the display area of the graph in the graph display area can be changed.

在本公开实施例中，通过将数据可视化面板中的图表显示区域划分为多个栅格；将图表显示于至少一个所述栅格中；响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。由此，通过调整图表所在的栅格，能够实现对图表显示区域的变更的基础上，基于栅格动态调整图表在图表显示区域的显示尺寸或显示位置等；这样，可以支持相关操作用户对图表内显示的一些数据细节进行观看，以便提高用户体验；且响应于相关变更请求，无需第三方插件，可通过浏览器网页自带元素来实现图表在图表显示区域内对应的栅格；这样，占用的处理资源较少，能够减少页面卡顿的情况，用户体验更好。In an embodiment of the present disclosure, by dividing the chart display area in the data visualization panel into multiple grids; displaying the chart in at least one of the grids; in response to a display area change request for the chart, all The above chart is displayed in the grid indicated by the change request. Thus, by adjusting the grid where the chart is located, it is possible to dynamically adjust the display size or position of the chart in the chart display area based on the grid on the basis of changing the chart display area; In order to improve the user experience; and in response to related change requests, no third-party plug-in is required, and the corresponding grid of the chart in the chart display area can be realized through the elements of the browser webpage; in this way, occupying The processing resources are less, which can reduce the situation of page freeze, and the user experience is better.

图2A示出可以应用本公开实施例提供的图表显示方法的一种***架构示意图；如图2A所示，该***架构中包括：获取终端201、网络202和显示终端203。为实现支撑一个示例性应用，获取终端201和显示终端203通过网络202建立通信连接，显示终端203可以用于显示网页端所对应的显示界面，显示终端203将数据可视化面板中的图表显示区域划分为多个栅格；将图表显示于至少一个栅格中；获取终端201通过网络202向显示终端203上报针对图表的显示区域变更请求，显示中选响应于针对图表的显示区域变更请求，将图表显示于变更请求指示的栅格中。同时显示终端203还可以将显示结果，即图表显示于变更请求指示的栅格中对应的显示结果上传至网络202，并通过网络202发送给获取终端201。FIG. 2A shows a schematic diagram of a system architecture to which the chart display method provided by an embodiment of the present disclosure can be applied; as shown in FIG. 2A , the system architecture includes: an acquisition terminal 201 , a network 202 and a display terminal 203 . In order to support an exemplary application, the acquisition terminal 201 and the display terminal 203 establish a communication connection through the network 202, the display terminal 203 can be used to display the display interface corresponding to the web page, and the display terminal 203 divides the chart display area in the data visualization panel into It is a plurality of grids; the chart is displayed in at least one grid; the acquisition terminal 201 reports the display area change request for the chart to the display terminal 203 through the network 202, and the display is selected in response to the display area change request for the chart. in the grid indicated by the change request. At the same time, the display terminal 203 can also upload the display result, that is, the display result corresponding to the graph displayed in the grid indicated by the change request, to the network 202 and send it to the acquisition terminal 201 through the network 202 .

作为示例，获取终端201可以包括指令或操作采集设备，显示终端203可以包括具有视觉信息处理能力的视觉处理设备或远程服务器。网络202可以采用有线或无线连接方式。其中，当显示终端203为视觉处理设备时，获取终端201可以通过有线连接的方式与视觉处理设备通信连接，例如通过总线进行数据通信；当显示终端203为远程服务器时，获取终端201可以通过无线网络与远程服务器进行数据交互。As an example, the acquisition terminal 201 may include an instruction or operation acquisition device, and the display terminal 203 may include a visual processing device or a remote server capable of processing visual information. The network 202 may be connected in a wired or wireless manner. Wherein, when the display terminal 203 is a visual processing device, the acquisition terminal 201 can communicate with the visual processing device through a wired connection, such as performing data communication through a bus; when the display terminal 203 is a remote server, the acquisition terminal 201 can communicate through a wireless Data exchange between the network and the remote server.

或者，在一些场景中，显示终端203可以是具有显示功能的处理设备。这时，本公开实施例的图表显示方法可以由显示终端203执行，上述***架构可以不包含网络202和获取终端201。Alternatively, in some scenarios, the display terminal 203 may be a processing device with a display function. At this time, the diagram display method in the embodiment of the present disclosure may be executed by the display terminal 203 , and the above-mentioned system architecture may not include the network 202 and the acquisition terminal 201 .

图表显示尺寸变更请求，用于变更所述图表的尺寸，图表显示尺寸变更请求会请求将图表显示至更多的栅格中，以扩大图表的尺寸，或者会请求将图表显示至更少的栅格中，以缩小图表的尺寸。Chart display size change request, used to change the size of the chart in question, the chart display size change request will request to display the chart in more grids to enlarge the size of the chart, or request to display the chart in fewer grids grid to reduce the size of the chart.

图表显示尺寸变更请求中会指示图表需显示的第一栅格，那么，根据图表显示尺寸变更请求所指示的第一栅格，即可将图表显示于第一栅格中，能够实现对图表显示尺寸的变更。The chart display size change request will indicate the first grid to be displayed on the chart, then, according to the first grid indicated by the chart display size change request, the chart can be displayed in the first grid, and the chart can be displayed Changes in size.

在本公开实施例中，显示区域变更请求包括图表显示尺寸变更请求，用于变更图表的尺寸，根据图表显示尺寸变更请求所指示的第一栅格，将图表显示于第一栅格中。由此，通过调整图表所在的栅格，能够实现对图表显示尺寸的变更的基础上，对图表的显示尺寸进行调整；这样，可以支持扩大图表的尺寸，或缩小图表的尺寸，以便满足不同操作用户的需求，例如，相关操作用户需要查看图表的细节时，可基于图表显示尺寸的扩大变更，查看到图表的更多字节；或，相关操作用户需要在同一显示区域内显示信息量更大的图表时，可基于图表显示尺寸的缩小表更，在图表显示区域显示更多的图表信息；且扩大图表的尺寸，或缩小图表的尺寸的实现过程无需第三方插件，可通过浏览器网页自带元素实现；这样，占用的处理资源较少，进而能够减少页面卡顿的情况，用户体验更好。In the embodiment of the present disclosure, the request for changing the display area includes a request for changing the size of the graph, which is used to change the size of the graph, and display the graph in the first grid according to the first grid indicated by the request for changing the size of the graph. Therefore, by adjusting the grid where the chart is located, the display size of the chart can be adjusted on the basis of changing the display size of the chart; in this way, the size of the chart can be expanded or reduced to meet different operations User's needs, for example, when users of related operations need to view the details of the chart, they can view more bytes of the chart based on the expansion and change of the display size of the chart; or, users of related operations need to display a larger amount of information in the same display area When the chart is displayed, more chart information can be displayed in the chart display area based on the reduction of the chart display size; and the process of enlarging the chart size or reducing the chart size does not require a third-party plug-in, and can be automatically accessed through the browser webpage Implemented with elements; in this way, less processing resources are occupied, which can reduce page freezes and provide a better user experience.

图表显示尺寸变更请求可以是基于用户对图表的边界的第一拖动操作而触发，在图表的边界处可以添加操作点，供用户对图表的边界进行第一拖动操作，并添加事件来监听该第一拖动操作。在一个示例中，可以是在图表的右下角的顶点上添加操作点，供用户对图表的边界进行拖动操作，在横向拖动时改变占据的栅格的列数，在纵向拖动时改变占据的栅格的行数，由此，可以实现同时对图表的宽和高进行调整，能够提高用户的操作效率。The chart display size change request can be triggered based on the user's first drag operation on the chart border, and an operation point can be added at the chart border for the user to perform the first drag operation on the chart border, and add an event to listen to The first drag operation. In an example, an operation point can be added to the vertex in the lower right corner of the chart for the user to drag the border of the chart. When dragging horizontally, the number of columns of the occupied grid can be changed, and when dragging vertically, the The number of rows of the occupied grid, thus, the width and height of the chart can be adjusted at the same time, and the user's operation efficiency can be improved.

在拖动边界的过程中，当拖动结束时，可以视为拖动操作结束，在一个示例中，用户通过在操作点上按下左键实现对图表边界的拖动，当检测到左键松开，则确定拖动结束；在另一个示例中，用户通过在操作点上触摸移动实现对图表边界的拖动，当检测到用户停止触摸，则确定拖动结束。拖动结束的位置即可视为用户期望将边界重置的位置。In the process of dragging the border, when the drag ends, the drag operation can be regarded as the end. In one example, the user drags the chart border by pressing the left button on the operation point. When the left button is detected If it is released, it is determined that the dragging ends; in another example, the user drags the border of the chart by touching and moving on the operation point, and when it is detected that the user stops touching, it is determined that the dragging ends. The position where the drag ends can be regarded as the position where the user expects the boundary to be reset.

根据第一拖动操作结束时拖动点的坐标，以及各栅格的坐标，可以确定被拖动的边界在所述图表显示区域所占据的第一目标栅格，；其中，该第一目标栅格即视为用户期望将边界重置的位置，那么可以将第一目标栅格作为被拖动的边界所占据的栅格，对所述图表进行显示，该显示过程中，未被拖动的边界所占据的栅格保持不变，同时将第一栅格铺满来显示图表。According to the coordinates of the drag point at the end of the first drag operation, and the coordinates of each grid, the first target grid occupied by the dragged boundary in the chart display area can be determined; wherein, the first target The grid is regarded as the position where the user expects to reset the boundary, then the first target grid can be used as the grid occupied by the dragged boundary to display the chart. The grid occupied by the boundary of is kept unchanged, and the first grid is tiled to display the chart.

在本公开实施例中，图表显示尺寸变更请求基于用户对图表的边界的第一拖动操作触发，在拖动的过程中，通过确定第一拖动操作结束时拖动点的坐标；根据坐标确定被拖动的边界所占据的第一目标栅格；将第一目标栅格作为被拖动的边界所占据的栅格，对图表进行显示。由此，响应于对图表的边界的第一拖动操作触发，在拖动的过程中，确定图表的边界所占据的目标栅格，进而能够基于该目标栅格对图表进行显示；这样，能够实现通过拖动操作，即对图表的边界所占据的栅格进行动态调整，来对应调整图表在栅格中显示的尺寸，使得用户操作便捷，且实现过程无需额外的第三方插件；如此，占用的处理资源较少，进而能够减少页面卡顿的情况，用户体验更好。In the embodiment of the present disclosure, the chart display size change request is triggered based on the user's first drag operation on the border of the chart. During the dragging process, the coordinates of the drag point at the end of the first drag operation are determined; according to the coordinates A first target grid occupied by the dragged boundary is determined; and the chart is displayed using the first target grid as the grid occupied by the dragged boundary. Thus, in response to the first drag operation trigger on the boundary of the chart, during the dragging process, the target grid occupied by the boundary of the chart is determined, and then the chart can be displayed based on the target grid; thus, the Realize the drag operation, that is, dynamically adjust the grid occupied by the border of the chart, to adjust the size of the chart displayed in the grid accordingly, making the user's operation convenient, and the implementation process does not require additional third-party plug-ins; thus, occupying The processing resources are less, which can reduce the situation of page freeze, and the user experience is better.

图表移动请求，用于请求移动所述图表，图表移动请求会请求将图表显示至新的栅格中，而不改变图表的尺寸。The chart move request is used to request to move the chart, and the chart move request will request to display the chart in a new grid without changing the size of the chart.

图表移动请求中会指示图表移动后所显示的第二栅格，那么，根据图表移动请求所指示的第二栅格，即可将图表显示于第二栅格中，能够实现对图表在图表显示区域中的移动。The chart move request will indicate the second grid displayed after the chart is moved, then, according to the second grid indicated by the chart move request, the chart can be displayed in the second grid, and the chart can be displayed on the chart movement in the area.

在本公开实施例中，显示区域变更请求包括图表移动请求，用于请求移动图表，根据图表移动请求所指示的第二栅格，将图表显示于第二栅格中。由此，通过调整图表所在的栅格，能够实现对图表在图表显示区域中的移动；例如，基于相关操作用户输入的图表移动请求，对图表进行左右或上下移动；这样通过可视化界面的移动操作，使得用户体验更好，并且，该过程无需第三方插件，可通过浏览器网页自带元素实现；这样，占用的处理资源较少，进而能够减少页面卡顿的情况，用户体验更好。In the embodiment of the present disclosure, the display area change request includes a chart movement request, which is used to request to move the chart, and display the chart in the second grid according to the second grid indicated by the chart movement request. Thus, by adjusting the grid where the chart is located, the movement of the chart in the chart display area can be realized; for example, based on the chart movement request input by the relevant operation user, the chart can be moved left and right or up and down; in this way, through the movement operation of the visual interface , making the user experience better, and this process does not require a third-party plug-in, and can be realized through the built-in elements of the browser web page; in this way, less processing resources are occupied, which can reduce the situation of page freezes, and the user experience is better.

在本公开的一些实施例中，所述图表移动请求基于用户对所述图表整体的第二拖动操作触发；所述将所述图表显示于所述变更请求指示的栅格中，包括：确定对所述图表整体的第二拖动操作所对应的位移；根据所述第二拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移，确定所述第二拖动操作后所述图表所占据的所述第二栅格；将所述图表显示于所述第二栅格中。In some embodiments of the present disclosure, the graph movement request is triggered based on the user's second drag operation on the entire graph; the displaying the graph in the grid indicated by the change request includes: determining The displacement corresponding to the second drag operation on the entire chart; according to the grid occupied by the chart in the chart display area before the second drag operation and the displacement, determine the second drag the second grid occupied by the chart after the operation; and display the chart in the second grid.

图表移动请求可以是基于用户对图表整体的第二拖动操作而触发，在图表的预定位置处可以添加操作点，供用户对图表整体进行拖动操作，并添加事件来监听该第二拖动操作。在一个示例中，可以是在图表的上方添加操作点，供用户对图表的边界进行拖动操作，在横向拖动时改变占据的栅格的列数，在纵向拖动时改变占据的栅格的行数，由此，可以实现同时对图表在横向和纵向进行移动，能够提高用户的操作效率。The graph movement request can be triggered based on the user's second drag operation on the entire graph, and an operation point can be added at a predetermined position of the graph for the user to perform a drag operation on the entire graph, and add an event to monitor the second drag operate. In an example, an operation point can be added above the chart for the user to drag the border of the chart, change the number of columns of the occupied grid when dragging horizontally, and change the occupied grid when dragging vertically The number of rows, thus, the chart can be moved horizontally and vertically at the same time, and the user's operation efficiency can be improved.

在本公开的一些实施例中，第一拖动操作和第二拖动操作不同；其中，第一拖动操作是相对于图表的边界而言，第二拖动操作是相对于图表整体而言。In some embodiments of the present disclosure, the first drag operation and the second drag operation are different; wherein, the first drag operation is relative to the boundary of the chart, and the second drag operation is relative to the chart as a whole .

在拖动图表整体的过程中，当拖动结束时，可以视为拖动操作结束，在一个示例中，用户通过在操作点上按下左键实现对图表整体的拖动，当检测到左键松开，则确定拖动结束；在另一个示例中，用户通过在操作点上触摸移动实现对图表整体的拖动，当检测到用户停止触摸，则确定拖动结束。拖动结束的位置即可视为用户期望将图表整体移动至的位置。In the process of dragging the whole chart, when the dragging ends, it can be regarded as the end of the dragging operation. In one example, the user presses the left button on the operation point to drag the whole chart. If the key is released, it is determined that the dragging ends; in another example, the user drags the entire chart by touching and moving on the operation point, and when it is detected that the user stops touching, it is determined that the dragging ends. The position where the dragging ends can be regarded as the position where the user expects to move the chart as a whole.

当对图表整体的拖动结束时，拖动点初始的坐标和结束的坐标之间的位移即可确定，该位移可以以栅格的行列为单位进行表示，在一个示例中，假设拖动点向右移动了一个栅格，向上移动了一个栅格，则其位移可以表示为(1，1)；在另一个示例中，假设拖动点向左移动了一个栅格，向上移动了两个栅格，则其位移可以表示为(-1，2)。When the overall dragging of the chart ends, the displacement between the initial coordinates of the drag point and the end coordinates can be determined, and the displacement can be expressed in units of grid rows and columns. In an example, assuming that the drag point One grid is moved to the right and one grid is moved up, then its displacement can be expressed as (1, 1); in another example, suppose the drag point is moved one grid to the left and two grids up grid, its displacement can be expressed as (-1, 2).

针对一个图表所占据的栅格，可以用图表某一点(例如左上角顶点)的坐标以及图表的长宽来确定，这里的坐标和长宽的单位均以单个栅格为单位。在一个示例中，图表所占据的栅格可表示为(x，y；X，Y)，其中(x，y)为图表左上角的顶点的坐标，(X，Y)为图表的长和宽，例如，图表a占据的栅格表示为(0，0；1，1)，其中(0，0)为图表左上角的顶点的坐标，(1，1)为图表的长和宽。The grid occupied by a chart can be determined by the coordinates of a certain point on the chart (for example, the top left vertex) and the length and width of the chart, and the units of the coordinates and the length and width here are all in a single grid. In one example, the grid occupied by the graph can be expressed as (x, y; X, Y), where (x, y) is the coordinate of the vertex in the upper left corner of the graph, and (X, Y) is the length and width of the graph , for example, the grid occupied by graph a is expressed as (0, 0; 1, 1), where (0, 0) is the coordinate of the vertex in the upper left corner of the graph, and (1, 1) is the length and width of the graph.

那么在根据拖动操作前图表所占据的栅格以及所述位移，确定拖动操作后图表所占据的第二栅格的过程中，可以保持图表的长和宽不变，然后对图表的顶点的坐标进行移动即可。接上例，图表所占据的栅格可表示为(0，0；1，1)，在位移为(1，1)的情况下，将位移为(1，1)加到(0，0；1，1)中的(0，0)上，即可得到拖动操作后图表所占据的第二栅格为(1，1；1，1)。Then, in the process of determining the second grid occupied by the chart after the drag operation according to the grid occupied by the chart before the drag operation and the displacement, the length and width of the chart can be kept unchanged, and then the vertices of the chart The coordinates can be moved. Continuing from the previous example, the grid occupied by the chart can be expressed as (0, 0; 1, 1). In the case of a displacement of (1, 1), add the displacement of (1, 1) to (0, 0; 1, 1), the second grid occupied by the chart after the drag operation can be obtained as (1, 1; 1, 1).

在确定拖动操作后图表所占据的第二栅格后，即可将图表显示于所述第二栅格中，实现了对图表的移动。After the second grid occupied by the chart after the drag operation is determined, the chart can be displayed in the second grid, thereby realizing the movement of the chart.

在本公开实施例中，图表移动请求基于用户对所述图表整体的拖动操作触发，在移动的过程中，通过确定对图表整体的拖动操作所对应的位移；根据拖动操作前图表所占据的栅格以及位移，确定拖动操作后图表所占据的第二栅格；将图表显示于第二栅格中。由此，响应于用户对图表整体的拖动操作触发，对图表整体进行移动；这里移动可以包括但不限于相对于上一时刻的图表在图表显示区域的栅格，进行上下左右移动；如此，使得移动操作可满足不同用户的需求，且通过拖动操作触发，实现相对位移，能够实现通过对图表整体执行拖动操作来调整图表在栅格中的移动，用户操作便捷；这样，占用的处理资源较少，进而能够减少页面卡顿的情况，用户体验更好。In the embodiment of the present disclosure, the graph movement request is triggered based on the user's drag operation on the entire graph. During the moving process, the displacement corresponding to the drag operation on the entire graph is determined; Occupied grid and offset, determine the second grid occupied by the chart after the drag operation; display the chart in the second grid. Thus, in response to the user's triggering of the drag operation on the entire chart, the entire chart is moved; the movement here may include, but not limited to, the grid in the chart display area relative to the chart at the previous moment, moving up, down, left, and right; thus, The movement operation can meet the needs of different users, and the relative displacement can be realized by triggering the drag operation, and the movement of the chart in the grid can be adjusted by dragging the chart as a whole, and the user operation is convenient; in this way, the occupied processing There are fewer resources, which can reduce page freezes and provide better user experience.

这里图表的显示参数，包括图表显示时所占据的栅格，即图表的横向、纵向占据位置，图表显示时所占据的栅格，可以通过前文所述的图表某一点(例如左上角顶点)的坐标以及图表的长宽来表示，这里的坐标和长宽的单位均以单个栅格为单位。The display parameters of the chart here include the grid occupied by the chart when it is displayed, that is, the horizontal and vertical positions of the chart, and the grid occupied by the chart when it is displayed. The coordinates and the length and width of the chart are represented, and the units of coordinates and length and width here are all in a single grid unit.

在一个示例中，图表所占据的栅格可表示为(x，y；X，Y)，那么，在将图表的显示参数进行存储时，可以将图表所占据的栅格(x，y；X，Y)进行存储。In an example, the grid occupied by the chart can be expressed as (x, y; X, Y), then, when storing the display parameters of the chart, the grid occupied by the chart (x, y; X , Y) for storage.

在将图表的显示参数进行存储时，可以从用户的维度对显示参数进行存储，例如，针对各个用户，针对其图表的显示参数进行存储；或者，针对某一组用户，针对其图表的显示参数进行存储。由此，通过对图表的显示参数进行存储，可提高图表的显示参数的安全性的基础上，以便后续基于该存储的显示参数显示相关图表。When storing the display parameters of the chart, the display parameters can be stored from the user's dimension, for example, for each user, the display parameters of the chart are stored; or, for a certain group of users, the display parameters of the chart are stored to store. Therefore, by storing the display parameters of the charts, the security of the display parameters of the charts can be improved, so that related charts can be subsequently displayed based on the stored display parameters.

在将图表的显示参数进行存储后，当用户再次请求显示该图表时，可以先获取其存储的显示参数，然后将图表存储于显示参数所指示的栅格中。After storing the display parameters of the chart, when the user requests to display the chart again, the stored display parameters may be obtained first, and then the chart is stored in the grid indicated by the display parameters.

在一个示例中，针对单个用户，当其对图表的显示区域进行变更后，可以将图表的显示参数进行存储，然后当该用户再次请求显示图表时，获取存储的显示参数，并将图表存储于显示参数所指示的栅格中；在另一个示例中，针对某一组用户，当该组中的任一用户对图表的显示区域进行变更后，可以将图表的显示参数进行存储，然后当该组中的任一用户再次请求显示图表时，获取存储的显示参数，并将图表存储于显示参数所指示的栅格中。In an example, for a single user, after changing the display area of the chart, the display parameters of the chart can be stored, and then when the user requests to display the chart again, the stored display parameters can be obtained and the chart can be stored in In another example, for a certain group of users, when any user in the group changes the display area of the chart, the display parameters of the chart can be stored, and then when the When any user in the group requests to display the chart again, the stored display parameters are obtained, and the chart is stored in the grid indicated by the display parameters.

在本公开实施例中，通过将图表的显示参数进行存储，然后响应于用户对图表的显示请求，获取预先存储的显示参数；将图表显示于显示参数指示的栅格中。由此，基于预先存储的显示参数，对图表进行显示，能够实现和用户上一次更改的图表布局一致，无需重复更改图表的显示区域，便利性较高。In the embodiment of the present disclosure, by storing the display parameters of the chart, and then responding to the user's display request for the chart, the pre-stored display parameters are obtained; the chart is displayed in the grid indicated by the display parameters. Thus, based on the pre-stored display parameters, the graph can be displayed to be consistent with the graph layout changed by the user last time, and there is no need to repeatedly change the display area of the graph, which is more convenient.

下面对本公开实施例的一个应用场景进行说明。请参阅图2B，为本公开提供的一种可在图表显示区域显示的图表的示意图，后续基于获取到的显示区域变更请求，通过对行数所占栅格对应的图标205以及调整列数所占栅格对应的图标206进行拖动，以实现对该图表204的显示区域进行变更；例如：可变更为将图表204整体在两行四列或一行四列的栅格中进行显示，或在一行两列、一行一列的栅格中显示该图表204等。An application scenario of the embodiment of the present disclosure will be described below. Please refer to FIG. 2B , which is a schematic diagram of a chart that can be displayed in the chart display area provided by the present disclosure. Based on the acquired display area change request, the icon 205 corresponding to the grid occupied by the number of rows and the number of columns are adjusted. Drag the icon 206 corresponding to the grid to change the display area of the chart 204; for example, it can be changed to display the chart 204 as a whole in a grid with two rows and four columns or one row and four columns, or in The graph 204 and the like are displayed in a grid with two columns per row and one column per row.

参阅图3，是将图表显示区域划分为多个栅格，并同步将图2中所示的图表204整体进行显示，以得到图表301，即为本公开提供的一种在两行四列的栅格中显示的图表的示意图；这里同步将图标205变更为图标302，将图标206变更为图标303。Referring to FIG. 3, the chart display area is divided into multiple grids, and the chart 204 shown in FIG. Schematic diagram of a chart displayed in a grid; here the icon 205 is changed to icon 302 and the icon 206 is changed to icon 303 simultaneously.

如图4所示，为本公开提供的一种在一行四列的栅格中显示图表的示意图，这里可以是基于获取到的显示区域变更请求，通过对图标302和图标303进行拖动，将图表301整体在一行四列的栅格中进行显示，即缩小图表301的显示尺寸以得到图表401，并同步调整图标302为图标403以及调整图标303为图标402；同时为方便用户查看，此处提供两个图表表格进行纵向对比，即同时在图4中显示图表404，且图表404整体在一行四列的栅格中进行显示，其中图标404和图标406用于分别对图表404的行数和列数所占栅格进行调整。As shown in FIG. 4 , it is a schematic diagram of displaying charts in a grid with one row and four columns provided by the present disclosure. Here, based on the acquired display area change request, by dragging icon 302 and icon 303, the Chart 301 is displayed in a grid of one row and four columns as a whole, that is, the display size of chart 301 is reduced to obtain chart 401, and icon 302 is adjusted to icon 403 and icon 303 is adjusted to icon 402 synchronously; at the same time, for the convenience of users to view, here Two graph tables are provided for vertical comparison, that is, the graph 404 is displayed in FIG. The number of columns occupied by the grid is adjusted.

如图5所示，为本公开提供的一种在一行两列的栅格中显示图表的示意图；这里可以是将图4中分别在一行四列中显示的两个图表401和图表404，通过调整各自对应的行数和列数所占栅格，以得到在一行两列中分别显示的图表501和图表504；其中，调整图表401和图表404的过程中，对应的图标403、图标402、图标406以及图标405变更为图标503、图标502、图标506以及图标505。这样该图5中，通过一行四列平均划分为一行两列显示两个图表；可以对两个图表表格，即图表501和图表504进行横向对比，方便用户查看。As shown in FIG. 5 , a schematic diagram of displaying charts in a grid with one row and two columns is provided for the present disclosure; here, the two

charts

401 and 404 shown in FIG. 4 are respectively displayed in one row and four columns, through Adjust the grids occupied by the corresponding rows and columns to obtain the chart 501 and chart 504 respectively displayed in one row and two columns; wherein, in the process of adjusting the chart 401 and chart 404, the corresponding icon 403, icon 402, Icon 406 and icon 405 are changed to icon 503 , icon 502 , icon 506 , and icon 505 . In this way, in FIG. 5 , one row and four columns are evenly divided into one row and two columns to display two graphs; the two graph tables, ie, graph 501 and graph 504 , can be compared horizontally, which is convenient for users to view.

同时如图6所示，为本公开提供的一种在一行一列的栅格中显示图表的示意图。其中，图表601、602、603以及604分别显示在一行一列的栅格中，进而一行四列同步显示四个图表；该图6中，可以对四个表格进行横向对比，方便用户查看。At the same time, as shown in FIG. 6 , it is a schematic diagram of displaying charts in a grid with one row and one column provided by the present disclosure. Among them, charts 601, 602, 603 and 604 are displayed in a grid with one row and one column respectively, and four charts are displayed synchronously in one row and four columns; in FIG. 6, the four tables can be compared horizontally, which is convenient for users to view.

可以理解，本公开提及的上述各个方法实施例，在不违背原理逻辑的情况下，均可以彼此相互结合形成结合后的实施例。本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。It can be understood that the above-mentioned method embodiments mentioned in this disclosure can all be combined with each other to form a combined embodiment without violating the principle and logic. Those skilled in the art can understand that, in the above method in the specific implementation manner, the specific execution order of each step should be determined according to its function and possible internal logic.

此外，本公开还提供了图表显示装置、电子设备、计算机可读存储介质、程序，上述均可用来实现本公开提供的任一种图表显示方法，相应技术方案和描述和参见方法部分的相应记载。In addition, the present disclosure also provides chart display devices, electronic equipment, computer-readable storage media, and programs, all of which can be used to implement any chart display method provided in the present disclosure, corresponding technical solutions and descriptions, and corresponding records in the method section .

图7示出根据本公开实施例的图表显示装置的框图，如图7所示，所述装置70包括：FIG. 7 shows a block diagram of a graph display device according to an embodiment of the present disclosure. As shown in FIG. 7, the device 70 includes:

划分部分71，被配置为将数据可视化面板中的图表显示区域划分为多个栅格；The dividing part 71 is configured to divide the chart display area in the data visualization panel into a plurality of grids;

第一显示部分72，被配置为将图表显示于至少一个所述栅格中；a first display portion 72 configured to display a graph in at least one of said grids;

第二显示部分73，被配置为响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。The second display section 73 is configured to display the graph in a grid indicated by the change request in response to a display area change request for the graph.

在本公开的一些实施例中，所述显示区域变更请求包括图表显示尺寸变更请求，用于变更所述图表的尺寸；In some embodiments of the present disclosure, the display area change request includes a graph display size change request, which is used to change the size of the graph;

所述第二显示部分73，还被配置为根据所述图表显示尺寸变更请求所指示的第一栅格，将所述图表显示于所述第一栅格中。The second display part 73 is further configured to display the graph in the first grid according to the first grid indicated by the graph display size change request.

在本公开的一些实施例中，所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发；In some embodiments of the present disclosure, the chart display size change request is triggered based on a user's first drag operation on the border of the chart;

所述第二显示部分73，还被配置为确定所述第一拖动操作结束时拖动点的坐标；根据所述坐标，确定被拖动的边界在所述图表显示区域所占据的第一目标栅格；将所述第一目标栅格作为被拖动的边界所占据的栅格，对所述图表进行显示。The second display part 73 is also configured to determine the coordinates of the drag point when the first drag operation ends; and determine the first position occupied by the dragged border in the graph display area according to the coordinates. Target grid: displaying the graph by using the first target grid as the grid occupied by the dragged boundary.

在本公开的一些实施例中，所述显示区域变更请求包括图表移动请求，用于请求移动所述图表；In some embodiments of the present disclosure, the display area change request includes a chart movement request for requesting movement of the chart;

所述第二显示部分73，还被配置为根据所述图表移动请求所指示的第二栅格，将所述图表显示于所述第二栅格中。The second display part 73 is further configured to display the chart in the second grid according to the second grid indicated by the chart movement request.

在本公开的一些实施例中，所述图表移动请求基于用户对所述图表整体的第二拖动操作触发；In some embodiments of the present disclosure, the chart movement request is triggered based on a second drag operation of the user on the entire chart;

所述第二显示部分73，还被配置为确定对所述图表整体的拖动操作所对应的位移；根据所述第二拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移，确定所述第二拖动操作后所述图表所占据的所述第二栅格；将所述图表显示于所述第二栅格中。The second display part 73 is further configured to determine the displacement corresponding to the overall drag operation of the chart; according to the grid occupied by the chart in the chart display area before the second drag operation and the displacement, determining the second grid occupied by the chart after the second drag operation; displaying the chart in the second grid.

在本公开的一些实施例中，所述装置还包括：In some embodiments of the present disclosure, the device also includes:

存储部分，被配置为在将所述图表显示于所述变更请求指示的栅格中后，将所述图表的显示参数进行存储，所述显示参数用于指示所述图表显示时所占据的栅格。a storage section configured to, after displaying the graph in the grid indicated by the change request, store a display parameter of the graph, the display parameter being used to indicate the grid occupied when the graph is displayed; grid.

第三显示部分，被配置为在将所述图表的显示参数进行存储后，响应于用户对所述图表的显示请求，获取预先存储的所述显示参数；将所述图表显示于所述显示参数指示的栅格中。The third display part is configured to acquire the pre-stored display parameters in response to a user's display request for the chart after storing the display parameters of the chart; display the chart on the display parameters in the indicated grid.

在一些实施例中，本公开实施例提供的装置具有的功能或包含的部分可以用于执行上文方法实施例描述的方法，其具体实现可以参照上文方法实施例的描述，为了简洁，此处不再描述。In some embodiments, the functions or parts included in the device provided by the embodiments of the present disclosure can be used to execute the methods described in the method embodiments above, and its specific implementation can refer to the description of the method embodiments above. For brevity, here no longer described.

在本公开实施例以及其他的实施例中，“部分”可以是部分电路、部分处理器、部分程序或软件等等，当然也可以是单元，还可以是模块也可以是非模块化的。In the embodiments of the present disclosure and other embodiments, a "part" may be a part of a circuit, a part of a processor, a part of a program or software, etc., of course it may also be a unit, a module or a non-modular one.

本公开实施例还提出一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现上述任一实施例提供的图表显示方法。Embodiments of the present disclosure also provide a computer-readable storage medium, on which computer program instructions are stored, and when the computer program instructions are executed by a processor, the chart display method provided by any of the above-mentioned embodiments is implemented.

其中，计算机可读存储介质可以是易失性或非易失性计算机可读存储介质。Wherein, the computer-readable storage medium may be a volatile or non-volatile computer-readable storage medium.

本公开实施例还提出一种电子设备，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为调用所述存储器存储的指令，以执行上述任一实施例提供的图表显示方法。An embodiment of the present disclosure also proposes an electronic device, including: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to call the instructions stored in the memory to perform any of the above implementations Example provides a graph display method.

本公开实施例还提供了一种计算机程序产品，包括计算机可读代码，或者承载有计算机可读代码的非易失性计算机可读存储介质，当所述计算机可读代码在电子设备的处理器中运行时，所述电子设备中的处理器执行上述任一实施例提供的图表显示方法。An embodiment of the present disclosure also provides a computer program product, including computer-readable codes, or a non-volatile computer-readable storage medium carrying computer-readable codes, when the computer-readable codes are stored in a processor of an electronic device When running in the electronic device, the processor in the electronic device executes the chart display method provided in any one of the above embodiments.

本公开实施例还提供一种计算机程序，该计算机程序包括计算机可读代码，在该计算机可读代码在电子设备中运行的情况下，该电子设备的处理器执行上述任一实施例提供的图表显示方法。An embodiment of the present disclosure also provides a computer program, the computer program includes computer readable code, and when the computer readable code is run in an electronic device, the processor of the electronic device executes the chart provided by any of the above embodiments Show method.

电子设备可以被提供为终端、服务器或其它形态的设备。Electronic devices may be provided as terminals, servers, or other forms of devices.

图8示出根据本公开实施例提供的一种电子设备800的框图。例如，电子设备800可以是UE、移动设备、用户终端、终端、蜂窝电话、无绳电话、PDA、手持设备、计算设备、车载设备、可穿戴设备等终端设备。Fig. 8 shows a block diagram of an electronic device 800 provided according to an embodiment of the present disclosure. For example, the electronic device 800 may be a UE, a mobile device, a user terminal, a terminal, a cellular phone, a cordless phone, a PDA, a handheld device, a computing device, a vehicle device, a wearable device, and other terminal devices.

参照图8，电子设备800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(Input/Output，I/O)接口812，传感器组件814，以及通信组件816。8, electronic device 800 may include one or more of the following components: processing component 802, memory 804, power supply component 806, multimedia component 808, audio component 810, input/output (Input/Output, I/O) interface 812, sensor component 814, and communication component 816.

处理组件802通常控制电子设备800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。The processing component 802 generally controls the overall operations of the electronic device 800, such as those associated with display, telephone calls, data communications, camera operations, and recording operations. The processing component 802 may include one or more processors 820 to execute instructions to complete all or part of the steps of the above method. Additionally, processing component 802 may include one or more modules that facilitate interaction between processing component 802 and other components. For example, processing component 802 may include a multimedia module to facilitate interaction between multimedia component 808 and processing component 802 .

存储器804被配置为存储各种类型的数据以支持在电子设备800的操作。这些数据的示例包括用于在电子设备800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(Static Random Access Memory，SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read Only Memory，EEPROM)，可擦除可编程只读存储器(Electrical Programmable Read Only Memory，EPROM)，可编程只读存储器(Programmable Read Only Memory，PROM)，只读存储器(Read Only Memory，ROM)，磁存储器，快闪存储器，磁盘或光盘。The memory 804 is configured to store various types of data to support operations at the electronic device 800 . Examples of such data include instructions for any application or method operating on the electronic device 800, contact data, phonebook data, messages, pictures, videos, and the like. Memory 804 can be realized by any type of volatile or non-volatile storage device or their combination, such as Static Random Access Memory (Static Random Access Memory, SRAM), Electrically Erasable Programmable Read-Only Memory (Electrically Erasable Programmable Read Only Memory, EEPROM), Erasable Programmable Read Only Memory (Electrical Programmable Read Only Memory, EPROM), Programmable Read Only Memory (Programmable Read Only Memory, PROM), Read Only Memory (Read Only Memory, ROM) , magnetic memory, flash memory, magnetic disk or optical disk.

电源组件806为电子设备800的各种组件提供电力。电源组件806可以包括电源管理***，一个或多个电源，及其他与为电子设备800生成、管理和分配电力相关联的组件。The power supply component 806 provides power to various components of the electronic device 800 . Power components 806 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for electronic device 800 .

多媒体组件808包括在所述电子设备800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(Liquid Crystal Display，LCD)和触摸面板(Touch Panel，TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当电子设备800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜***或具有焦距和光学变焦能力。The multimedia component 808 includes a screen providing an output interface between the electronic device 800 and the user. In some embodiments, the screen may include a liquid crystal display (Liquid Crystal Display, LCD) and a touch panel (Touch Panel, TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from a user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensor may not only sense a boundary of a touch or swipe action, but also detect duration and pressure associated with the touch or swipe action. In some embodiments, the multimedia component 808 includes a front camera and/or a rear camera. When the electronic device 800 is in an operation mode, such as a shooting mode or a video mode, the front camera and/or the rear camera can receive external multimedia data. Each front camera and rear camera can be a fixed optical lens system or have focal length and optical zoom capability.

音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(Microphone，MIC)，当电子设备800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。The audio component 810 is configured to output and/or input audio signals. For example, the audio component 810 includes a microphone (Microphone, MIC), and when the electronic device 800 is in an operation mode, such as a calling mode, a recording mode and a voice recognition mode, the microphone is configured to receive an external audio signal. Received audio signals may be further stored in memory 804 or sent via communication component 816 . In some embodiments, the audio component 810 also includes a speaker for outputting audio signals.

I/O接口812为处理组件802和***接口模块之间提供接口，上述***接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。The I/O interface 812 provides an interface between the processing component 802 and a peripheral interface module, which may be a keyboard, a click wheel, a button, and the like. These buttons may include, but are not limited to: a home button, volume buttons, start button, and lock button.

传感器组件814包括一个或多个传感器，用于为电子设备800提供各个方面的状态评估。例如，传感器组件814可以检测到电子设备800的打开/关闭状态，组件的相对定位，例如所述组件为电子设备800的显示器和小键盘，传感器组件814还可以检测电子设备800或电子设备800一个组件的位置改变，用户与电子设备800接触的存在或不存在，电子设备800方位或加速/减速和电子设备800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如互补金属氧化物半导体(Complementary Metal Oxide Semiconductor，CMOS)或电荷耦合装置(Charge-coupled Device，CCD)图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。Sensor assembly 814 includes one or more sensors for providing status assessments of various aspects of electronic device 800 . For example, the sensor component 814 can detect the open/closed state of the electronic device 800, the relative positioning of components, such as the display and the keypad of the electronic device 800, the sensor component 814 can also detect the electronic device 800 or a Changes in position of components, presence or absence of user contact with electronic device 800 , electronic device 800 orientation or acceleration/deceleration and temperature changes in electronic device 800 . Sensor assembly 814 may include a proximity sensor configured to detect the presence of nearby objects in the absence of any physical contact. The sensor assembly 814 may also include an optical sensor, such as a Complementary Metal Oxide Semiconductor (CMOS) or Charge-coupled Device (CCD) image sensor, for use in imaging applications. In some embodiments, the sensor component 814 may also include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor or a temperature sensor.

通信组件816被配置为便于电子设备800和其他设备之间有线或无线方式的通信。电子设备800可以接入基于通信标准的无线网络，如无线网络(Wi-Fi)、第二代移动通信技术(2-Generation wireless telephone technology，2G)、第三代移动通信技术(3rd-Generation，3G)、***移动通信技术(The 4th generation mobile communication technology，4G)、通用移动通信技术的长期演进(Long Term Evolution，LTE)、第五代移动通信技术(5th Generation Mobile Communication Technology，5G)或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理***的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(Near Field Communication，NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(Radio Frequency Identification，RFID)技术，红外数据协会(Infrared Data Association，IrDA)技术，超宽带(Ultra Wide Band，UWB)技术，蓝牙(Bluetooth，BT)技术和其他技术来实现。The communication component 816 is configured to facilitate wired or wireless communication between the electronic device 800 and other devices. The electronic device 800 can access a wireless network based on a communication standard, such as a wireless network (Wi-Fi), a second-generation mobile communication technology (2-Generation wireless telephone technology, 2G), a third-generation mobile communication technology (3rd-Generation, 3G), the fourth generation mobile communication technology (The 4th generation mobile communication technology, 4G), the long-term evolution of general mobile communication technology (Long Term Evolution, LTE), the fifth generation mobile communication technology (5th Generation Mobile Communication Technology, 5G) or a combination of them. In an exemplary embodiment, the communication component 816 receives broadcast signals or broadcast related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 816 also includes a Near Field Communication (NFC) module to facilitate short-range communication. For example, the NFC module can be based on Radio Frequency Identification (RFID) technology, Infrared Data Association (Infrared Data Association, IrDA) technology, Ultra Wide Band (UWB) technology, Bluetooth (Bluetooth, BT) technology and other technology to achieve.

在示例性实施例中，电子设备800可以被一个或多个应用专用集成电路(Application Specific Integrated Circuit，ASIC)、数字信号处理器(Digital Signal Process，DSP)、数字信号处理设备(Digital Signal Process Device，DSPD)、可编程逻辑器件(Programmable Logic Device，PLD)、现场可编程门阵列(Field Programmable Gate Array，FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。In an exemplary embodiment, the electronic device 800 may be implemented by one or more Application Specific Integrated Circuits (Application Specific Integrated Circuit, ASIC), Digital Signal Processor (Digital Signal Process, DSP), Digital Signal Processing Device (Digital Signal Process Device , DSPD), Programmable Logic Device (Programmable Logic Device, PLD), Field Programmable Gate Array (Field Programmable Gate Array, FPGA), controller, microcontroller, microprocessor or other electronic components to implement the above method.

在示例性实施例中，还提供了一种非易失性计算机可读存储介质，例如包括计算机程序指令的存储器804，上述计算机程序指令可由电子设备800的处理器820执行以完成上述方法。In an exemplary embodiment, there is also provided a non-volatile computer-readable storage medium, such as the memory 804 including computer program instructions, which can be executed by the processor 820 of the electronic device 800 to implement the above method.

图9示出根据本公开实施例提供的一种电子设备1900的框图。例如，电子设备1900可以被提供为一服务器。参照图9，电子设备1900包括处理组件1922，其进一步包括一个或多个处理器，以及由存储器1932所代表的存储器资源，用于存储可由处理组件1922的执行的指令，例如应用程序。存储器1932中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件1922被配置为执行指令，以执行上述任一实施例提供的图表显示方法。Fig. 9 shows a block diagram of an electronic device 1900 provided according to an embodiment of the present disclosure. For example, electronic device 1900 may be provided as a server. Referring to FIG. 9 , electronic device 1900 includes processing component 1922 , which further includes one or more processors, and a memory resource represented by memory 1932 for storing instructions executable by processing component 1922 , such as application programs. The application programs stored in memory 1932 may include one or more modules each corresponding to a set of instructions. In addition, the processing component 1922 is configured to execute instructions, so as to execute the chart display method provided by any one of the above embodiments.

电子设备1900还可以包括一个电源组件1926被配置为执行电子设备1900的电源管理，一个有线或无线网络接口1950被配置为将电子设备1900连接到网络，和I/O接口1958。电子设备1900可以操作基于存储在存储器1932的操作***，例如微软服务器操作***(Windows Server ^TM)，苹果公司推出的基于图形用户界面操作***(Mac OS X ^TM)，多用户多进程的计算机操作***(Unix ^TM)，自由和开放原代码的类Unix操作***(Linux ^TM)，开放原代码的类Unix操作***(FreeBSD ^TM)或类似。 Electronic device 1900 may also include a power component 1926 configured to perform power management of electronic device 1900 , a wired or wireless network interface 1950 configured to connect electronic device 1900 to a network, and I/O interface 1958 . The electronic device 1900 can operate based on the operating system stored in the memory 1932, such as the Microsoft server operating system (Windows Server ^TM ), the graphical user interface-based operating system (Mac OS X ^TM ) introduced by Apple Inc., and the multi-user and multi-process computer operating system (Unix ^™ ), a free and open source Unix-like operating system (Linux ^™ ), an open source Unix-like operating system (FreeBSD ^™ ), or the like.

在示例性实施例中，还提供了一种非易失性计算机可读存储介质，例如包括计算机程序指令的存储器1932，上述计算机程序指令可由电子设备1900的处理组件1922执行以完成上述方法。In an exemplary embodiment, there is also provided a non-transitory computer-readable storage medium, such as the memory 1932 including computer program instructions, which can be executed by the processing component 1922 of the electronic device 1900 to implement the above method.

本公开可以是***、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于使处理器实现本公开的各个方面的计算机可读程序指令。The present disclosure can be a system, method and/or computer program product. A computer program product may include a computer readable storage medium having computer readable program instructions thereon for causing a processor to implement various aspects of the present disclosure.

计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是(但不限于)电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：便携式计算机盘、硬盘、随机存取存储器(Random Access Memory，RAM)、ROM、EPROM或闪存、SRAM、便携式压缩盘只读存储器(Compact Disc-ReadOnly Memory，CD-ROM)、数字多功能盘(Digital Video Disc，DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如，通过光纤电缆的光脉冲)、或者通过电线传输的电信号。A computer readable storage medium may be a tangible device that can retain and store instructions for use by an instruction execution device. A computer readable storage medium may be, for example, but is not limited to, an electrical storage device, a magnetic storage device, an optical storage device, an electromagnetic storage device, a semiconductor storage device, or any suitable combination of the foregoing. More specific examples (non-exhaustive list) of computer-readable storage media include: portable computer disk, hard disk, Random Access Memory (RAM), ROM, EPROM or flash memory, SRAM, portable compact disk read-only Compact Disc-ReadOnly Memory (CD-ROM), Digital Video Disc (DVD), memory sticks, floppy disks, mechanically encoded devices such as punched cards or raised in grooves on which instructions are stored structure, and any suitable combination of the above. As used herein, computer-readable storage media are not to be construed as transient signals per se, such as radio waves or other freely propagating electromagnetic waves, electromagnetic waves propagating through waveguides or other transmission media (e.g., pulses of light through fiber optic cables), or transmitted electrical signals.

这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。Computer-readable program instructions described herein may be downloaded from a computer-readable storage medium to a respective computing/processing device, or downloaded to an external computer or external storage device over a network, such as the Internet, a local area network, a wide area network, and/or a wireless network. The network may include copper transmission cables, fiber optic transmission, wireless transmission, routers, firewalls, switches, gateway computers, and/or edge servers. A network adapter card or a network interface in each computing/processing device receives computer-readable program instructions from the network and forwards the computer-readable program instructions for storage in a computer-readable storage medium in each computing/processing device .

用于执行本公开操作的计算机程序指令可以是汇编指令、指令集架构(Instruction Set Architecture，ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码，所述编程语言包括面向对象的编程语言，诸如Smalltalk、C++等，以及常规的过程式编程语言，诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络，包括局域网(Local Area Network，LAN)或广域网(Wide Area Network，WAN)连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中，通过利用计算机可读程序指令的状态信息来个性化定制电子电路，例如可编程逻辑电路、FPGA或可编程逻辑阵列(Programmable Logic Arrays，PLA)，该电子电路可以执行计算机可读程序指令，从而实现本公开的各个方面。Computer program instructions for performing the operations of the present disclosure may be assembly instructions, Instruction Set Architecture (ISA) instructions, machine instructions, machine-dependent instructions, microcode, firmware instructions, state setting data, or in the form of one or more source or object code written in any combination of programming languages, including object-oriented programming languages, such as Smalltalk, C++, etc., and conventional procedural programming languages, such as the "C" language or similar programming languages. Computer readable program instructions may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer, or entirely on the remote computer or server implement. In cases involving a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or it may be connected to an external computer (for example, using Internet Service Provider to connect via the Internet). In some embodiments, electronic circuits, such as programmable logic circuits, FPGAs, or programmable logic arrays (Programmable Logic Arrays, PLAs), can be customized by using state information of computer-readable program instructions, which can execute computer-readable Read program instructions, thereby implementing various aspects of the present disclosure.

这里参照根据本公开实施例的方法、装置(***)和计算机程序产品的流程图和/或框图描述了本公开的各个方面。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机可读程序指令实现。Aspects of the present disclosure are described herein with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the disclosure. It should be understood that each block of the flowcharts and/or block diagrams, and combinations of blocks in the flowcharts and/or block diagrams, can be implemented by computer-readable program instructions.

这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中，这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作，从而，存储有指令的计算机可读介质则包括一个制造品，其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。These computer-readable program instructions may be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine such that when executed by the processor of the computer or other programmable data processing apparatus , producing an apparatus for realizing the functions/actions specified in one or more blocks in the flowchart and/or block diagram. These computer-readable program instructions can also be stored in a computer-readable storage medium, and these instructions cause computers, programmable data processing devices and/or other devices to work in a specific way, so that the computer-readable medium storing instructions includes An article of manufacture comprising instructions for implementing various aspects of the functions/acts specified in one or more blocks in flowcharts and/or block diagrams.

也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。It is also possible to load computer-readable program instructions into a computer, other programmable data processing device, or other equipment, so that a series of operational steps are performed on the computer, other programmable data processing device, or other equipment to produce a computer-implemented process , so that instructions executed on computers, other programmable data processing devices, or other devices implement the functions/actions specified in one or more blocks in the flowcharts and/or block diagrams.

附图中的流程图和框图显示了根据本公开的多个实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分，所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in a flowchart or block diagram may represent a module, a portion of a program segment, or an instruction that includes one or more Executable instructions. In some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks in succession may, in fact, be executed substantially concurrently, or they may sometimes be executed in the reverse order, depending upon the functionality involved. It should also be noted that each block of the block diagrams and/or flowchart illustrations, and combinations of blocks in the block diagrams and/or flowchart illustrations, can be implemented by a dedicated hardware-based system that performs the specified function or action , or may be implemented by a combination of dedicated hardware and computer instructions.

该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。The computer program product can be specifically realized by means of hardware, software or a combination thereof. In an optional embodiment, the computer program product is embodied as a computer storage medium, and in another optional embodiment, the computer program product is embodied as a software product, such as a software development kit (Software Development Kit, SDK) etc. wait.

以上已经描述了本公开的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。Having described various embodiments of the present disclosure above, the foregoing description is exemplary, not exhaustive, and is not limited to the disclosed embodiments. Many modifications and alterations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments. The terminology used herein is chosen to best explain the principle of each embodiment, practical application or improvement of technology in the market, or to enable other ordinary skilled in the art to understand each embodiment disclosed herein.

工业实用性Industrial Applicability

本公开实施例涉及一种图表显示方法、装置、电子设备、存储介质及程序；其中，所述方法应用于网页端，所述方法包括：将数据可视化面板中的图表显示区域划分为多个栅格；将图表显示于至少一个所述栅格中；响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。本公开实施例能够实现对网页端的图表显示区域的变更，用户体验更好。Embodiments of the present disclosure relate to a graph display method, device, electronic equipment, storage medium, and program; wherein, the method is applied to a web page, and the method includes: dividing the graph display area in the data visualization panel into multiple grids displaying the chart in at least one of the grids; in response to a display area change request for the chart, displaying the chart in the grid indicated by the change request. The embodiment of the present disclosure can realize the change of the chart display area on the web page, and the user experience is better.

Claims

一种图表显示方法，应用于网页端，包括：A graph display method applied to a web page, including:

将数据可视化面板中的图表显示区域划分为多个栅格；Divide the chart display area in the data visualization panel into multiple grids;

将图表显示于至少一个所述栅格中；displaying a graph in at least one of said grids;

响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。In response to a display area change request for the graph, the graph is displayed in a grid indicated by the change request.
根据权利要求1所述的方法，其中，所述显示区域变更请求包括图表显示尺寸变更请求，用于变更所述图表的尺寸；The method according to claim 1, wherein the display area change request comprises a graph display size change request for changing the size of the graph;

所述将所述图表显示于所述变更请求指示的栅格中，包括：Said displaying said diagram in a grid indicated by said change request includes:

根据所述图表显示尺寸变更请求所指示的第一栅格，将所述图表显示于所述第一栅格中。The chart is displayed on the first grid according to the first grid indicated by the chart display size change request.
根据权利要求2所述的方法，其中，所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发；The method according to claim 2, wherein the chart display size change request is triggered based on a user's first drag operation on the border of the chart;

所述将所述图表显示于所述变更请求指示的栅格中，包括：Said displaying said diagram in a grid indicated by said change request includes:

确定所述第一拖动操作结束时拖动点的坐标；determining the coordinates of the drag point at the end of the first drag operation;

根据所述坐标，确定被拖动的边界在所述图表显示区域所占据的第一目标栅格；According to the coordinates, determine the first target grid occupied by the dragged boundary in the chart display area;

将所述第一目标栅格作为被拖动的边界所占据的栅格，对所述图表进行显示。The chart is displayed using the first target grid as a grid occupied by the dragged boundary.
根据权利要求1所述的方法，其中，所述显示区域变更请求包括图表移动请求，用于请求移动所述图表；The method according to claim 1, wherein the display area change request comprises a diagram movement request for requesting movement of the diagram;

所述将所述图表显示于所述变更请求指示的栅格中，包括：Said displaying said diagram in a grid indicated by said change request includes:

根据所述图表移动请求所指示的第二栅格，将所述图表显示于所述第二栅格中。The chart is displayed in the second grid according to the second grid indicated by the chart movement request.
根据权利要求4所述的方法，其中，所述图表移动请求基于用户对所述图表整体的第二拖动操作触发；The method according to claim 4, wherein the graph movement request is triggered based on a user's second drag operation on the entire graph;

所述将所述图表显示于所述变更请求指示的栅格中，包括：Said displaying said diagram in a grid indicated by said change request includes:

确定对所述图表整体的第二拖动操作所对应的位移；determining a displacement corresponding to the second drag operation on the whole chart;

根据所述第二拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移，确定所述第二拖动操作后所述图表所占据的所述第二栅格；determining the second grid occupied by the chart after the second drag operation according to the grid occupied by the chart in the chart display area before the second drag operation and the displacement;

将所述图表显示于所述第二栅格中。The graph is displayed in the second grid.
根据权利要求1所述的方法，其中，在将所述图表显示于所述变更请求指示的栅格中后，所述方法还包括：The method of claim 1, wherein after displaying the diagram in the grid indicated by the change request, the method further comprises:

将所述图表的显示参数进行存储，所述显示参数用于指示所述图表显示时所占据的栅格。The display parameter of the chart is stored, and the display parameter is used to indicate the grid occupied by the chart when displayed.
根据权利要求6所述的方法，其中，在将所述图表的显示参数进行存储后，所述方法还包括：The method according to claim 6, wherein, after storing the display parameters of the chart, the method further comprises:

响应于用户对所述图表的显示请求，获取预先存储的所述显示参数；Acquiring the pre-stored display parameters in response to a user's display request for the chart;

将所述图表显示于所述显示参数指示的栅格中。The graph is displayed in a grid indicated by the display parameters.
一种图表显示装置，包括：A graphic display device comprising:

划分部分，被配置为将数据可视化面板中的图表显示区域划分为多个栅格；a division part configured to divide the chart display area in the data visualization panel into multiple grids;

第一显示部分，被配置为将图表显示于至少一个所述栅格中；a first display portion configured to display graphs in at least one of said grids;

第二显示部分，被配置为响应于针对所述图表的显示区域变更请求，将所述图表显示于所述变更请求指示的栅格中。A second display section configured to display the graph in a grid indicated by the change request in response to a display area change request for the graph.
根据权利要求8所述的装置，其中，所述显示区域变更请求包括图表显示尺寸变更请求，用于变更所述图表的尺寸；The device according to claim 8, wherein the display area change request comprises a graph display size change request for changing the size of the graph;

所述第二显示部分，还被配置为根据所述图表显示尺寸变更请求所指示的第一栅格，将所述图表显示于所述第一栅格中。The second display part is further configured to display the graph in the first grid according to the first grid indicated by the graph display size change request.
根据权利要求9所述的装置，其中，所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发；The device according to claim 9, wherein the chart display size change request is triggered based on a user's first drag operation on the boundary of the chart;

所述第二显示部分，还被配置为确定所述第一拖动操作结束时拖动点的坐标；确定被拖动的边界在所述图表显示区域所占据的第一目标栅格；将所述第一目标栅格作为被拖动的边界所占据的栅格，对所述图表进行显示。The second display part is further configured to determine the coordinates of the drag point when the first drag operation ends; determine the first target grid occupied by the dragged boundary in the chart display area; The chart is displayed using the first target grid as a grid occupied by the dragged boundary.
根据权利要求8所述的装置，其中，所述显示区域变更请求包括图表移动请求，用于请求移动所述图表；The device according to claim 8, wherein the display area change request comprises a diagram movement request for requesting movement of the diagram;

所述第二显示部分，还被配置为根据所述图表移动请求所指示的第二栅格，将所述图表显示于所述第二栅格中。The second display part is further configured to display the chart in the second grid according to the second grid indicated by the chart movement request.
根据权利要求11所述的装置，其中，所述图表移动请求基于用户对所述图表整体的第二拖动操作触发；The device according to claim 11, wherein the graph movement request is triggered based on a user's second drag operation on the entire graph;

所述第二显示部分，还被配置为确定对所述图表整体的第二拖动操作所对应的位移；根据所述第二拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移，确定所述第二拖动操作后所述图表所占据的所述第二栅格；将所述图表显示于所述第二栅格中。The second display part is further configured to determine the displacement corresponding to the second drag operation on the entire chart; according to the grid occupied by the chart in the chart display area before the second drag operation grid and the displacement, determining the second grid occupied by the chart after the second drag operation; displaying the chart in the second grid.
根据权利要求8所述的装置，其中，所述装置还包括：The device according to claim 8, wherein the device further comprises:

存储部分，被配置为在将所述图表显示于所述变更请求指示的栅格中后，将所述图表的显示参数进行存储，所述显示参数用于指示所述图表显示时所占据的栅格。a storage section configured to, after displaying the graph in the grid indicated by the change request, store a display parameter of the graph, the display parameter being used to indicate the grid occupied when the graph is displayed; grid.
根据权利要求13所述的装置，其中，所述装置还包括：The device according to claim 13, wherein the device further comprises:

第三显示部分，被配置为在将所述图表的显示参数进行存储后，响应于用户对所述图表的显示请求，获取预先存储的所述显示参数；将所述图表显示于所述显示参数指示的栅格中。The third display part is configured to acquire the pre-stored display parameters in response to a user's display request for the chart after storing the display parameters of the chart; display the chart on the display parameters in the indicated grid.
一种电子设备，包括：An electronic device comprising:

处理器；processor;

用于存储处理器可执行指令的存储器；memory for storing processor-executable instructions;

其中，所述处理器被配置为调用所述存储器存储的指令，以执行权利要求1至7中任意一项所述的图表显示方法。Wherein, the processor is configured to call the instructions stored in the memory to execute the chart display method according to any one of claims 1-7.
一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现权利要求1至7中任意一项所述的图表显示方法。A computer-readable storage medium, on which computer program instructions are stored, and when the computer program instructions are executed by a processor, the graphic display method according to any one of claims 1 to 7 is realized.
一种计算机程序产品，所述计算机程序产品包括计算机程序或指令，在所述计算机程序或指令在电子设备上运行的情况下，使得所述电子设备执行如权利要求1至7中任意一项所述的图表显示方法。A computer program product, the computer program product comprising a computer program or instruction, when the computer program or instruction is run on an electronic device, the electronic device is made to execute the electronic device according to any one of claims 1 to 7 The graph display method described above.