WO2023097998A1 - 图表显示方法、装置、电子设备、存储介质及程序 - Google Patents
图表显示方法、装置、电子设备、存储介质及程序 Download PDFInfo
- Publication number
- WO2023097998A1 WO2023097998A1 PCT/CN2022/095559 CN2022095559W WO2023097998A1 WO 2023097998 A1 WO2023097998 A1 WO 2023097998A1 CN 2022095559 W CN2022095559 W CN 2022095559W WO 2023097998 A1 WO2023097998 A1 WO 2023097998A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- chart
- display
- grid
- graph
- change request
- Prior art date
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
Definitions
- 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.
- 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.
- 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.
- 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.
- 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:
- the graph In response to a display area change request for the graph, the graph is displayed in a grid indicated by the change request.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Fig. 1 shows a flow chart of a graph display method according to an embodiment of the present disclosure.
- 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.
- 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.
- 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.
- 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.
- 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.
- Fig. 6 shows a schematic diagram of displaying charts in a row-by-column grid according to an embodiment of the present disclosure.
- Fig. 7 shows a block diagram of a chart display device provided according to an embodiment of the present disclosure.
- Fig. 8 shows a block diagram of an electronic device 900 provided according to an embodiment of the present disclosure.
- Fig. 9 shows a block diagram of an electronic device 1900 provided according to an embodiment of the present disclosure.
- 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.
- 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.
- B/S Browser/Server Architecture
- 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.
- 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:
- step S11 the chart display area in the data visualization panel is divided into multiple grids.
- the data visualization panel is an interface for visual display of data.
- 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.
- the chart display area it can be divided into multiple grids, and the size of the grids can be the same.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 .
- 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
- 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.
- 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 .
- 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.
- the acquisition terminal 201 can communicate with the visual processing device through a wired connection, such as performing data communication through a bus;
- 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.
- the display terminal 203 may be a processing device with a display function.
- 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 .
- 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.
- 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.
- 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;
- 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.
- 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.
- 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.
- the drag operation can be regarded as the end.
- 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.
- 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.
- the chart display size change request is triggered based on the user's first drag operation on the border of the chart.
- 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.
- 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 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 .
- the dragging ends when the dragging ends, it can be regarded as the end of the dragging operation.
- 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.
- 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.
- the displacement can be expressed in units of grid rows and columns.
- 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).
- 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.
- 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
- 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.
- the length and width of the chart can be kept unchanged, and then the vertices of the chart The coordinates can be moved.
- the grid occupied by the chart can be expressed as (0, 0; 1, 1).
- the second grid occupied by the chart after the drag operation can be obtained as (1, 1; 1, 1).
- the chart 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.
- the graph movement request is triggered based on the user's drag operation on the entire graph.
- 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.
- 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 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.
- 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.
- 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.
- 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.
- 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.
- the stored display parameters may be obtained first, and then the chart is stored in the grid indicated by the display parameters.
- 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
- 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.
- the pre-stored display parameters are obtained; the chart is displayed in the grid indicated by the 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.
- FIG. 2B is a schematic diagram of a chart that can be displayed in the chart display area provided by the present disclosure.
- 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.
- 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.
- FIG. 4 it is a schematic diagram of displaying charts in a grid with one row and four columns provided by the present disclosure.
- 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.
- 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 .
- 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.
- FIG. 6 it is a schematic diagram of displaying charts in a grid with one row and one column provided by the present disclosure.
- 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.
- 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 .
- 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:
- the dividing part 71 is configured to divide the chart display area in the data visualization panel into a plurality of grids
- a first display portion 72 configured to display a graph in at least one of said grids
- 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.
- the display area change request includes a graph display size change request, which is used to change the size of the graph;
- 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.
- the chart display size change request is triggered based on a user's first drag operation on the border of the chart
- 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.
- the display area change request includes a chart movement request for requesting movement of the chart
- 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.
- the chart movement request is triggered based on a second drag operation of the user on the entire chart
- 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.
- 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 device also includes:
- 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.
- 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.
- 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.
- 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.
- Fig. 8 shows a block diagram of an electronic device 800 provided according to an embodiment of the present disclosure.
- 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.
- 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.
- 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 .
- 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.
- Static Random Access Memory Static Random Access Memory
- SRAM Static Random Access Memory
- EEPROM Electrically Erasable Programmable Read-Only Memory
- EPROM Electrically Erasable Programmable Read Only Memory
- PROM Programmable
- 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 .
- the multimedia component 808 includes a screen providing an output interface between the electronic device 800 and the user.
- 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.
- 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.
- the audio component 810 is configured to output and/or input audio signals.
- 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 .
- the audio component 810 also includes a speaker for outputting audio signals.
- 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.
- Sensor assembly 814 includes one or more sensors for providing status assessments of various aspects of electronic device 800 .
- 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.
- CMOS Complementary Metal Oxide Semiconductor
- CCD Charge-coupled Device
- the sensor component 814 may also include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor or a temperature sensor.
- 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.
- the communication component 816 receives broadcast signals or broadcast related information from an external broadcast management system via a broadcast channel.
- the communication component 816 also includes a Near Field Communication (NFC) module to facilitate short-range communication.
- NFC Near Field Communication
- 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.
- RFID Radio Frequency Identification
- IrDA Infrared Data Association
- UWB Ultra Wide Band
- Bluetooth Bluetooth
- 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.
- ASIC Application Specific Integrated Circuits
- DSP Digital Signal Process
- DSPD Digital Signal Processing Device
- PLD Programmable Logic Device
- Field Programmable Gate Array Field Programmable Gate Array
- FPGA Field Programmable Gate Array
- 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.
- Fig. 9 shows a block diagram of an electronic device 1900 provided according to an embodiment of the present disclosure.
- electronic device 1900 may be provided as a server.
- 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.
- 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.
- 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 TM ), a free and open source Unix-like operating system (Linux TM ), an open source Unix-like operating system (FreeBSD TM ), or the like.
- Microsoft server operating system Windows Server TM
- Mac OS X TM graphical user interface-based operating system
- Unix TM multi-user and multi-process computer operating system
- Linux TM free and open source Unix-like operating system
- FreeBSD TM open source Unix-like operating system
- 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.
- 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.
- 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 .
- 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.
- 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).
- LAN Local Area Network
- WAN Wide Area Network
- 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.
- 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.
- 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.
- 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.
- 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.
- the computer program product can be specifically realized by means of hardware, software or a combination thereof.
- 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.
- a software development kit Software Development Kit, SDK
- 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.
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开实施例提供了一种图表显示方法、装置、电子设备、存储介质及程序;其中,所述方法应用于网页端,所述方法包括:将数据可视化面板中的图表显示区域划分为多个栅格;将图表显示于至少一个所述栅格中;响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。本公开实施例能够实现对网页端的图表显示区域的变更,用户体验更好。
Description
相关申请的交叉引用
本公开要求2021年11月30日提交的中国专利申请号为202111446442.5、申请人为上海商汤科技开发有限公司,申请名称为“图表显示方法及装置、电子设备和存储介质”的优先权,该申请的全文以引用的方式并入本公开中。
本公开涉及但不限于计算机技术领域,尤其涉及一种图表显示方法、装置、电子设备、存储介质及程序。
数据可视化技术是关于数据视觉表现形式的技术,允许利用图形、图像处理、计算机视觉以及用户界面,对数据进行可视化显示。在实际应用中,可以将数据保存在服务器端,客户端将统计的数据通过浏览器网页以可视化图表的形式显示出来,例如通过折线图、饼状图等形式显示出来。
在相关技术中,通过浏览器网页形式显示的可视化图表,通常无法支持用户观察一些数据细节或将多个图表对比查看,用户体验较差。
发明内容
本公开实施例提出了一种图表显示技术方案。
本公开实施例提供了一种图表显示方法,应用于网页端,包括:
将数据可视化面板中的图表显示区域划分为多个栅格;
将图表显示于至少一个所述栅格中;
响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。
由此,通过调整图表所在的栅格,能够实现对图表显示区域的变更的基础上,基于栅格动态调整图表在图表显示区域的显示尺寸或显示位置等;这样,可以支持相关操作用户对图表内显示的一些数据细节进行观看,以便提高用户体验;且响应于相关变更请求,无需第三方插件,可通过浏览器网页自带元素响应于不同需求,来实现图表在图表显示区域内对应的栅格;这样,占用的处理资源较少,进而能够减少页面卡顿的情况,使得用户体验更好。
在本公开的一些实施例中,所述显示区域变更请求包括图表显示尺寸变更请求,用于变更所述图表的尺寸;所述将所述图表显示于所述变更请求指示的栅格中,包括:根据所述图表显示尺寸变更请求所指示的第一栅格,将所述图表显示于所述第一栅格中。
在本公开的一些实施例中,所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发;所述将所述图表显示于所述变更请求指示的栅格中,包括:确定所述第一拖动操作结束时拖动点的坐标;根据所述坐标,确定被拖动的边界在所述图表显示区域所占据的第一目标栅格;将所述第一目标栅格作为被拖动的边界所占据的栅格,对所述图表进行显示。
在本公开的一些实施例中,所述显示区域变更请求包括图表移动请求,用于请求移动所述图表;所述将所述图表显示于所述变更请求指示的栅格中,包括:根据所述图表移动请求所指示的第二栅格,将所述图表显示于所述第二栅格中。
在本公开的一些实施例中,所述图表移动请求基于用户对所述图表整体的第二拖动操作触发;所述将所述图表显示于所述变更请求指示的栅格中,包括:确定对所述图表整体的第二拖动操作所对应的位移;根据所述第二拖动操作前图表在所述图表显示区域所占据的栅格以及所述位移,确定所述第二拖动操作后所述图表所占据的所述第二栅格;将所述图表显示于所述第二栅格中。
在本公开的一些实施例中,在将所述图表显示于所述变更请求指示的栅格中后,所述方法还包括:将所述图表的显示参数进行存储,所述显示参数用于指示所述图表显示时所占据的栅格。
在本公开的一些实施例中,在将所述图表的显示参数进行存储后,所述方法还包括:响应于用户对所述图表的显示请求,获取预先存储的所述显示参数;将所述图表显示于所述显示参数指示的栅格中。
以下装置、电子设备等的效果描述参见上述图表显示方法的说明。
本公开实施例提供了一种图表显示装置,包括:
划分部分,被配置为将数据可视化面板中的图表显示区域划分为多个栅格;
第一显示部分,被配置为将图表显示于至少一个所述栅格中;
第二显示部分,被配置为响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。
在本公开的一些实施例中,所述显示区域变更请求包括图表显示尺寸变更请求,用于变更所述图表的尺寸;所述第二显示部分,还被配置为根据所述图表显示尺寸变更请求所指示的第一栅格,将所述图表显示于所述第一栅格中。
在本公开的一些实施例中,所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发;所述第二显示部分,还被配置为确定所述第一拖动操作结束时拖动点的坐标;根据所述坐标,确定被拖动的边界在所述图表显示区域所占据的第一目标栅格;将所述第一目标栅格作为被拖动的边界所占据的栅格,对所述图表进行显示。
在本公开的一些实施例中,所述显示区域变更请求包括图表移动请求,用于请求移动所述图表;所述第二显示部分,还被配置为根据所述图表移动请求所指示的第二栅格,将所述图表显示于所述第二栅格中。
在本公开的一些实施例中,所述图表移动请求基于用户对所述图表整体的第二拖动 操作触发;所述第二显示部分,还被配置为确定对所述图表整体的拖动操作所对应的位移;根据所述拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移,确定所述第二拖动操作后所述图表所占据的所述第二栅格;将所述图表显示于所述第二栅格中。
在本公开的一些实施例中,所述装置还包括:存储部分,被配置为在将所述图表显示于所述变更请求指示的栅格中后,将所述图表的显示参数进行存储,所述显示参数用于指示所述图表显示时所占据的栅格。
在本公开的一些实施例中,所述装置还包括:第三显示部分,被配置为在将所述图表的显示参数进行存储后,响应于用户对所述图表的显示请求,获取预先存储的所述显示参数;将所述图表显示于所述显示参数指示的栅格中。
本公开实施例提供了一种电子设备,包括:处理器;用于存储处理器可执行指令的存储器;其中,所述处理器被配置为调用所述存储器存储的指令,以执行上述任一实施例提供的图表显示方法。
本公开实施例提供了一种计算机可读存储介质,其上存储有计算机程序指令,所述计算机程序指令被处理器执行时实现上述任一实施例提供的图表显示方法。
本公开实施例提供了一种计算机程序产品,所述计算机程序产品包括计算机程序或指令,在所述计算机程序或指令在电子设备上运行的情况下,使得所述电子设备执行上述任一实施例提供的图表显示方法。
在本公开实施例中,通过将数据可视化面板中的图表显示区域划分为多个栅格;将图表显示于至少一个所述栅格中;响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。由此,通过调整图表所在的栅格,能够实现对图表显示区域的变更的基础上,基于栅格动态调整图表在图表显示区域的显示尺寸或显示位置等;这样,可以支持相关操作用户对图表内显示的一些数据细节进行观看,以便提高用户体验;且响应于相关变更请求,无需第三方插件,可通过浏览器网页自带元素响应于不同需求,来实现图表在图表显示区域内对应的栅格;这样,占用的处理资源较少,进而能够减少页面卡顿的情况,使得用户体验更好。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,而非限制本公开。根据下面参考附图对示例性实施例的详细说明,本公开的其它特征及方面将变得清楚。
为了更清楚地说明本公开实施例的技术方案,下面将对本公开实施例中所需要使用的附图进行说明。
此处的附图被并入说明书中并构成本说明书的一部分,这些附图示出了符合本公开的实施例,并与说明书一起用于说明本公开的技术方案。
图1示出根据本公开实施例提供的一种图表显示方法的流程图。
图2A示出可以应用本公开实施例提供的图表显示方法的一种***架构示意图。
图2B示出根据本公开实施例提供的一种在一行一列的栅格中显示图表的示意图。
图3示出根据本公开实施例提供的一种在两行四列的栅格中显示图表的示意图。
图4示出根据本公开实施例提供的一种在一行四列的栅格中显示图表的示意图。
图5示出根据本公开实施例提供的一种在一行两列的栅格中显示图表的示意图。
图6示出根据本公开实施例提供的一种在一行一列的栅格中显示图表的示意图。
图7示出根据本公开实施例提供的一种图表显示装置的框图。
图8示出根据本公开实施例提供的一种电子设备900的框图。
图9示出根据本公开实施例提供的一种电子设备1900的框图。
以下将参考附图详细说明本公开的各种示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面,但是除非特别指出,不必按比例绘制附图。
在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。
本文中术语“和/或”,仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合,例如,包括A、B、C中的至少一种,可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。
另外,为了更好地说明本公开,在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解,没有某些具体细节,本公开同样可以实施。在一些实例中,对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述,以便于凸显本公开的主旨。
在相关技术中,在对数据可视化图表进行显示时,往往无法由用户自定义图表的大小和位置,或者,在浏览器中通过第三方插件的形式进行图表的显示,往往会消耗较高的处理资源,容易造成页面卡顿等现象;例如,通过网页flash插件等形式,通过对flash进行放大缩小实现对图表的缩放,但是这样会占用较高的处理资源。
在本公开实施例中,通过将数据可视化面板中的图表显示区域划分为多个栅格;将图表显示于至少一个所述栅格中;响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。由此,通过调整图表所在的栅格,能够实现对图表显示区域的变更;同时该过程无需第三方插件,可通过浏览器网页自带元素实现,占用的处理资源较少,能够减少页面卡顿的情况,用户体验更好。
在本公开的一些实施例中,所述图表显示方法可以应用于浏览器和服务器(Browser/Server Architecture,B/S)架构;其中,该浏览器可以安装于客户机,该客户 机可以是终端设备或服务器等电子设备,终端设备可以为用户设备(User Equipment,UE)、移动设备、用户终端、终端、蜂窝电话、无绳电话、个人数字助理(Personal Digital Assistant,PDA)、手持设备、计算设备、车载设备、可穿戴设备等,所述方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
为便于描述,本说明书一个或多个实施例中,图表显示方法的执行主体可以是浏览器,后文以执行主体为浏览器为例,对该方法的实施方式进行介绍。可以理解,该方法的执行主体为浏览器只是一种示例性的说明,并不应理解为对该方法的限定。
图1示出根据本公开实施例提供的一种图表显示方法的流程图,应用于网页端;如图1所示,所述方法包括:
在步骤S11中,将数据可视化面板中的图表显示区域划分为多个栅格。
数据可视化面板(dashboard)是用于进行数据可视化显示的界面,在该界面中,通过以折线图、柱状图、饼状图、雷达图等图表的形式对图表进行显示;同时图表会显示于数据可视化面板中的图表显示区域。
在图表显示区域中,可以划分为多个栅格,栅格的大小可以是相同的,通过对图表显示区域进行划分,可以得到N×M个栅格,其中N为栅格的行数,M为栅格的列数,N和M均为大于1的整数。
在步骤S12中,将图表显示于至少一个所述栅格中。
划分得到的栅格可以不在用户图形界面中显示,而是用于布局图表显示的区域。具在本公开的一些实施例中,图表会在所占据的栅格中铺满显示,一个图表最多占据图表显示区域中的所有栅格,最少占据一个栅格。
例如,划分的栅格为一行四列,则一个可视化图表最多占据四列(一行),最少占据一列,也就是一行最多有四个图表,同时一个图表可以占据一行或多行。
在步骤S13中,响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。
显示区域变更请求用于变更图表在图表显示区域中显示的区域。在一个示例中,显示区域变更请求用于请求在图表显示区域中移动图表;在另一个示例中,显示区域变更请求用于请求在图表显示区域中对图表进行缩放。
显示区域变更请求会指示显示图表的栅格,因此,可以将图表显示于变更请求指示的栅格中;由此,能够实现变更图表在图表显示区域中显示的区域。
在本公开实施例中,通过将数据可视化面板中的图表显示区域划分为多个栅格;将图表显示于至少一个所述栅格中;响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。由此,通过调整图表所在的栅格,能够实现对图表显示区域的变更的基础上,基于栅格动态调整图表在图表显示区域的显示尺寸或显示位置等;这样,可以支持相关操作用户对图表内显示的一些数据细节进行观看,以便提高用户体验;且响应于相关变更请求,无需第三方插件,可通过浏览器网页自带元素来实现图表在图表显示区域内对应的栅格;这样,占用的处理资源较少,能够减少页面卡 顿的情况,用户体验更好。
图2A示出可以应用本公开实施例提供的图表显示方法的一种***架构示意图;如图2A所示,该***架构中包括:获取终端201、网络202和显示终端203。为实现支撑一个示例性应用,获取终端201和显示终端203通过网络202建立通信连接,显示终端203可以用于显示网页端所对应的显示界面,显示终端203将数据可视化面板中的图表显示区域划分为多个栅格;将图表显示于至少一个栅格中;获取终端201通过网络202向显示终端203上报针对图表的显示区域变更请求,显示中选响应于针对图表的显示区域变更请求,将图表显示于变更请求指示的栅格中。同时显示终端203还可以将显示结果,即图表显示于变更请求指示的栅格中对应的显示结果上传至网络202,并通过网络202发送给获取终端201。
作为示例,获取终端201可以包括指令或操作采集设备,显示终端203可以包括具有视觉信息处理能力的视觉处理设备或远程服务器。网络202可以采用有线或无线连接方式。其中,当显示终端203为视觉处理设备时,获取终端201可以通过有线连接的方式与视觉处理设备通信连接,例如通过总线进行数据通信;当显示终端203为远程服务器时,获取终端201可以通过无线网络与远程服务器进行数据交互。
或者,在一些场景中,显示终端203可以是具有显示功能的处理设备。这时,本公开实施例的图表显示方法可以由显示终端203执行,上述***架构可以不包含网络202和获取终端201。
在本公开的一些实施例中,所述显示区域变更请求包括图表显示尺寸变更请求,用于变更所述图表的尺寸;所述将所述图表显示于所述变更请求指示的栅格中,包括:根据所述图表显示尺寸变更请求所指示的第一栅格,将所述图表显示于所述第一栅格中。
图表显示尺寸变更请求,用于变更所述图表的尺寸,图表显示尺寸变更请求会请求将图表显示至更多的栅格中,以扩大图表的尺寸,或者会请求将图表显示至更少的栅格中,以缩小图表的尺寸。
图表显示尺寸变更请求中会指示图表需显示的第一栅格,那么,根据图表显示尺寸变更请求所指示的第一栅格,即可将图表显示于第一栅格中,能够实现对图表显示尺寸的变更。
在本公开实施例中,显示区域变更请求包括图表显示尺寸变更请求,用于变更图表的尺寸,根据图表显示尺寸变更请求所指示的第一栅格,将图表显示于第一栅格中。由此,通过调整图表所在的栅格,能够实现对图表显示尺寸的变更的基础上,对图表的显示尺寸进行调整;这样,可以支持扩大图表的尺寸,或缩小图表的尺寸,以便满足不同操作用户的需求,例如,相关操作用户需要查看图表的细节时,可基于图表显示尺寸的扩大变更,查看到图表的更多字节;或,相关操作用户需要在同一显示区域内显示信息量更大的图表时,可基于图表显示尺寸的缩小表更,在图表显示区域显示更多的图表信息;且扩大图表的尺寸,或缩小图表的尺寸的实现过程无需第三方插件,可通过浏览器网页自带元素实现;这样,占用的处理资源较少,进而能够减少页面卡顿的情况,用户 体验更好。
在本公开的一些实施例中,所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发;所述将所述图表显示于所述变更请求指示的栅格中,包括:确定所述第一拖动操作结束时拖动点的坐标;根据所述坐标,确定被拖动的边界在所述图表显示区域所占据的第一目标栅格;将所述第一目标栅格作为被拖动的边界所占据的栅格,对所述图表进行显示。
图表显示尺寸变更请求可以是基于用户对图表的边界的第一拖动操作而触发,在图表的边界处可以添加操作点,供用户对图表的边界进行第一拖动操作,并添加事件来监听该第一拖动操作。在一个示例中,可以是在图表的右下角的顶点上添加操作点,供用户对图表的边界进行拖动操作,在横向拖动时改变占据的栅格的列数,在纵向拖动时改变占据的栅格的行数,由此,可以实现同时对图表的宽和高进行调整,能够提高用户的操作效率。
在拖动边界的过程中,当拖动结束时,可以视为拖动操作结束,在一个示例中,用户通过在操作点上按下左键实现对图表边界的拖动,当检测到左键松开,则确定拖动结束;在另一个示例中,用户通过在操作点上触摸移动实现对图表边界的拖动,当检测到用户停止触摸,则确定拖动结束。拖动结束的位置即可视为用户期望将边界重置的位置。
根据第一拖动操作结束时拖动点的坐标,以及各栅格的坐标,可以确定被拖动的边界在所述图表显示区域所占据的第一目标栅格,;其中,该第一目标栅格即视为用户期望将边界重置的位置,那么可以将第一目标栅格作为被拖动的边界所占据的栅格,对所述图表进行显示,该显示过程中,未被拖动的边界所占据的栅格保持不变,同时将第一栅格铺满来显示图表。
在本公开实施例中,图表显示尺寸变更请求基于用户对图表的边界的第一拖动操作触发,在拖动的过程中,通过确定第一拖动操作结束时拖动点的坐标;根据坐标确定被拖动的边界所占据的第一目标栅格;将第一目标栅格作为被拖动的边界所占据的栅格,对图表进行显示。由此,响应于对图表的边界的第一拖动操作触发,在拖动的过程中,确定图表的边界所占据的目标栅格,进而能够基于该目标栅格对图表进行显示;这样,能够实现通过拖动操作,即对图表的边界所占据的栅格进行动态调整,来对应调整图表在栅格中显示的尺寸,使得用户操作便捷,且实现过程无需额外的第三方插件;如此,占用的处理资源较少,进而能够减少页面卡顿的情况,用户体验更好。
在本公开的一些实施例中,所述显示区域变更请求包括图表移动请求,用于请求移动所述图表;所述将所述图表显示于所述变更请求指示的栅格中,包括:根据所述图表移动请求所指示的第二栅格,将所述图表显示于所述第二栅格中。
图表移动请求,用于请求移动所述图表,图表移动请求会请求将图表显示至新的栅格中,而不改变图表的尺寸。
图表移动请求中会指示图表移动后所显示的第二栅格,那么,根据图表移动请求所指示的第二栅格,即可将图表显示于第二栅格中,能够实现对图表在图表显示区域中的 移动。
在本公开实施例中,显示区域变更请求包括图表移动请求,用于请求移动图表,根据图表移动请求所指示的第二栅格,将图表显示于第二栅格中。由此,通过调整图表所在的栅格,能够实现对图表在图表显示区域中的移动;例如,基于相关操作用户输入的图表移动请求,对图表进行左右或上下移动;这样通过可视化界面的移动操作,使得用户体验更好,并且,该过程无需第三方插件,可通过浏览器网页自带元素实现;这样,占用的处理资源较少,进而能够减少页面卡顿的情况,用户体验更好。
在本公开的一些实施例中,所述图表移动请求基于用户对所述图表整体的第二拖动操作触发;所述将所述图表显示于所述变更请求指示的栅格中,包括:确定对所述图表整体的第二拖动操作所对应的位移;根据所述第二拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移,确定所述第二拖动操作后所述图表所占据的所述第二栅格;将所述图表显示于所述第二栅格中。
图表移动请求可以是基于用户对图表整体的第二拖动操作而触发,在图表的预定位置处可以添加操作点,供用户对图表整体进行拖动操作,并添加事件来监听该第二拖动操作。在一个示例中,可以是在图表的上方添加操作点,供用户对图表的边界进行拖动操作,在横向拖动时改变占据的栅格的列数,在纵向拖动时改变占据的栅格的行数,由此,可以实现同时对图表在横向和纵向进行移动,能够提高用户的操作效率。
在本公开的一些实施例中,第一拖动操作和第二拖动操作不同;其中,第一拖动操作是相对于图表的边界而言,第二拖动操作是相对于图表整体而言。
在拖动图表整体的过程中,当拖动结束时,可以视为拖动操作结束,在一个示例中,用户通过在操作点上按下左键实现对图表整体的拖动,当检测到左键松开,则确定拖动结束;在另一个示例中,用户通过在操作点上触摸移动实现对图表整体的拖动,当检测到用户停止触摸,则确定拖动结束。拖动结束的位置即可视为用户期望将图表整体移动至的位置。
当对图表整体的拖动结束时,拖动点初始的坐标和结束的坐标之间的位移即可确定,该位移可以以栅格的行列为单位进行表示,在一个示例中,假设拖动点向右移动了一个栅格,向上移动了一个栅格,则其位移可以表示为(1,1);在另一个示例中,假设拖动点向左移动了一个栅格,向上移动了两个栅格,则其位移可以表示为(-1,2)。
针对一个图表所占据的栅格,可以用图表某一点(例如左上角顶点)的坐标以及图表的长宽来确定,这里的坐标和长宽的单位均以单个栅格为单位。在一个示例中,图表所占据的栅格可表示为(x,y;X,Y),其中(x,y)为图表左上角的顶点的坐标,(X,Y)为图表的长和宽,例如,图表a占据的栅格表示为(0,0;1,1),其中(0,0)为图表左上角的顶点的坐标,(1,1)为图表的长和宽。
那么在根据拖动操作前图表所占据的栅格以及所述位移,确定拖动操作后图表所占据的第二栅格的过程中,可以保持图表的长和宽不变,然后对图表的顶点的坐标进行移动即可。接上例,图表所占据的栅格可表示为(0,0;1,1),在位移为(1,1)的情况 下,将位移为(1,1)加到(0,0;1,1)中的(0,0)上,即可得到拖动操作后图表所占据的第二栅格为(1,1;1,1)。
在确定拖动操作后图表所占据的第二栅格后,即可将图表显示于所述第二栅格中,实现了对图表的移动。
在本公开实施例中,图表移动请求基于用户对所述图表整体的拖动操作触发,在移动的过程中,通过确定对图表整体的拖动操作所对应的位移;根据拖动操作前图表所占据的栅格以及位移,确定拖动操作后图表所占据的第二栅格;将图表显示于第二栅格中。由此,响应于用户对图表整体的拖动操作触发,对图表整体进行移动;这里移动可以包括但不限于相对于上一时刻的图表在图表显示区域的栅格,进行上下左右移动;如此,使得移动操作可满足不同用户的需求,且通过拖动操作触发,实现相对位移,能够实现通过对图表整体执行拖动操作来调整图表在栅格中的移动,用户操作便捷;这样,占用的处理资源较少,进而能够减少页面卡顿的情况,用户体验更好。
在本公开的一些实施例中,在将所述图表显示于所述变更请求指示的栅格中后,所述方法还包括:将所述图表的显示参数进行存储,所述显示参数用于指示所述图表显示时所占据的栅格。
这里图表的显示参数,包括图表显示时所占据的栅格,即图表的横向、纵向占据位置,图表显示时所占据的栅格,可以通过前文所述的图表某一点(例如左上角顶点)的坐标以及图表的长宽来表示,这里的坐标和长宽的单位均以单个栅格为单位。
在一个示例中,图表所占据的栅格可表示为(x,y;X,Y),那么,在将图表的显示参数进行存储时,可以将图表所占据的栅格(x,y;X,Y)进行存储。
在将图表的显示参数进行存储时,可以从用户的维度对显示参数进行存储,例如,针对各个用户,针对其图表的显示参数进行存储;或者,针对某一组用户,针对其图表的显示参数进行存储。由此,通过对图表的显示参数进行存储,可提高图表的显示参数的安全性的基础上,以便后续基于该存储的显示参数显示相关图表。
在本公开的一些实施例中,在将所述图表的显示参数进行存储后,所述方法还包括:响应于用户对所述图表的显示请求,获取预先存储的所述显示参数;将所述图表显示于所述显示参数指示的栅格中。
在将图表的显示参数进行存储后,当用户再次请求显示该图表时,可以先获取其存储的显示参数,然后将图表存储于显示参数所指示的栅格中。
在一个示例中,针对单个用户,当其对图表的显示区域进行变更后,可以将图表的显示参数进行存储,然后当该用户再次请求显示图表时,获取存储的显示参数,并将图表存储于显示参数所指示的栅格中;在另一个示例中,针对某一组用户,当该组中的任一用户对图表的显示区域进行变更后,可以将图表的显示参数进行存储,然后当该组中的任一用户再次请求显示图表时,获取存储的显示参数,并将图表存储于显示参数所指示的栅格中。
在本公开实施例中,通过将图表的显示参数进行存储,然后响应于用户对图表的显 示请求,获取预先存储的显示参数;将图表显示于显示参数指示的栅格中。由此,基于预先存储的显示参数,对图表进行显示,能够实现和用户上一次更改的图表布局一致,无需重复更改图表的显示区域,便利性较高。
下面对本公开实施例的一个应用场景进行说明。请参阅图2B,为本公开提供的一种可在图表显示区域显示的图表的示意图,后续基于获取到的显示区域变更请求,通过对行数所占栅格对应的图标205以及调整列数所占栅格对应的图标206进行拖动,以实现对该图表204的显示区域进行变更;例如:可变更为将图表204整体在两行四列或一行四列的栅格中进行显示,或在一行两列、一行一列的栅格中显示该图表204等。
参阅图3,是将图表显示区域划分为多个栅格,并同步将图2中所示的图表204整体进行显示,以得到图表301,即为本公开提供的一种在两行四列的栅格中显示的图表的示意图;这里同步将图标205变更为图标302,将图标206变更为图标303。
如图4所示,为本公开提供的一种在一行四列的栅格中显示图表的示意图,这里可以是基于获取到的显示区域变更请求,通过对图标302和图标303进行拖动,将图表301整体在一行四列的栅格中进行显示,即缩小图表301的显示尺寸以得到图表401,并同步调整图标302为图标403以及调整图标303为图标402;同时为方便用户查看,此处提供两个图表表格进行纵向对比,即同时在图4中显示图表404,且图表404整体在一行四列的栅格中进行显示,其中图标404和图标406用于分别对图表404的行数和列数所占栅格进行调整。
如图5所示,为本公开提供的一种在一行两列的栅格中显示图表的示意图;这里可以是将图4中分别在一行四列中显示的两个图表401和图表404,通过调整各自对应的行数和列数所占栅格,以得到在一行两列中分别显示的图表501和图表504;其中,调整图表401和图表404的过程中,对应的图标403、图标402、图标406以及图标405变更为图标503、图标502、图标506以及图标505。这样该图5中,通过一行四列平均划分为一行两列显示两个图表;可以对两个图表表格,即图表501和图表504进行横向对比,方便用户查看。
同时如图6所示,为本公开提供的一种在一行一列的栅格中显示图表的示意图。其中,图表601、602、603以及604分别显示在一行一列的栅格中,进而一行四列同步显示四个图表;该图6中,可以对四个表格进行横向对比,方便用户查看。
可以理解,本公开提及的上述各个方法实施例,在不违背原理逻辑的情况下,均可以彼此相互结合形成结合后的实施例。本领域技术人员可以理解,在具体实施方式的上述方法中,各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
此外,本公开还提供了图表显示装置、电子设备、计算机可读存储介质、程序,上述均可用来实现本公开提供的任一种图表显示方法,相应技术方案和描述和参见方法部分的相应记载。
图7示出根据本公开实施例的图表显示装置的框图,如图7所示,所述装置70包括:
划分部分71,被配置为将数据可视化面板中的图表显示区域划分为多个栅格;
第一显示部分72,被配置为将图表显示于至少一个所述栅格中;
第二显示部分73,被配置为响应于针对所述图表的显示区域变更请求,将所述图表 显示于所述变更请求指示的栅格中。
在本公开的一些实施例中,所述显示区域变更请求包括图表显示尺寸变更请求,用于变更所述图表的尺寸;
所述第二显示部分73,还被配置为根据所述图表显示尺寸变更请求所指示的第一栅格,将所述图表显示于所述第一栅格中。
在本公开的一些实施例中,所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发;
所述第二显示部分73,还被配置为确定所述第一拖动操作结束时拖动点的坐标;根据所述坐标,确定被拖动的边界在所述图表显示区域所占据的第一目标栅格;将所述第一目标栅格作为被拖动的边界所占据的栅格,对所述图表进行显示。
在本公开的一些实施例中,所述显示区域变更请求包括图表移动请求,用于请求移动所述图表;
所述第二显示部分73,还被配置为根据所述图表移动请求所指示的第二栅格,将所述图表显示于所述第二栅格中。
在本公开的一些实施例中,所述图表移动请求基于用户对所述图表整体的第二拖动操作触发;
所述第二显示部分73,还被配置为确定对所述图表整体的拖动操作所对应的位移;根据所述第二拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移,确定所述第二拖动操作后所述图表所占据的所述第二栅格;将所述图表显示于所述第二栅格中。
在本公开的一些实施例中,所述装置还包括:
存储部分,被配置为在将所述图表显示于所述变更请求指示的栅格中后,将所述图表的显示参数进行存储,所述显示参数用于指示所述图表显示时所占据的栅格。
在本公开的一些实施例中,所述装置还包括:
第三显示部分,被配置为在将所述图表的显示参数进行存储后,响应于用户对所述图表的显示请求,获取预先存储的所述显示参数;将所述图表显示于所述显示参数指示的栅格中。
在一些实施例中,本公开实施例提供的装置具有的功能或包含的部分可以用于执行上文方法实施例描述的方法,其具体实现可以参照上文方法实施例的描述,为了简洁,此处不再描述。
在本公开实施例以及其他的实施例中,“部分”可以是部分电路、部分处理器、部分程序或软件等等,当然也可以是单元,还可以是模块也可以是非模块化的。
本公开实施例还提出一种计算机可读存储介质,其上存储有计算机程序指令,所述计算机程序指令被处理器执行时实现上述任一实施例提供的图表显示方法。
其中,计算机可读存储介质可以是易失性或非易失性计算机可读存储介质。
本公开实施例还提出一种电子设备,包括:处理器;用于存储处理器可执行指令的 存储器;其中,所述处理器被配置为调用所述存储器存储的指令,以执行上述任一实施例提供的图表显示方法。
本公开实施例还提供了一种计算机程序产品,包括计算机可读代码,或者承载有计算机可读代码的非易失性计算机可读存储介质,当所述计算机可读代码在电子设备的处理器中运行时,所述电子设备中的处理器执行上述任一实施例提供的图表显示方法。
本公开实施例还提供一种计算机程序,该计算机程序包括计算机可读代码,在该计算机可读代码在电子设备中运行的情况下,该电子设备的处理器执行上述任一实施例提供的图表显示方法。
电子设备可以被提供为终端、服务器或其它形态的设备。
图8示出根据本公开实施例提供的一种电子设备800的框图。例如,电子设备800可以是UE、移动设备、用户终端、终端、蜂窝电话、无绳电话、PDA、手持设备、计算设备、车载设备、可穿戴设备等终端设备。
参照图8,电子设备800可以包括以下一个或多个组件:处理组件802,存储器804,电源组件806,多媒体组件808,音频组件810,输入/输出(Input/Output,I/O)接口812,传感器组件814,以及通信组件816。
处理组件802通常控制电子设备800的整体操作,诸如与显示,电话呼叫,数据通信,相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令,以完成上述的方法的全部或部分步骤。此外,处理组件802可以包括一个或多个模块,便于处理组件802和其他组件之间的交互。例如,处理组件802可以包括多媒体模块,以方便多媒体组件808和处理组件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),磁存储器,快闪存储器,磁盘或光盘。
电源组件806为电子设备800的各种组件提供电力。电源组件806可以包括电源管理***,一个或多个电源,及其他与为电子设备800生成、管理和分配电力相关联的组件。
多媒体组件808包括在所述电子设备800和用户之间的提供一个输出接口的屏幕。在一些实施例中,屏幕可以包括液晶显示器(Liquid Crystal Display,LCD)和触摸面板(Touch Panel,TP)。如果屏幕包括触摸面板,屏幕可以被实现为触摸屏,以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界,而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中,多媒体组件808包括一个前置摄像头和/或 后置摄像头。当电子设备800处于操作模式,如拍摄模式或视频模式时,前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜***或具有焦距和光学变焦能力。
音频组件810被配置为输出和/或输入音频信号。例如,音频组件810包括一个麦克风(Microphone,MIC),当电子设备800处于操作模式,如呼叫模式、记录模式和语音识别模式时,麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中,音频组件810还包括一个扬声器,用于输出音频信号。
I/O接口812为处理组件802和***接口模块之间提供接口,上述***接口模块可以是键盘,点击轮,按钮等。这些按钮可包括但不限于:主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件814包括一个或多个传感器,用于为电子设备800提供各个方面的状态评估。例如,传感器组件814可以检测到电子设备800的打开/关闭状态,组件的相对定位,例如所述组件为电子设备800的显示器和小键盘,传感器组件814还可以检测电子设备800或电子设备800一个组件的位置改变,用户与电子设备800接触的存在或不存在,电子设备800方位或加速/减速和电子设备800的温度变化。传感器组件814可以包括接近传感器,被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器,如互补金属氧化物半导体(Complementary Metal Oxide Semiconductor,CMOS)或电荷耦合装置(Charge-coupled Device,CCD)图像传感器,用于在成像应用中使用。在一些实施例中,该传感器组件814还可以包括加速度传感器,陀螺仪传感器,磁传感器,压力传感器或温度传感器。
通信组件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)技术和其他技术来实现。
在示例性实施例中,电子设备800可以被一个或多个应用专用集成电路(Application Specific Integrated Circuit,ASIC)、数字信号处理器(Digital Signal Process,DSP)、数字信号处理设备(Digital Signal Process Device,DSPD)、可编程逻辑器件(Programmable Logic Device,PLD)、现场可编程门阵列(Field Programmable Gate Array,FPGA)、控制 器、微控制器、微处理器或其他电子元件实现,用于执行上述方法。
在示例性实施例中,还提供了一种非易失性计算机可读存储介质,例如包括计算机程序指令的存储器804,上述计算机程序指令可由电子设备800的处理器820执行以完成上述方法。
图9示出根据本公开实施例提供的一种电子设备1900的框图。例如,电子设备1900可以被提供为一服务器。参照图9,电子设备1900包括处理组件1922,其进一步包括一个或多个处理器,以及由存储器1932所代表的存储器资源,用于存储可由处理组件1922的执行的指令,例如应用程序。存储器1932中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外,处理组件1922被配置为执行指令,以执行上述任一实施例提供的图表显示方法。
电子设备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)或类似。
在示例性实施例中,还提供了一种非易失性计算机可读存储介质,例如包括计算机程序指令的存储器1932,上述计算机程序指令可由电子设备1900的处理组件1922执行以完成上述方法。
本公开可以是***、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质,其上载有用于使处理器实现本公开的各个方面的计算机可读程序指令。
计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是(但不限于)电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:便携式计算机盘、硬盘、随机存取存储器(Random Access Memory,RAM)、ROM、EPROM或闪存、SRAM、便携式压缩盘只读存储器(Compact Disc-ReadOnly Memory,CD-ROM)、数字多功能盘(Digital Video Disc,DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身,诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如,通过光纤电缆的光脉冲)、或者通过电线传输的电信号。
这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备,或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令,并转发该计算机可读程序指令,以供存储在各个计算/处 理设备中的计算机可读存储介质中。
用于执行本公开操作的计算机程序指令可以是汇编指令、指令集架构(Instruction Set Architecture,ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码,所述编程语言包括面向对象的编程语言,诸如Smalltalk、C++等,以及常规的过程式编程语言,诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络,包括局域网(Local Area Network,LAN)或广域网(Wide Area Network,WAN)连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中,通过利用计算机可读程序指令的状态信息来个性化定制电子电路,例如可编程逻辑电路、FPGA或可编程逻辑阵列(Programmable Logic Arrays,PLA),该电子电路可以执行计算机可读程序指令,从而实现本公开的各个方面。
这里参照根据本公开实施例的方法、装置(***)和计算机程序产品的流程图和/或框图描述了本公开的各个方面。应当理解,流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合,都可以由计算机可读程序指令实现。
这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器,从而生产出一种机器,使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时,产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中,这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作,从而,存储有指令的计算机可读介质则包括一个制造品,其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。
也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上,使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤,以产生计算机实现的过程,从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。
附图中的流程图和框图显示了根据本公开的多个实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分,所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的***来实现,或者可以用专用硬件与计算机指 令的组合来实现。
该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中,所述计算机程序产品具体体现为计算机存储介质,在另一个可选实施例中,计算机程序产品具体体现为软件产品,例如软件开发包(Software Development Kit,SDK)等等。
以上已经描述了本公开的各实施例,上述说明是示例性的,并非穷尽性的,并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下,对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择,旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进,或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。
本公开实施例涉及一种图表显示方法、装置、电子设备、存储介质及程序;其中,所述方法应用于网页端,所述方法包括:将数据可视化面板中的图表显示区域划分为多个栅格;将图表显示于至少一个所述栅格中;响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。本公开实施例能够实现对网页端的图表显示区域的变更,用户体验更好。
Claims (17)
- 一种图表显示方法,应用于网页端,包括:将数据可视化面板中的图表显示区域划分为多个栅格;将图表显示于至少一个所述栅格中;响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。
- 根据权利要求1所述的方法,其中,所述显示区域变更请求包括图表显示尺寸变更请求,用于变更所述图表的尺寸;所述将所述图表显示于所述变更请求指示的栅格中,包括:根据所述图表显示尺寸变更请求所指示的第一栅格,将所述图表显示于所述第一栅格中。
- 根据权利要求2所述的方法,其中,所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发;所述将所述图表显示于所述变更请求指示的栅格中,包括:确定所述第一拖动操作结束时拖动点的坐标;根据所述坐标,确定被拖动的边界在所述图表显示区域所占据的第一目标栅格;将所述第一目标栅格作为被拖动的边界所占据的栅格,对所述图表进行显示。
- 根据权利要求1所述的方法,其中,所述显示区域变更请求包括图表移动请求,用于请求移动所述图表;所述将所述图表显示于所述变更请求指示的栅格中,包括:根据所述图表移动请求所指示的第二栅格,将所述图表显示于所述第二栅格中。
- 根据权利要求4所述的方法,其中,所述图表移动请求基于用户对所述图表整体的第二拖动操作触发;所述将所述图表显示于所述变更请求指示的栅格中,包括:确定对所述图表整体的第二拖动操作所对应的位移;根据所述第二拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移,确定所述第二拖动操作后所述图表所占据的所述第二栅格;将所述图表显示于所述第二栅格中。
- 根据权利要求1所述的方法,其中,在将所述图表显示于所述变更请求指示的栅格中后,所述方法还包括:将所述图表的显示参数进行存储,所述显示参数用于指示所述图表显示时所占据的栅格。
- 根据权利要求6所述的方法,其中,在将所述图表的显示参数进行存储后,所述方法还包括:响应于用户对所述图表的显示请求,获取预先存储的所述显示参数;将所述图表显示于所述显示参数指示的栅格中。
- 一种图表显示装置,包括:划分部分,被配置为将数据可视化面板中的图表显示区域划分为多个栅格;第一显示部分,被配置为将图表显示于至少一个所述栅格中;第二显示部分,被配置为响应于针对所述图表的显示区域变更请求,将所述图表显示于所述变更请求指示的栅格中。
- 根据权利要求8所述的装置,其中,所述显示区域变更请求包括图表显示尺寸变更请求,用于变更所述图表的尺寸;所述第二显示部分,还被配置为根据所述图表显示尺寸变更请求所指示的第一栅格,将所述图表显示于所述第一栅格中。
- 根据权利要求9所述的装置,其中,所述图表显示尺寸变更请求基于用户对所述图表的边界的第一拖动操作触发;所述第二显示部分,还被配置为确定所述第一拖动操作结束时拖动点的坐标;确定被拖动的边界在所述图表显示区域所占据的第一目标栅格;将所述第一目标栅格作为被拖动的边界所占据的栅格,对所述图表进行显示。
- 根据权利要求8所述的装置,其中,所述显示区域变更请求包括图表移动请求,用于请求移动所述图表;所述第二显示部分,还被配置为根据所述图表移动请求所指示的第二栅格,将所述图表显示于所述第二栅格中。
- 根据权利要求11所述的装置,其中,所述图表移动请求基于用户对所述图表整体的第二拖动操作触发;所述第二显示部分,还被配置为确定对所述图表整体的第二拖动操作所对应的位移;根据所述第二拖动操作前所述图表在所述图表显示区域所占据的栅格以及所述位移,确定所述第二拖动操作后所述图表所占据的所述第二栅格;将所述图表显示于所述第二栅格中。
- 根据权利要求8所述的装置,其中,所述装置还包括:存储部分,被配置为在将所述图表显示于所述变更请求指示的栅格中后,将所述图表的显示参数进行存储,所述显示参数用于指示所述图表显示时所占据的栅格。
- 根据权利要求13所述的装置,其中,所述装置还包括:第三显示部分,被配置为在将所述图表的显示参数进行存储后,响应于用户对所述图表的显示请求,获取预先存储的所述显示参数;将所述图表显示于所述显示参数指示的栅格中。
- 一种电子设备,包括:处理器;用于存储处理器可执行指令的存储器;其中,所述处理器被配置为调用所述存储器存储的指令,以执行权利要求1至7中任意一项所述的图表显示方法。
- 一种计算机可读存储介质,其上存储有计算机程序指令,所述计算机程序指令被处理器执行时实现权利要求1至7中任意一项所述的图表显示方法。
- 一种计算机程序产品,所述计算机程序产品包括计算机程序或指令,在所述计算机程序或指令在电子设备上运行的情况下,使得所述电子设备执行如权利要求1至7中任意一项所述的图表显示方法。
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111446442.5 | 2021-11-30 | ||
CN202111446442.5A CN114116106A (zh) | 2021-11-30 | 2021-11-30 | 图表显示方法及装置、电子设备和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
WO2023097998A1 true WO2023097998A1 (zh) | 2023-06-08 |
Family
ID=80368691
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
PCT/CN2022/095559 WO2023097998A1 (zh) | 2021-11-30 | 2022-05-27 | 图表显示方法、装置、电子设备、存储介质及程序 |
Country Status (2)
Country | Link |
---|---|
CN (1) | CN114116106A (zh) |
WO (1) | WO2023097998A1 (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114116106A (zh) * | 2021-11-30 | 2022-03-01 | 上海商汤科技开发有限公司 | 图表显示方法及装置、电子设备和存储介质 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8527909B1 (en) * | 2012-05-29 | 2013-09-03 | Sencha, Inc. | Manipulating data visualizations on a touch screen |
US20190087069A1 (en) * | 2017-09-21 | 2019-03-21 | Rockwell Automation Technologies, Inc. | Tiling content for presentation on different display sizes |
CN112130943A (zh) * | 2020-09-09 | 2020-12-25 | 中盈优创资讯科技有限公司 | 一种自定义可视化布局设计的方法 |
CN113139371A (zh) * | 2021-04-06 | 2021-07-20 | 青岛以萨数据技术有限公司 | 一种可视化图表构建方法、装置、***及存储介质 |
CN113326314A (zh) * | 2021-06-30 | 2021-08-31 | 招商局金融科技有限公司 | 数据可视化方法、装置、电子设备及可读存储介质 |
CN114116106A (zh) * | 2021-11-30 | 2022-03-01 | 上海商汤科技开发有限公司 | 图表显示方法及装置、电子设备和存储介质 |
Family Cites Families (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108182102A (zh) * | 2018-01-02 | 2018-06-19 | 武汉斗鱼网络科技有限公司 | 图表管理方法、装置及可读存储介质 |
CN109783089A (zh) * | 2019-01-10 | 2019-05-21 | 北京智融网络科技有限公司 | 数据图表动态交互***、方法、计算设备及可读存储介质 |
-
2021
- 2021-11-30 CN CN202111446442.5A patent/CN114116106A/zh active Pending
-
2022
- 2022-05-27 WO PCT/CN2022/095559 patent/WO2023097998A1/zh unknown
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8527909B1 (en) * | 2012-05-29 | 2013-09-03 | Sencha, Inc. | Manipulating data visualizations on a touch screen |
US20190087069A1 (en) * | 2017-09-21 | 2019-03-21 | Rockwell Automation Technologies, Inc. | Tiling content for presentation on different display sizes |
CN112130943A (zh) * | 2020-09-09 | 2020-12-25 | 中盈优创资讯科技有限公司 | 一种自定义可视化布局设计的方法 |
CN113139371A (zh) * | 2021-04-06 | 2021-07-20 | 青岛以萨数据技术有限公司 | 一种可视化图表构建方法、装置、***及存储介质 |
CN113326314A (zh) * | 2021-06-30 | 2021-08-31 | 招商局金融科技有限公司 | 数据可视化方法、装置、电子设备及可读存储介质 |
CN114116106A (zh) * | 2021-11-30 | 2022-03-01 | 上海商汤科技开发有限公司 | 图表显示方法及装置、电子设备和存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN114116106A (zh) | 2022-03-01 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
EP4090005A1 (en) | Photographing method and apparatus, and electronic device and storage medium | |
US11644943B2 (en) | Method for icon display, terminal, and storage medium | |
WO2019174477A1 (zh) | 用户界面显示方法、装置及终端 | |
CN107526494B (zh) | 键盘显示方法、装置、终端及存储介质 | |
EP3680764B1 (en) | Icon moving method and device | |
CN107632874B (zh) | 界面显示方法、装置及终端 | |
US20180011818A1 (en) | Webpage Update Method And Apparatus | |
CN104636106B (zh) | 图片显示方法和装置、终端设备 | |
WO2019047963A1 (en) | METHOD AND APPARATUS FOR CONTROLLING A TERMINAL DEVICE AND INFORMATION CARRIER | |
WO2013058514A1 (en) | Method and apparatus for operating mobile terminal | |
US20160004425A1 (en) | Method of displaying graphic user interface and electronic device implementing same | |
EP4161065A1 (en) | Video call interface display control method and apparatus, storage medium, and device | |
CN112099707A (zh) | 显示方法、装置和电子设备 | |
WO2020147677A1 (zh) | 显示内容的方法、装置、终端及存储介质 | |
CN110442267B (zh) | 触摸操作响应方法、装置、移动终端及存储介质 | |
CN111597029B (zh) | 数据处理方法及装置、电子设备和存储介质 | |
CN107748656B (zh) | 一种画面显示方法、装置、终端及存储介质 | |
US20150116368A1 (en) | Method and device for adjusting characters of application | |
WO2023061280A1 (zh) | 应用程序显示方法、装置及电子设备 | |
CN110989905A (zh) | 信息处理方法及装置、电子设备和存储介质 | |
CN112463084A (zh) | 分屏显示方法、装置、终端设备及计算机可读存储介质 | |
WO2023097998A1 (zh) | 图表显示方法、装置、电子设备、存储介质及程序 | |
TWI776348B (zh) | 病理切片圖像的展示方法、電子設備和儲存介質 | |
CN114205524B (zh) | 显示控制方法和终端 | |
CN113419649A (zh) | 用于操作电子装置的方法及其装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
121 | Ep: the epo has been informed by wipo that ep was designated in this application |
Ref document number: 22899818 Country of ref document: EP Kind code of ref document: A1 |