Data processing method and apparatus, product, device, and medium

Abstract

The present application discloses a data processing method and apparatus, a product, a device, and a medium. The method comprises: acquiring a raw data set and a graphic element set, wherein the graphic element set comprises a plurality of graphic elements and first element positions respectively corresponding to the graphic elements in a first canvas, and the first canvas size of the first canvas can be dynamically adjusted on the basis of the plurality of graphic elements; determining a display region in the first canvas, and screening the graphic element set for a first graphic element on the basis of the display region and the first element positions corresponding to the graphic elements in the first canvas; drawing the first graphic element in the first canvas, and screening the raw data set for target raw data on the basis of a drawn second graphic element located in the display region; and displaying the target raw data in a second canvas by means of the second graphic element. The present application can improve the performance of drawing and displaying graphic elements.

Description

Data processing methods, devices, products, equipment and media

[0001] This application claims priority to the Chinese patent application filed with the China Patent Office on January 9, 2024, with application number 2024100271187 and application name “Data processing methods, devices, products, equipment and media”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The present application relates to the field of computer technology, and in particular to a data processing method, apparatus, product, equipment, and medium. Background Art

[0003] A chart can be rendered and displayed using related graphic elements. The process of rendering and displaying a chart using graphic elements is the process of drawing and displaying the graphic elements. In existing applications, all graphic elements are drawn on a graphic canvas at once and then displayed on the canvas. However, when there are a large number of graphic elements to be drawn, this method of drawing the graphic elements is very time-consuming, resulting in a significant delay in the display of the graphic elements, and thus poor performance in drawing and displaying the graphic elements. Summary of the Invention

[0004] The present application provides a data processing method, apparatus, product, device and medium that can improve the performance of drawing and displaying graphic elements.

[0005] On one hand, the present application provides a data processing method, the method comprising:

[0006] Obtaining an original data set, where the original data set includes at least one item of original data;

[0007] Obtaining a graphic element set by parsing the original data set based on the first canvas, the graphic element set comprising a plurality of graphic elements and first element positions assigned to the plurality of graphic elements in the first canvas, wherein a first canvas size of the first canvas is dynamically adjustable according to the plurality of graphic elements;

[0008] Determining a display area in the first canvas, and based on the display area and first element positions corresponding to the plurality of graphic elements, selecting a first graphic element from the graphic element set, wherein the first element position corresponding to the first graphic element satisfies a preset positional relationship with the display area;

[0009] Drawing the first graphic element in the first canvas based on the first element position corresponding to the first graphic element;

[0010] Taking the first graphic element located in the display area as the second graphic element, and determining target original data corresponding to the second graphic element from the original data set;

[0011] The target original data is displayed in the second canvas by using a second graphic element, and a second canvas size of the second canvas corresponds to the display area.

[0012] In one aspect, the present application provides a data processing device, the device comprising:

[0013] An acquisition module is used to acquire an original data set, where the original data set includes at least one item of original data;

[0014] a parsing module, configured to parse the original data set based on the first canvas to obtain a graphic element set, the graphic element set comprising a plurality of graphic elements and first element positions assigned to the plurality of graphic elements in the first canvas, wherein a first canvas size of the first canvas is dynamically adjustable according to the plurality of graphic elements;

[0015] a first determining module configured to determine a display area in the first canvas and, based on the display area and first element positions corresponding to the plurality of graphic elements, select a first graphic element from the graphic element set, wherein the first element position corresponding to the first graphic element satisfies a preset positional relationship with the display area;

[0016] a drawing module, configured to draw the first graphic element in the first canvas based on a first element position corresponding to the first graphic element;

[0017] a second determining module, configured to use the first graphic element located in the display area as a second graphic element, and determine target original data corresponding to the second graphic element from the original data set;

[0018] The display module is configured to display the target original data in a second canvas through a second graphic element, wherein a second canvas size of the second canvas corresponds to the display area.

[0019] In one aspect, the present application provides a computer device including a memory and a processor, wherein the memory stores a computer program. When the computer program is executed by the processor, the processor executes the method in one aspect of the present application.

[0020] In one aspect, the present application provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, the processor executes the method in the above aspect.

[0021] According to one aspect of the present application, a computer program product is provided, comprising a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to perform the method provided in various optional embodiments such as the above-mentioned aspect.

[0022] The present application can draw graphic elements on a first canvas. Since the size of the first canvas can be dynamically adjusted, no matter how many graphic elements need to be drawn, they can be implemented on the first canvas of dynamic size, so that the present application can have no limit on the number of graphic elements to be drawn; and the first canvas can also have a display area. The present application can filter out the first graphic element that currently needs to be drawn from the full set of graphic elements based on the display area. The first graphic element corresponds to the first element position in the first canvas and the display area. The preset position relationship between the first graphic element and the display area satisfies the preset position relationship, so that only the first graphic element associated with the display area can be drawn subsequently, without having to draw all the graphic elements in the graphic element set at one time. Then, in the second canvas actually used to display the original data, the corresponding target original data can be displayed by drawing the second graphic element located in the display area. Therefore, the efficiency of drawing the graphic elements is improved, and the timeliness of displaying the graphic elements is improved. In summary, the method provided by the present application can improve the performance of drawing and displaying graphic elements. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] FIG1 is a schematic diagram of a network architecture provided in an embodiment of the present application;

[0024] FIG2 is a schematic diagram of a diagram drawing scenario provided by an embodiment of the present application;

[0025] FIG3 is a flow chart of a data processing method provided in an embodiment of the present application;

[0026] FIG4a is a schematic diagram of a scenario of dividing a first canvas provided in an embodiment of the present application;

[0027] FIG4 b is a schematic diagram of a tree structure provided in an embodiment of the present application;

[0028] FIG5a is a schematic diagram of a scenario of element reuse provided by an embodiment of the present application;

[0029] FIG5 b is a schematic diagram of another scenario of element reuse provided by an embodiment of the present application;

[0030] FIG6 is a schematic diagram of a scenario for obtaining a display position of a graphic element in a second canvas provided by an embodiment of the present application;

[0031] FIG7 is a schematic diagram of a business architecture for drawing graphic elements provided in an embodiment of the present application;

[0032] FIG8 is a logic diagram showing raw data provided by an embodiment of the present application;

[0033] FIG9 is a flow chart of a method for obtaining a display area according to an embodiment of the present application;

[0034] FIG10 is a schematic diagram of an interface for displaying graphic elements provided in an embodiment of the present application;

[0035] FIG11 is a schematic diagram of a scenario in which the position of a display area is dynamically changed according to an embodiment of the present application;

[0036] FIG12 is a flow chart of a method for modifying a graphic element according to an embodiment of the present application;

[0037] FIG13 is a schematic structural diagram of a data processing device provided in an embodiment of the present application;

[0038] FIG14 is a schematic structural diagram of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0039] All data collected in this application (such as original data sets, chart configuration data, and other related data) are collected with the consent and authorization of the object to which the data belongs (such as the user, institution or enterprise), and the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant region.

[0040] Here, the relevant technical concepts involved in this application are explained:

[0041] Dimension: In data analysis, a dimension typically represents a characteristic of the data, such as user information or product category. These characteristics help categorize and summarize the data. Furthermore, dimensions can have multiple levels. For example, geographic location can be divided into provinces, cities, and other levels. This hierarchical structure allows for data analysis at different granularities.

[0042] Faceting: In data analysis, faceting is a visualization technique that allows different subsets of data to be displayed in multiple subplots, allowing for a better understanding of the data's structure and relationships. Faceting is often used to explore the interactions and influences between multiple categorical variables, helping to uncover underlying patterns and trends in the data. Faceting allows us to display multiple dimensions of data in a single chart.

[0043] Visualization rendering engine: On the web (network) side, a visualization rendering engine is a software component based on web technologies that converts data and graphical elements into visual graphics for presentation and interaction in web browsers. These engines leverage the various technical interfaces provided by the web platform to create rich, dynamic, and interactive visualizations, helping users better understand and analyze data. Web-based visualization rendering engines are typically optimized for web platform performance to ensure a smooth interactive experience even with large amounts of data and complex scenarios.

[0044] Canvas is a web-based graphics technology that provides a JavaScript-based drawing API (application programming interface) that allows developers to create complex two-dimensional graphics and animations in web browsers. Canvas offers excellent cross-platform compatibility and can be used in most modern browsers without the need for plugins. Developers can control the drawing process on canvas by writing JavaScript code, enabling dynamic and interactive graphics presentation.

[0045] Echarts: ECharts is an open-source web charting library written in JavaScript that provides a rich set of chart types and features for creating interactive data visualizations in web browsers. ECharts has good cross-platform compatibility and can be used in most modern browsers without installing plugins.

[0046] A virtual canvas for drawing charts: A virtual canvas is an abstract area in memory used to draw chart data. It is not displayed directly on the screen, but rather serves as an intermediate or cache layer for chart drawing. On the virtual canvas, operations such as drawing, editing, and laying out charts can be performed without being affected by screen display limitations. The use of a virtual canvas improves chart drawing efficiency and flexibility, allowing users to perform complex chart operations in the background and then present the results on the real canvas. The first canvas described below in this application can be this virtual canvas.

[0047] The real canvas for displaying charts: The real canvas is the actual chart display area that users see on screen. It is the final destination for chart drawing and is responsible for visually presenting the chart data on the virtual canvas. The real canvas is closely related to user interaction. Actions such as zooming, scrolling, and clicking all occur on the real canvas. Through the real canvas, users can intuitively view and analyze chart data and obtain the information and insights they need. The second canvas described below in this application can be this real canvas.

[0048] Please refer to Figure 1, which is a structural diagram of a network architecture provided by an embodiment of the present application. As shown in Figure 1, the network architecture may include a server 200 and a terminal device cluster. The terminal device cluster may include one or more terminal devices, and the number of terminal devices will not be restricted here. As shown in Figure 1, the multiple terminal devices may specifically include terminal device 1, terminal device 2, terminal device 3, ..., terminal device n; as shown in Figure 1, terminal device 1, terminal device 2, terminal device 3, ..., terminal device n can all be connected to the server 200 through a network connection, so that each terminal device can exchange data with the server 200 through the network connection.

[0049] The server 200 shown in Figure 1 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers. It can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (content distribution network), and big data and artificial intelligence platforms. The terminal device can be: a smart phone, tablet computer, laptop computer, desktop computer, smart TV, car terminal, portable terminal, smart home appliance and other smart terminals. The following takes the communication between the terminal device 1 and the server 200 as an example to describe the embodiment of the present application in detail.

[0050] The terminal device 1 may be a terminal device for drawing a chart. The drawn chart may be used to display (i.e., present) raw data. The raw data may be any data that needs to be presented using a chart, such as the monthly sales of a merchant. The raw data may be provided to the terminal device 1 by the server 200, or the raw data may be local data in the terminal device 1. It is understood that the process of drawing a chart is the process of rendering the chart, i.e., drawing is the same as rendering.

[0051] Please refer to Figure 2, which is a schematic diagram of a scene for drawing a chart provided by an embodiment of the present application. As shown in Figure 2, there can be two canvases in the present application, one canvas is a virtual canvas, and the virtual canvas can refer to a drawing space that can be infinitely expanded, supporting users to freely draw, edit and save content in it without worrying about insufficient canvas space. The virtual canvas can be called a first canvas, and the first canvas can be a canvas for the system of the terminal device 1 to draw charts. The other canvas is a real canvas (i.e., the real canvas in the figure), which refers to the canvas actually used to display the drawn chart in the front-end interface, such as the real canvas can be a canvas containing a canvas element of the web end (network end), and the real canvas can be called a second canvas, and the second canvas can be a canvas actually used to display the chart drawn in the first canvas on the terminal interface.

[0052] Among them, a chart may contain several graphic elements. It can be understood that a chart is composed of several graphic elements. Therefore, the process of drawing a chart is the process of drawing the graphic elements that constitute the chart.

[0053] The first canvas may have a display area, the size of which may be the same as that of the second canvas. In the present application, the graphic elements within the display area of ​​the first canvas may be drawn in real time (or in some scenarios, some adjacent graphic elements outside the display area may also need to be drawn), and the size of the first canvas may be dynamically adjustable to support infinite extension. Therefore, no matter how many graphic elements need to be drawn in total, they can be drawn on the first canvas. Furthermore, since only the graphic elements within the display area of ​​the first canvas need to be drawn in real time, or the adjacent graphic elements outside the display area may also be included, without the need to draw all the graphic elements at once, no matter how many graphic elements need to be drawn in total, the drawing performance of the graphic elements will not be affected.

[0054] The terminal device 1 can display the graphic elements drawn in the display area of ​​the first canvas in real time on the second canvas. The second canvas can be a canvas used to display the graphic elements drawn in the display area of ​​the first canvas. The second canvas can be displayed on the terminal interface of the terminal device 1. Optionally, the terminal interface can be a web interface of a web terminal. The specific process can also be referred to the relevant description of the following embodiments.

[0055] Therefore, the method provided by the present application can ensure superior performance of real-time drawing and display of graphic elements without limiting the total number of graphic elements that need to be drawn, making it applicable to almost all chart rendering and display scenarios.

[0056] Please refer to Figure 3, which is a flow chart of a data processing method provided in an embodiment of the present application. The execution subject in the embodiment of the present application can be a data processing device, which can be a computer device or a computer device cluster composed of multiple computer devices. The computer device can be a terminal device or other device, without limitation. As shown in Figure 3, the method may include:

[0057] Step S101: Acquire an original data set, where the original data set includes at least one item of original data.

[0058] In one embodiment, a data processing device may obtain a raw data set, which may include at least one item of raw data that needs to be displayed using a chart. In different application scenarios, the type of raw data in the raw data set may also be different. The type of raw data in the raw data set may be any type of data that needs to be displayed using a chart, depending on the actual application scenario. For example, the chart may be any type of chart, such as a bar chart, a line chart, a pie chart, a dot chart, or a bubble chart. The type of chart used to display raw data in this application may be determined based on the actual application scenario, and this application does not impose any restrictions on this.

[0059] For example, if a chart is needed to display a merchant's monthly sales, each piece of raw data in the original dataset could be the merchant's monthly sales, and one piece of raw data could be the merchant's monthly sales. If a chart is needed to display each employee's workload, each piece of raw data in the original dataset could be the workload of each employee, and one piece of raw data could be the workload of an employee, and so on. The number of raw data items in the original dataset can also be determined based on the actual application scenario.

[0060] Step S102 , obtaining a graphic element set by parsing the original data set based on the first canvas, wherein the graphic element set includes a plurality of graphic elements and first element positions respectively assigned to the plurality of graphic elements in the first canvas, and a first canvas size of the first canvas can be dynamically adjusted according to the plurality of graphic elements.

[0061] In one embodiment, the data processing device can parse the original data set based on the first canvas to obtain a graphic element set. The graphic element set can include multiple graphic elements and element positions respectively assigned to the multiple graphic elements in the first canvas. The element position corresponding to each graphic element in the first canvas can be referred to as the first element position. The multiple graphic elements can be used to draw a chart that displays (i.e., displays) the original data in the above-mentioned original data set. It can be understood that the chart is composed of a number of graphic elements, and the drawing and display of the corresponding chart can be achieved by drawing and displaying the graphic elements. Among them, the number of graphic elements in the graphic element set can also be determined according to the actual application scenario, and there is no limitation on this.

[0062] The first canvas may be a virtual canvas, which is a canvas used for drawing charts (i.e., drawing graphic elements). The size of the first canvas may be dynamically adjusted based on multiple graphic elements in the graphic element set. For example, the size of the first canvas may be dynamically adjusted to a canvas size capable of accommodating and drawing all of the multiple graphic elements based on the drawing area required by the multiple graphic elements (i.e., the area of ​​the positional area required to be occupied by the multiple graphic elements in the first canvas, which may be determined by the position and size of the first element corresponding to the multiple graphic elements). The canvas size of the first canvas may be referred to as the first canvas size, i.e., the first canvas size may be dynamically adjusted based on the multiple graphic elements.

[0063] For example, the process of obtaining the above-mentioned graphic element set by the data processing device through parsing the original data set based on the first canvas may include:

[0064] The data processing device can obtain the type of chart required to display the raw data in the raw data set. This type can be referred to as a target type. For example, the target type of the chart required to display the raw data can be selected by a user in the data processing device. There can be one or more target types. In other words, there can be one or more charts to be drawn and displayed. The specific number of chart types to be drawn and displayed can be determined based on actual application scenarios.

[0065] The data processing device may also obtain configuration data for a target type chart. If there are multiple target types, each target type may have a corresponding set of configuration data, and different target types may have different configuration data. The configuration data for a target type chart may include configuration information for graphical elements used to draw the chart. This configuration information may be used to indicate how to parse the corresponding graphical elements, specifically, what graphical elements to parse and the size of the graphical elements to be parsed. For example, the graphical elements may be points, lines, surfaces, circles, rings, rectangles, and other elements used to draw the chart.

[0066] Furthermore, if there are multiple target types, the original data set may include original data that needs to be displayed using charts of various target types, that is, each target type of chart may have its own corresponding original data in the original data set, and the original data corresponding to a chart of a target type is the original data that needs to be displayed using a chart of that target type.

[0067] The data processing device can parse the configuration data of the target type chart through the original data set, and can generate the above-mentioned multiple graphic elements in the graphic element set. For example, if the target type chart is a bar chart, and the original data set contains sales that need to be displayed using a bar chart, then the configuration data of the bar chart is parsed through a sales amount to obtain a column (such as a rectangular column) associated with the sales amount. The column can be a graphic element of the bar chart. Optionally, the width of the column can be a default setting in the configuration data of the bar chart, and the height of the column can be determined based on the value of the associated sales amount (i.e., the sales amount used to parse the column). For example, the height of the column can be used to represent the value of the associated sales amount. The larger the sales amount, the higher the height of the column. Conversely, the smaller the sales amount, the lower the height of the column. The specific proportional relationship between the height of the column and the value of the associated sales amount can also be configured in the configuration data of the bar chart. It can be seen that when the above-mentioned multiple graphic elements are obtained by parsing the configuration data of the original data set and the target type of chart, the size (i.e., the size, corresponding to the area required for subsequent drawing in the first canvas) and shape of the multiple graphic elements can all be determined.

[0068] From the above, it can be understood that in actual application scenarios, a graphic element in the graphic element set can be obtained by parsing one or more raw data in the original data set. Alternatively, the graphic element set can also include some graphic elements that are not obtained by parsing the raw data, but can be directly parsed based on the configuration data. Such graphic elements can be referred to as additional graphic elements. Such additional graphic elements can be some fixed graphic elements in the chart selected by the user, such as the coordinate axes in the chart or other default elements used to decorate or illustrate the chart. The parsed graphic element set can then be used to draw a chart of the target type selected by the user.

[0069] If a graphic element in the graphic element set is obtained by parsing one or more raw data in the original data set, it can be considered that there is an association relationship between the graphic element and the one or more raw data. Optionally, when parsing the graphic element set, the data processing device can also establish the association relationship between each parsed graphic element and each piece of raw data. In other words, a graphic element can have an association relationship with the raw data used to parse the graphic element.

[0070] In the process of parsing the above-mentioned multiple graphic elements, the present application can also parse the first canvas to obtain the first element positions corresponding to each of the multiple graphic elements in the first canvas. Here, it can be understood that the first element positions corresponding to each of the multiple graphic elements are assigned in the first canvas. At this time, the multiple graphic elements have not yet been drawn in the first canvas, and the first canvas does not yet contain the multiple graphic elements. That is, the above-mentioned graphic element set can also include the first element positions corresponding to each of the parsed graphic elements in the first canvas. A parsed graphic element can have a corresponding first element position on the first canvas, and the first element position corresponding to a graphic element can be the position where the graphic element is subsequently drawn in the first canvas. The first canvas is a canvas used to draw graphic elements (same as drawing charts). The first canvas is not a canvas directly used to display raw data through a drawn chart on a front-end interface (such as a terminal interface).

[0071] In one embodiment, the first element position of a graphic element can be determined based on the rectangular box corresponding to the graphic element. For example, the first element position of a graphic element can be the position range of a rectangular box determined by an element coordinate and the length and width of the graphic element. The element coordinate can be the position coordinate of the upper left corner of the rectangular box (or other corners, as long as the position range of the corresponding graphic element in the first canvas can be determined).

[0072] The first canvas may have a coordinate system, which may include a coordinate axis in a first direction and a coordinate axis in a second direction. The coordinate axis in the first direction may be referred to as the first coordinate axis, and the coordinate axis in the second direction may be referred to as the second coordinate axis. The first direction may be a horizontal direction, and thus the first coordinate axis may be the x-axis (horizontal axis). The second direction may be a vertical direction, and thus the second coordinate axis may be the y-axis (vertical axis). The element coordinates used to determine the first element position corresponding to the graphical element in the first canvas may be coordinates in the coordinate system.

[0073] The first canvas can be referred to as a virtual canvas. The size of the first canvas can be infinitely extended (e.g., both the length and width of the first canvas can be infinitely extended). In other words, the first canvas can be an infinitely large canvas, i.e., the size of the first canvas can be unlimited. The first canvas can exist in a CPU (central processing unit), and the data processing device can draw the graphic elements in the graphic element set in the first canvas. Therefore, it can be understood that the size of the first canvas can be a dynamic size, i.e., the size of the first canvas can be dynamically changed according to the actual application scenario.

[0074] Optionally, if the graphic element set includes graphic elements of multiple charts to be drawn, the data processing device can arrange and parse the positions of each of the multiple charts in the first canvas in sequence according to the order in which the multiple charts are selected (such as the order in which the user selects the multiple charts in sequence, and the multiple charts are the charts selected by the user for displaying the original data before the charts are parsed and drawn), and the charts are arranged in sequence without overlapping or blocking each other. The starting position of the first chart (i.e., the first chart selected and the first chart parsed) in the first canvas (i.e., the position where the subsequent drawing of the chart begins) can be the starting position of the first canvas (such as the position at the coordinate position (0, 0) in the first canvas); for subsequent charts, the starting position of the subsequent chart can be determined by the position range occupied by the previous chart in the first canvas, such as the starting position of the subsequent chart can be a position outside the position range occupied by the previous chart in the first canvas and at a certain interval distance from the position range (which can be a default interval distance, which is the interval distance between charts, such as a horizontal axis interval of 10 or a vertical axis interval of 10, etc.).

[0075] Among them, the position range occupied by a chart in the first canvas is the position range occupied by all graphic elements of the chart in the first canvas, and the position of each graphic element in a chart in the chart can be a system default setting, such as it can be configured in the configuration data of the chart. In other words, the position of each graphic element in a chart in the chart, and the relative position of each graphic element in the chart (such as the spacing between icon elements) can all be configured in the configuration data of the chart. Therefore, after determining the starting position of the chart in the first canvas, the first element position corresponding to each graphic element in the chart in the first canvas can be calculated (also referred to as parsed) starting from the starting position through the position of each graphic element in the chart and the relative position of each graphic element in the chart. The parsed first element position of each graphic element contained in each chart can be used for subsequent drawing (i.e. rendering) of the corresponding element positions of each graphic element contained in the chart in the first canvas.

[0076] For example, if the charts to be drawn include 5 charts (that is, there are 5 charts of the target type), and the 5 charts include chart t1, chart t2, chart t3, chart t4 and chart t5 that are selected in sequence, then the data processing device can parse the position of each chart in sequence on the first canvas according to the order in which each chart is selected, that is, the order in which each chart is selected can be used as the order in which each chart is parsed. This order can also be the order in which the each chart is arranged in the first canvas, that is, the each chart can be arranged regularly in the order in which they are selected.

[0077] For example, starting from the starting position of the first canvas (such as the position at the upper left corner of the first canvas, which can be the position at coordinates (0, 0)), the chart t1 can be first parsed into the position area (which can be a rectangular area) at the upper left corner of the first canvas. This position area is also the area used to draw the chart t1, that is, the position range of the chart t1 on the first canvas.

[0078] The data processing device may continue parsing below the location area where chart t1 is located to obtain the location area where chart t2 is located. The location area where chart t2 is located may be adjacent to the location area where chart t1 is located, i.e., the location area where chart t2 is located may be a location area adjacent to the location area where chart t1 is located. Optionally, any two adjacent (e.g., adjacent) charts may have a default spacing distance between them (this spacing distance may be a system default configuration). This spacing distance may be pre-set by the system based on actual application scenarios, i.e., the location area where chart t2 is located may have this spacing distance from the location area where chart t1 is located.

[0079] Similarly, the data processing device can continue parsing the area below the area where chart t2 is located to obtain the area where chart t3 is located, and further parse the area below the area where chart t3 is located to obtain the area where chart t4 is located, and further parse the area below the area where chart t4 is located to obtain the area where chart t5 is located. The intervals between charts t2 and t3, between charts t3 and t4, and between charts t4 and t5 can all be the default intervals set above.

[0080] Alternatively, in another feasible implementation, the maximum number of charts that can be arranged in a column on the first canvas can be limited. For example, if a column can only accommodate a maximum of three charts, then after charts t1, t2, and t3 are arranged and parsed in the first column according to the above principles, the remaining charts can be arranged starting from the second column. For example, charts t4 and t5 can be arranged and parsed in the second column (chart t5 can be arranged below chart t4).

[0081] Furthermore, if the charts to be drawn include charts t6 and t7 in addition to the five above, you can continue parsing below chart t5 in the second row to obtain the location of chart t6. At this point, there are three charts in the second row. Therefore, you can continue parsing in the third row of the first canvas to obtain the location of chart t7. If there are more charts to be parsed, you can continue parsing in this way.

[0082] Through the above process, the first element position corresponding to each graphic element in the graphic element set in the first canvas can be obtained through analysis.

[0083] The size of the first canvas may be extended (i.e., dynamically adjusted) to a size that can accommodate the entire set of graphic elements. The size that can accommodate the entire set of graphic elements is the size that can draw all the graphic elements in the set of graphic elements (i.e., the size that can accommodate all the charts composed of the graphic elements in the set of graphic elements). This size can be referred to as the target size. In other words, the size of the first canvas in this application can be adaptively extended according to the size of the total area required to be occupied by all the selected charts to be drawn. The target size to which it is extended can be the size that can accommodate (it can be just enough to accommodate, or it can be larger than the size that can be just enough to accommodate, which can be determined according to the actual application scenario) all the charts to be drawn.

[0084] Step S103: determine the display area in the first canvas, and based on the display area and the first element positions corresponding to the plurality of graphic elements, select a first graphic element from the graphic element set, wherein the first element position of the first graphic element satisfies a preset position relationship with the display area.

[0085] In one embodiment, the data processing device may determine a display area in the first canvas. The display area may be an area in the first canvas where graphic elements that need to be displayed in a front-end interface (such as a terminal interface) are located. Optionally, the display area may be a rectangular area.

[0086] Among them, the position of the display area in the first canvas can be dynamically changed. The display area in the first canvas obtained here can be the current latest display area in the first canvas. The current latest display area in the first canvas can be called the target display area, that is, the display area obtained here can be the target display area. It should be understood that each time the position of the display area in the first screen changes and a new display area is obtained, the principle of processing the new display area is the same as the principle of processing the target display area. The target display area can be the latest display area at any moment. Among them, how the display area of ​​the first canvas changes specifically, and how to determine the position of the changed display area in the first canvas specifically, can be referred to the relevant description in the embodiment corresponding to Figure 9 below.

[0087] In the present application, the graphic elements drawn in the display area of ​​the first canvas can be displayed in the second canvas, and the second canvas can be an actual canvas for displaying the original data through the drawn chart (the same as the drawn graphic elements). The canvas size of the second canvas can be referred to as the second canvas size, and the second canvas size of the second canvas can correspond to the display area in the first canvas, such as the size of the display area of ​​the first canvas and the size of the second canvas can be the same. The second canvas is a real canvas, and the second canvas can be a canvas for actually displaying the drawn graphic elements on the terminal interface. In other words, the second canvas can be used to display the graphic elements drawn in the display area of ​​the first canvas on the front-end interface.

[0088] Optionally, the size of the second canvas may be a fixed size, or the size of the second canvas may be limited, i.e., the second canvas may have a maximum fixed size. The size of the display area of ​​the first canvas may be determined by the size of the second canvas, e.g., the size of the display area of ​​the first canvas may be consistent with (i.e., the same as) the size of the second canvas.

[0089] Among them, the size of the display area of ​​the first canvas can usually be smaller than the size of the first canvas (that is, the size of the display area can be smaller than the above-mentioned target size), or, in some special cases, the size of the display area of ​​the first canvas can also be equal to the size of the first canvas (this application does not focus on this case).

[0090] Optionally, the size of the second canvas in the terminal interface of different terminal devices can be the same or different. For example, the size of the second canvas can be adapted to the size of the terminal device when displaying content, that is, the size of the second canvas can be determined based on the configuration of the terminal device itself. Alternatively, the size of the second canvas can be pre-set by the relevant developers of the system.

[0091] In this application, since the size of the first canvas can be extended infinitely, no matter how many charts to be drawn or how many graphic elements the chart contains, it can be achieved through the first canvas. That is, this application has no restrictions on the number of charts and graphic elements that need to be drawn. This application supports the drawing and display of any number of charts and graphic elements.

[0092] Moreover, when drawing graphic elements, the present application can filter out the graphic elements that currently need to be drawn through the display area of ​​the first canvas. The filtered graphic elements that currently need to be drawn can be referred to as first graphic elements. There can be one or more first graphic elements, and the number of the first graphic elements can be determined according to the actual application scenario.

[0093] Among them, the first element position corresponding to the first graphic element and the display area can satisfy a preset position relationship. It can be understood that this application can filter out the first graphic element from the graphic element set through the preset position relationship, as described below.

[0094] The above-mentioned first graphic element may at least include the filtered graphic elements whose corresponding first element position is located within the display area, or in addition to this, the first graphic element may also include the graphic elements whose corresponding first element position is located outside the display area, but whose corresponding first element position is adjacent to the display area. In other words, the first graphic element will definitely include the graphic elements whose corresponding first element position is located within the display area, and whether the first graphic element will also include other graphic elements (such as graphic elements whose corresponding first element position is located outside the display area, but whose corresponding first element position is adjacent to the display area) needs to be determined according to the actual application scenario. When the application actually draws the graphic elements, no matter how many graphic elements are in the graphic element set and how large the size of the first canvas is extended to (that is, no matter how large the target size is), the application only needs to draw the filtered first graphic elements. Therefore, the method provided by the present application can ensure high performance in drawing the graphic elements in the graphic element set.

[0095] For example, the process of selecting the first graphic element to be drawn from the graphic element set based on the display area of ​​the first canvas and the first element position corresponding to each graphic element in the first canvas may include:

[0096] The first canvas can be divided into M layers of sub-canvases according to a tree structure, where M is a positive integer. The specific value of M can be determined according to the actual application scenario. The tree structure is constructed by progressively dividing the first canvas into sub-canvases layer by layer. As the sub-canvas level increases, the size of the divided sub-canvases can also become smaller and smaller, that is, the division of the sub-canvases can become finer and finer, and the merger of all sub-canvases at any level can be the entire first canvas. Specifically, any sub-canvas of the i-th layer can be divided into N sub-canvases of the i+1-th layer. The N sub-canvases can all be the next sub-canvas of any sub-canvas, and the N sub-canvases can all have a connection relationship with any sub-canvas in the tree structure. Therefore, it can be understood that each next sub-canvas of any sub-canvas belongs to a local canvas within any sub-canvas. i and N are both positive integers, and i can be less than M. The first canvas may be understood as a special sub-canvas of the first layer among the M layers of sub-canvases, that is, the first layer of sub-canvases may only include the first canvas.

[0097] The i+1th layer can be any layer except the last layer in the M layers. The value of N can also be determined according to the actual application scenario. If the above-mentioned tree structure adopts a quadtree, then N can be equal to 4, that is, a node (non-leaf node) of the tree structure can be connected to 4 nodes, and any node in the tree structure is used to represent (or be understood as a record) a corresponding sub-canvas. In this application, it can be preferred that N is equal to 4, that is, the sub-canvas of each layer is divided into 4. Since the division of this seed canvas is symmetrical and the number of divisions is appropriate, the effect of traversing the sub-canvas is relatively good.

[0098] Therefore, the data processing device can traverse the above-mentioned M-layer sub-canvases in the tree structure layer by layer from top to bottom, and can filter out the above-mentioned first graphic element to be drawn from the graphic element set through the traversed sub-canvases, the above-mentioned acquired display area (such as the target display area) and the corresponding element positions of each graphic element in the first canvas, as described below.

[0099] The data processing device can perform an intersection calculation between the traversed sub-canvas and the display area obtained above (each time a sub-canvas is traversed, the intersection calculation can be performed on the traversed sub-canvas and the display area), that is, determine whether there is an intersection between the traversed sub-canvas and the display area (that is, whether there is an overlap). If any sub-canvas of the traversed i-th layer (that is, any sub-canvas of any layer) does not intersect with the display area, indicating that the position of any sub-canvas is far away from the position of the display area, then the traversal of the next sub-canvas of any sub-canvas can be stopped. Moreover, it can be understood that by stopping the traversal of the next sub-canvas of any sub-canvas, of course, the sub-canvases connected in sequence after the next sub-canvas of any sub-canvas will no longer be traversed.

[0100] If any sub-canvas of the traversed i-th layer (i.e., any sub-canvas of any layer) intersects with the display area, indicating that the position of the sub-canvas is close to the position of the display area, the traversal can continue to the next sub-canvas of the sub-canvas, and so on, until the sub-canvas of the M-th layer is traversed.

[0101] The data processing device may use the sub-canvas traversed in the M-th layer of sub-canvases (i.e., the last layer of sub-canvases) and intersecting with the display area as the sub-canvas to be drawn. There may be one or more sub-canvases to be drawn. Therefore, the data processing device may use the graphic elements whose element positions are within the sub-canvas to be drawn as the first graphic elements to be filtered out. The first graphic elements filtered out in this way may include all graphic elements whose first element positions are within the display area, and may also include graphic elements whose first element positions are outside the display area but near the display area (also referred to as adjacent to the display area), because the area combined by the sub-canvases to be drawn may be slightly larger than the display area but definitely includes the display area.

[0102] It can be seen that the present application can filter out the first graphic element associated with the target display area by traversing the M-layer sub-canvases and determining whether the traversed sub-canvases intersect with the target display area. In this case, the preset positional relationship between the first element position corresponding to the first graphic element and the display area can include: in the M-layer sub-canvas, the sub-canvas where the first graphic element is located intersects with the display area.

[0103] Please refer to Figures 4a and 4b. Figure 4a is a schematic diagram of a scenario for dividing a first canvas according to an embodiment of the present application, and Figure 4b is a schematic diagram of a tree structure according to an embodiment of the present application. As shown in Figure 4a, N can be equal to 4, meaning the first canvas can be divided into four equal parts, and M can be equal to 3, meaning the first canvas is divided into three layers of sub-canvases.

[0104] For ease of description, the vertices of each sub-canvas obtained by dividing the first canvas (including vertices d11 to d15, vertices d21 to d25, vertices d31 to d35, vertices d41 to d45, and vertices d51 to d55) are introduced here for illustration. However, it is understandable that in actual processing scenarios, the sub-canvases may be recorded and identified not by their vertices, but by other forms, and this application does not impose any restrictions on this. Among them, vertex d33 can be the center point of the first canvas.

[0105] As shown in FIG4b , each layer of sub-canvases can be more intuitively described in conjunction with FIG4b . Each divided sub-canvas can be a rectangular canvas. In particular, the first layer of sub-canvases can be the first canvas itself. Next, the first canvas can be divided into 4 equal parts to obtain 4 sub-canvases in the second layer of sub-canvases, which may include: a sub-canvas B1 with a closed rectangular area obtained by connecting vertex d11, vertex d13, vertex d33, vertex d31, and vertex d11 in sequence; a sub-canvas B2 with a closed rectangular area obtained by connecting vertex d13, vertex d15, vertex d35, vertex d33, and vertex d13 in sequence; a sub-canvas B3 with a closed rectangular area obtained by connecting vertex d31, vertex d33, vertex d53, vertex d51, and vertex d31 in sequence; and a sub-canvas B4 with a closed rectangular area obtained by connecting vertex d33, vertex d35, vertex d55, vertex d53, and vertex d33 in sequence.

[0106] Furthermore, the four sub-canvases in the second-layer sub-canvas can be divided into four equal parts, thereby obtaining the next sub-canvas corresponding to each sub-canvas in the second-layer sub-canvas in the third-layer sub-canvas. For example, the four next sub-canvases obtained by dividing sub-canvas B1 may include: a sub-canvas B11 having a closed rectangular area formed by sequentially connecting vertices d11, d12, d22, d21, and d11; a sub-canvas B12 having a closed rectangular area formed by sequentially connecting vertices d12, d13, d23, d22, and d12; a sub-canvas B13 having a closed rectangular area formed by sequentially connecting vertices d21, d22, d32, d31, and d21; and a sub-canvas B14 having a closed rectangular area formed by sequentially connecting vertices d22, d23, d33, d32, and d22.

[0107] Similarly, the four next sub-canvases obtained by dividing sub-canvas B2 may include: a sub-canvas B21 with a closed rectangular area obtained by connecting vertex d13, vertex d14, vertex d24, vertex d23, and vertex d13 in sequence; a sub-canvas B22 with a closed rectangular area obtained by connecting vertex d14, vertex d15, vertex d25, vertex d24, and vertex d14 in sequence; a sub-canvas B23 with a closed rectangular area obtained by connecting vertex d23, vertex d24, vertex d34, vertex d33, and vertex d23 in sequence; and a sub-canvas B24 with a closed rectangular area obtained by connecting vertex d24, vertex d25, vertex d35, vertex d34, and vertex d24 in sequence.

[0108] In addition, the four next sub-canvases obtained by dividing the sub-canvas B3 may include: a sub-canvas B31 with a closed rectangular area obtained by connecting vertex d31, vertex d32, vertex d42, vertex d41, and vertex d31 in sequence; a sub-canvas B32 with a closed rectangular area obtained by connecting vertex d32, vertex d33, vertex d43, vertex d42, and vertex d32 in sequence; a sub-canvas B33 with a closed rectangular area obtained by connecting vertex d41, vertex d42, vertex d52, vertex d51, and vertex d41 in sequence; and a sub-canvas B34 with a closed rectangular area obtained by connecting vertex d42, vertex d43, vertex d53, vertex d52, and vertex d42 in sequence.

[0109] Moreover, the four next sub-canvases obtained by dividing the sub-canvas B4 may include: a sub-canvas B41 of a closed rectangular area obtained by connecting vertex d33, vertex d34, vertex d44, vertex d43, and vertex d33 in sequence; a sub-canvas B42 of a closed rectangular area obtained by connecting vertex d34, vertex d35, vertex d45, vertex d44, and vertex d34 in sequence; a sub-canvas B43 of a closed rectangular area obtained by connecting vertex d43, vertex d44, vertex d54, vertex d53, and vertex d43 in sequence; and a sub-canvas B44 of a closed rectangular area obtained by connecting vertex d44, vertex d45, vertex d55, vertex d54, and vertex d44 in sequence.

[0110] Therefore, the present application can traverse the above three layers of sub-canvases layer by layer. First, the first canvas in the first layer of sub-canvases is traversed. Since the traversed first canvas intersects with the display area in Figure 4a, the next sub-canvases of the first canvas in the second layer of sub-canvases are traversed, that is, sub-canvases B1 to B4 can be traversed in sequence. Since sub-canvases B1 and B3 do not intersect with the display area, there is no need to traverse the next sub-canvases of sub-canvases B1 and B3 in the third layer of sub-canvases, which can greatly reduce the workload of sub-canvas traversal. Moreover, since sub-canvases B2 and B4 both intersect with the display area, the next sub-canvases of sub-canvas B2 and sub-canvas B4 in the third layer of sub-canvases can be traversed, that is, sub-canvases B21 to B24 and sub-canvases B41 to B44 can be traversed.

[0111] Since the third layer of sub-canvases is the last layer of sub-canvases, the sub-canvases B23, B24, B41 and B42 that intersect with the display area among the sub-canvases B21 to B24 and B41 to B44 traversed in the third layer of sub-canvases can be regarded as sub-canvases to be drawn, so that the graphic elements whose first element positions are within the sub-canvases B23, B24, B41 and B42 can be regarded as the first graphic elements selected above.

[0112] By sequentially traversing and filtering the divided sub-canvases layer by layer without directly traversing all the graphic elements, the efficiency of filtering the graphic elements in the display area can be improved.

[0113] Or, optionally, if the acquired display area (such as the target display area) does not have a previous display area, that is, the target display area is the display area initially (such as the first time) acquired in the first canvas, that is, the target display area is the display area when no changes were made at the beginning (which can be called the initial display area, and the initial display area can be the area in the upper left part of the first canvas, such as the upper left corner of the initial display area can coincide with the upper left corner of the first canvas), then the present application can adopt the above-mentioned process to filter out the above-mentioned first graphic element by traversing M layers of sub-canvases and determining whether the traversed sub-canvases intersect with the target display area.

[0114] If the acquired display area (such as the target display area) has a previous display area, that is, the target display area is not the display area initially (such as the first time) acquired in the first canvas (that is, the target display area is not the above-mentioned initial display area), that is, the target display area is the display area obtained after changes (the number of changes is unlimited) based on the display area acquired for the first time, then when filtering the graphic elements associated with the target display area (such as when filtering the first graphic element through the target display area), the present application can also reuse the graphic elements that have been drawn in the previous display area of ​​the target display area before, thereby further improving the efficiency of drawing the graphic elements and improving the timeliness of displaying the graphic elements. Among them, the previous display area of ​​the target display area can be the display area before the display area in the first canvas changes to the target display area. More specifically, the previous display area of ​​the target display area can be the latest display area before the display area in the first canvas changes to the target display area, that is, the target display area can be the one obtained after the previous display area changes again.

[0115] In this case (i.e., when there is a previous display area in the target display area), the process of filtering out the first graphic element to be drawn from the graphic element set through the target display area and the first element position corresponding to each graphic element in the graphic element set in the first canvas may include: the data processing device may filter out the first graphic element currently required to be drawn from the graphic element set through the target display area and the previous display area of ​​the target display area, as described below.

[0116] The data processing device can obtain the overlapping area between the target display area and the previous display area, that is, the target display area and the previous display area both contain the overlapping area, and can use the area in the target display area except the overlapping area as the update area, which is the incremental area of ​​the target display area compared with the previous display area.

[0117] Furthermore, the data processing device can filter out the first graphic element from the graphic element set through the update area in the first canvas and the first element position corresponding to each graphic element in the first canvas. Optionally, the process can be the same as the principle of filtering out the first graphic element by traversing the M-layer sub-canvases and judging whether the traversed sub-canvases intersect with the target display area. Here, the first graphic element can be filtered out by traversing the M-layer sub-canvases layer by layer and judging whether the traversed sub-canvases intersect with the update area. The first graphic elements filtered out in this way can include graphic elements whose first element position is located in the sub-canvas traversed in the M-th layer sub-canvas and intersects with the update area. In this case, the preset position relationship between the first element position corresponding to the first graphic element and the display area can include: in the M-th layer sub-canvas, the sub-canvas where the first graphic element is located intersects with the update area in the display area.

[0118] Please refer to Figures 5a and 5b. Figure 5a is a schematic diagram of a scene of element reuse provided by an embodiment of the present application, and Figure 5b is a schematic diagram of another scene of element reuse provided by an embodiment of the present application. As shown in Figure 5a, the old viewport can be the previous display area of ​​the above-mentioned target display area, and the new viewport can be the target display area. There is an overlapping area between the target display area and the previous display area. The overlapping area can be the pixel reuse area in Figure 5a. The pixel reuse area is an area in which the relevant graphic elements drawn for the previous display area can be reused. The area in the new viewport other than the pixel reuse area (i.e., the incremental drawing area) can be the above-mentioned update area.

[0119] It should be noted here that drawing a graphic element may include generating each pixel point (which may be referred to as pixel for short) that constitutes the graphic element. Each pixel point may have its own pixel value and pixel position. The pixel position may be the position where the corresponding pixel point needs to be drawn in the first canvas, that is, the pixel position may be the position where the corresponding pixel point is located in the first canvas.

[0120] Therefore, the present application can reuse in the pixel reuse area each pixel point that has been drawn in the previous display area and is located in the pixel reuse area.

[0121] Among them, there can be two concepts in the pixel reuse process of this application, one is the main canvas (which can be called the main canvas), and the other is the off-screen canvas (which can be called the off-screen canvas). The main canvas can be used to draw graphic elements for actual display to the user. The main canvas can be mounted on an HTML (a markup language) document; while the off-screen canvas may not be mounted on a document. The off-screen canvas can be an element specifically used to store pixel information (such as information about each pixel point used to constitute a graphic element drawn in the display area, which information can include the pixel value and pixel position of the pixel point), and is not used for actual display on the screen (such as the terminal interface).

[0122] As shown in Figure 5b, the present application can reuse the various pixel points generated in the off-screen canvas in the above-mentioned pixel reuse area of ​​the previous display area into the pixel reuse area of ​​the target display area in the main canvas, and can draw the graphic elements in the incremental drawing area of ​​the target display area in the main canvas in real time, thereby realizing the drawing and display of the graphic elements in the target display area.

[0123] Through the above process, the first graphic element that needs to be drawn currently can be filtered out. The filtered out first graphic element can be a graphic element whose element position is located in the sub-canvas of the M-th layer and intersects with the target display area (that is, the graphic element associated with the target display area), or the filtered out first graphic element can be a graphic element whose element position is located in the sub-canvas of the M-th layer and intersects with the above-mentioned update area (that is, the graphic element associated with the update area).

[0124] The present application uses a tree structure to traverse the sub-canvas, and can quickly filter out the graphic elements associated with the target display area or update area from a large number of graphic elements in the graphic element set, that is, quickly filter out the first graphic element that needs to be drawn currently.

[0125] Optionally, if the number of graphic elements in the graphic element set is not so large (such as less than a preset reference number), and it is necessary to obtain the graphic elements associated with the target display area, then each graphic element in the graphic element set can be directly traversed, and an intersection calculation can be performed on the traversed graphic elements and the target display area (that is, an intersection calculation is performed between the first element position corresponding to the graphic element and the target display area to determine whether the position area occupied by the graphic element in the first canvas intersects with the target display area, that is, whether there is an overlap), and the graphic elements that intersect with the target display area (that is, the graphic elements whose corresponding first element position intersects with the target display area) can be used as the first graphic elements that are filtered out. At this time, the first graphic elements that are filtered out can only include graphic elements within the target display area, but not graphic elements outside the target display area. In this case, the preset position relationship between the first element position corresponding to the first graphic element and the display area can include: the first element position corresponding to the first graphic element is located within the display area.

[0126] Similarly, if the number of graphic elements in the graphic element set is not so large (such as less than the preset reference number), and it is necessary to obtain the graphic elements associated with the update area, then it is also possible to directly traverse each graphic element in the graphic element set, and perform intersection calculations on the traversed graphic elements and the update area, and the graphic elements that intersect with the update area can be used as the first filtered graphic elements. In this case, the filtered first graphic elements can only include all the graphic elements in the update area.

[0127] Step S104 : drawing the first graphic element in the first canvas based on the first element position corresponding to the first graphic element.

[0128] In one embodiment, the data processing device can draw (i.e., render) the first graphic element at the first element position corresponding to the first graphic element in the first canvas, that is, each first graphic element can be drawn at its respective corresponding first element position in the first canvas.

[0129] Step S105 : taking the first graphic element located in the display area as the second graphic element, and determining target original data corresponding to the second graphic element from the original data set.

[0130] In one embodiment, the first graphic elements drawn and located in the display area may be referred to as second graphic elements. Optionally, the second graphic element may be part of the first graphic element, or the second graphic element may be all of the first graphic element.

[0131] If the above-mentioned first graphic element is a graphic element associated with the filtered target display area (such as a graphic element in the sub-canvas of the Mth layer that intersects with the target display area), the second graphic element may include a graphic element drawn within the entire target display area.

[0132] If the first graphic element is a graphic element associated with the filtered update area (such as a graphic element in the sub-canvas of the M-th layer that intersects with the update area), the second graphic element may include a graphic element drawn in the entire update area.

[0133] The data processing device may also determine target raw data corresponding to the second graphical element from the raw data set. The target raw data is raw data that is filtered from the raw data set and currently needs to be displayed (i.e., displayed). The target raw data may be raw data in the raw data set that has an association with the second graphical element. That is, the second graphical element may be parsed from the target raw data, and the target raw data may be displayed by drawing the second graphical element. There may be one or more target raw data, and the specific number of target raw data may be determined based on the actual application scenario.

[0134] Through the above process, it can be known that the present application can filter out the second graphic elements that need to be displayed in the second canvas in two steps, or it can filter out the second graphic elements that need to be displayed in the second canvas in one step. For example, for the above-mentioned method of first filtering the first graphic element and then filtering the second graphic element through the M-layer sub-canvas, since the first graphic element may include graphic elements outside the target display area, it is necessary to filter out the second graphic element in two steps, that is, it is necessary to further filter out the second graphic element through the first graphic element. As for the above-mentioned method of directly traversing the graphic elements in the graphic element set to directly filter out the first graphic element in the target display area, since the first graphic element will not include graphic elements outside the target display area, the second graphic element can be directly obtained in one step, that is, the first graphic element can be directly used as the second graphic element without further filtering out the second graphic element through the first graphic element.

[0135] Step S106 : displaying the target original data in a second canvas through a second graphic element, wherein a second canvas size of the second canvas corresponds to the display area.

[0136] In one embodiment, the data processing device can display the target raw data in a second canvas by drawing a second graphical element. For example, the target raw data and the second graphical element can be displayed in association in the second canvas, such as by displaying the target raw data next to (i.e., near) the second graphical element, or by displaying the target raw data within the second graphical element. The drawn second graphical element can constitute part of a drawn chart. The second graphical element and the target raw data can be displayed simultaneously in the second canvas. For example, if a target raw data is a sales figure, and the second graphical element associated with the target raw data is a column, the sales figure can be displayed above the column in the second canvas. For another example, if a target raw data is a sales figure, and the second graphical element associated with the target raw data is a pie chart, the sales figure can be displayed within the pie chart in the second canvas. The second canvas is the actual canvas used to display the graphical elements drawn within the display area of ​​the first canvas in the front-end interface. The size (i.e., the size) of the display area in the first canvas can be the same as the size of the second canvas.

[0137] Among them, if the above-mentioned first graphic element is a graphic element associated with the filtered target display area (such as a graphic element in the sub-canvas of the Mth layer that intersects with the target display area), the entire second canvas can be used to display the second graphic element and the target original data.

[0138] If the above-mentioned first graphic element is a graphic element associated with the filtered update area (such as a graphic element in the sub-canvas of the M-th layer that intersects with the update area), the data processing device can display the second graphic element drawn in the update area and the target original data in the second canvas, and can display the graphic element (which can be called the drawn graphic element) that has been drawn in the above-mentioned overlapping area in the previous display area of ​​the target display area (that is, the overlapping area between the target display area and the previous display area of ​​the target display area) in the second canvas, and the original data associated with the drawn graphic element. The original data associated with the drawn graphic element is the original data that has an associated relationship with the drawn graphic element.

[0139] In other words, when changing from the previous display area to the target display area, the graphic elements in the overlapping area between the target display area and the previous display area do not need to be redrawn, but the graphic elements already drawn in the overlapping area of ​​the previous display area can be directly reused, thereby reducing the overhead of drawing the graphic elements and improving the efficiency of drawing and displaying the graphic elements.

[0140] Alternatively, in one embodiment, the corresponding graphic element obtained by parsing the original data may also include the original data, or may be used to indicate the original data. Therefore, in this case, the drawn graphic element may also be directly displayed in the second canvas without the need to additionally display the original data associated with the drawn graphic element. This can be flexibly configured according to the actual application scenario and is not limited thereto.

[0141] The display mode of the second graphic element in the second canvas may be the same as the display mode of the second graphic element in the display area of ​​the first canvas.

[0142] Alternatively, in another embodiment, when displaying the second graphical element in the second canvas, the display mode of the second graphical element (i.e., the mode in which the drawn second graphical element is presented in the first canvas) can be adjusted first, so that the target original data is displayed in the second canvas through the adjusted second graphical element, that is, the adjusted second graphical element is displayed in the second canvas. In this case, the mode in which the second graphical element is displayed in the second canvas can be different from the mode in which the second graphical element is presented in the display area of ​​the first canvas. For example, the color or style (such as a cartoon style or a sketch style) of the second graphical element can be adjusted to a specific color or a specific style, so that the target original data can be displayed in the second canvas through the second graphical element with the color or style adjusted. Furthermore, if the display style of the second graphical element is adjusted, the target original data can also be displayed in the second canvas in the same style as the adjusted second graphical element. Specifically, how the second graphical element is displayed in the second canvas can be set according to actual application requirements.

[0143] Please refer to Figure 6, which is a schematic diagram of a scenario for obtaining the display position of a graphic element in the second canvas provided by an embodiment of the present application. As shown in Figure 6, the first canvas and the second canvas may be in different coordinate systems, wherein the display position of the graphic element in the second canvas may be the element position corresponding to the graphic element in the second canvas, and the element position corresponding to the graphic element in the second canvas may be referred to as the second element position, which may be the position area of ​​the graphic element in the second canvas. Optionally, the origin of the coordinate system of the first canvas may be at the lower left corner (i.e., the lower left top corner) of the first canvas, and the origin of the coordinate system of the second canvas may also be at the lower left corner (i.e., the lower left top corner) of the second canvas.

[0144] Therefore, if the display area of ​​the first canvas contains a graphic element Q, the position coordinates of the graphic element Q in the coordinate system of the first canvas can be (x1, y1). The specific values ​​of x1 and y1 can be determined based on the actual application scenario. The position coordinates (x1, y1) can be the position coordinates of the upper left corner (i.e., the top left corner) of the rectangular area where the graphic element Q is located in the first canvas.

[0145] Here, the distance between the upper left corner (i.e., the upper left corner) of the display area in the first canvas and the upper edge (i.e., the upper line) of the first canvas can be dy, and the distance between the upper left corner (i.e., the upper left corner) of the display area in the first canvas and the left edge (i.e., the left line) of the first canvas can be dx.

[0146] Therefore, the corresponding display position of the graphic element Q in the second canvas can be the position indicated by the position coordinates (x1-dx, y1-dy) (for example, the position area of ​​the graphic element Q in the second canvas indicated by the position coordinates and the width and height of the graphic element Q can be a rectangular area, and the width and height of the graphic element Q can be known when the graphic element Q is parsed), and the position coordinates (x1-dx, y1-dy) can be the position coordinates of the upper left corner (i.e., the upper left corner) of the rectangular area where the graphic element Q is located in the second canvas. That is, the horizontal coordinate of the upper left corner of the rectangular area where the graphic element Q is located in the second canvas can be the difference obtained by subtracting dx from x1, and the vertical coordinate of the upper left corner of the rectangular area where the graphic element Q is located in the second canvas can be the difference obtained by subtracting dy from y1.

[0147] It is understandable that each graphic element drawn in the display area of ​​the first canvas can be displayed at a corresponding position in the second canvas according to the above principle.

[0148] Please refer to Figure 7, which is a schematic diagram of the architecture of a business architecture for drawing graphic elements provided by an embodiment of the present application. As shown in Figure 7, the business architecture of the present application may include a business layer, an Echarts layer, and a rendering engine. The business layer may provide configuration items for the chart, which may be various configuration items for the chart in the configuration data of the chart.

[0149] Among them, the Echarts layer can obtain (such as parsing) various graphic elements that constitute the chart and can be recognized by the rendering engine (which may include various graphic elements in the above-mentioned graphic element set) based on the Echarts chart library tool. The graphic elements may include Rect (rectangle), Circle (circle), Text (text), Line (line) and other graphic elements.

[0150] In addition, the rendering engine originally used in Echarts can be replaced with the new rendering engine provided by this application. The new rendering engine of this application can be used to draw graphic elements on a virtual canvas (i.e., the first canvas), and when drawing graphic elements, it can only be used to draw graphic elements within the display area of ​​the virtual canvas or / and adjacent to the display area in real time, and the graphic elements drawn in the virtual canvas can be displayed in real time on the actual canvas (i.e., the second canvas).

[0151] Therefore, it can be understood that the new rendering engine can obtain a list of all elements, which can be the above-mentioned set of graphic elements, and the list of all elements can contain the graphic elements of all charts to be drawn. The new rendering engine of the present application can also filter out a list of in-viewport elements from the list of all elements, and the list of in-viewport elements can include the above-mentioned first graphic element to be drawn that is filtered out based on the display area of ​​the first canvas. Then, the new rendering engine can render (i.e., draw) the graphic elements in the in-viewport element list according to the method described above.

[0152] To summarize the above description, the present application does not limit the total number of charts and graphic elements that can be drawn, and by only drawing graphic elements within the display area or / and adjacent to the display area, it does not affect the overall performance of drawing graphic elements. Therefore, the method of the present application can ensure superior performance in drawing and displaying charts.

[0153] Furthermore, in existing solutions, when implementing big data, multi-dimensional, and multi-faceted visualization analysis on the web side of the browser, a large number of charts need to be drawn at one time, and the number of these charts is in the tens of thousands. Therefore, a large number of graphic elements need to be generated at one time, causing the browser to be severely stuck or even crash. In addition, the browser's canvas also has a limit on the pixel size of the total graphic elements that need to be rendered. Therefore, when there are many charts, the browser will be unable to draw. The above-mentioned method of the present application provides a visualization rendering engine, which can solve these two problems at the same time. The visualization rendering engine of the present application can quickly draw thousands of charts without being limited by the pixel size of the browser and will not cause any lag.

[0154] Please refer to Figure 8, which is a logical diagram of displaying raw data provided by an embodiment of the present application. As shown in Figure 8, the present application can parse the raw data set based on a first canvas to obtain a set of graphical elements. The set of graphical elements includes multiple graphical elements obtained by parsing and the first element position assigned to each graphical element in the first canvas. The data processing device can filter out a first graphical element from the multiple graphical elements based on the first element position corresponding to each graphical element in the first canvas and the position of the display area in the first canvas. The first element position corresponding to the graphical element can have a preset positional relationship with the display area. The data processing device can draw the first graphical element in the first canvas and define the first graphical element of the drawn first graphical elements that is located in the display area as the second graphical element. The data processing device can also determine the target raw data corresponding to the second graphical element from the raw data set, and thus display the corresponding target raw data in the second canvas via the second graphical element. For example, the target raw data can be displayed within the second graphical element in the second canvas. Alternatively, in actual application scenarios, the target raw data can be displayed outside the second graphical element at a position adjacent to the second graphical element.

[0155] The present application can draw graphic elements on a first canvas. Since the size of the first canvas can be dynamically adjusted, no matter how many graphic elements need to be drawn, they can be implemented on the first canvas of dynamic size, so that the present application can have no limit on the number of graphic elements to be drawn; and the first canvas can also have a display area. The present application can filter out the first graphic element that currently needs to be drawn from the full set of graphic elements based on the display area. The first graphic element corresponds to the first element position in the first canvas and the display area. The preset position relationship between the first graphic element and the display area satisfies the preset position relationship, so that only the first graphic element associated with the display area can be drawn subsequently, without having to draw all the graphic elements in the graphic element set at one time. Then, in the second canvas actually used to display the original data, the corresponding target original data can be displayed by drawing the second graphic element located in the display area. Therefore, the efficiency of drawing the graphic elements is improved, and the timeliness of displaying the graphic elements is improved. In summary, the method provided by the present application can improve the performance of drawing and displaying graphic elements.

[0156] Please refer to Figure 9, which is a flow chart of a method for obtaining a display area provided by an embodiment of the present application. As shown in Figure 9, the method may include:

[0157] Step S201 : obtaining a first distance scrolled by the first scroll bar and a second distance scrolled by the second scroll bar.

[0158] In one embodiment, the above-mentioned second canvas can be displayed on a terminal interface, and the terminal interface can also include (such as displaying) a first scroll bar and a second scroll bar. The first scroll bar can be used to scroll the display area of ​​the first canvas in a first direction (such as a horizontal direction) (which can be understood as scrolling the position of the display area on a first coordinate axis (such as a horizontal axis)), and the second scroll bar can be used to scroll the display area of ​​the first canvas in a second direction (such as a vertical direction) (which can be understood as scrolling the position of the display area on a second coordinate axis (such as a vertical axis)).

[0159] Among them, the above-mentioned target size to which the first canvas is extended may include the size to which the first canvas is extended in the first direction and the size to which the first canvas is extended in the second direction. The size to which the first canvas is extended in the first direction may be the length to which the first canvas is extended, and the size to which the first canvas is extended in the second direction may be the width to which the first canvas is extended.

[0160] The total scrolling distance of the first scroll bar (which can be understood as the total length of the first scroll bar) can be equal to the size of the first canvas extended in the first direction, that is, the length of the first canvas; the total scrolling distance of the second scroll bar (which can be understood as the total length of the second scroll bar) can be equal to the size of the first canvas extended in the second direction, that is, the width of the first canvas.

[0161] Thus, the graphic elements at each element position in the first canvas can be scrolled in the first direction through the first scroll bar, and the graphic elements at each element position in the first canvas can be scrolled in the second direction through the second scroll bar. By combining the first scroll bar and the second scroll bar, the graphic elements at all element positions in the first canvas can be scrolled.

[0162] From the above, it can be understood that the user is supported in scrolling the first scroll bar and the second scroll bar in the terminal interface (the two scroll bars can be scrolled independently) to display different graphical elements drawn at different positions on the first canvas. In fact, the user does not need to be aware of the existence of the first canvas. In terms of user perception, the user can perceive that the first scroll bar and the second scroll bar can display charts at different positions.

[0163] Therefore, the data processing device can obtain the distance the first scroll bar is currently scrolled (which may be referred to as the first distance), and can also obtain the distance the second scroll bar is currently scrolled (which may be referred to as the second distance).

[0164] Please refer to Figure 10, which is a schematic diagram of an interface for displaying graphic elements provided by an embodiment of the present application. As shown in Figure 10, the second canvas of the present application can be displayed on the terminal interface, and the second canvas can display the graphic elements drawn in the display area of ​​the first canvas. The terminal interface may also include a first scroll bar and a second scroll bar. The first scroll bar may have a slider, which supports scrolling the slider on the first scroll bar to scroll the position of the display area in the first canvas in the horizontal direction. Similarly, the second scroll bar may also have a slider, which supports scrolling the slider on the second scroll bar to scroll the position of the display area in the first canvas in the vertical direction.

[0165] Step S202: Determine a display area in the first canvas based on the first distance and the second distance.

[0166] In one embodiment, the data processing device may obtain a first coordinate value through the first distance. The first coordinate value may be used to indicate the position of the current display area in the first canvas on the first coordinate axis, that is, the first coordinate value may be a horizontal coordinate in the coordinate system.

[0167] Furthermore, the data processing device can also obtain a second coordinate value through the second distance, and the second coordinate value can be used to indicate the position of the current display area in the first canvas on the second coordinate axis, that is, the second coordinate value can be a vertical coordinate in the coordinate system.

[0168] Specifically, the data processing device may obtain an initial coordinate value of the display area of ​​the first canvas in the first direction (which may be referred to as a first initial coordinate value). The first initial coordinate value may be a horizontal coordinate indicating the position of the display area of ​​the first canvas on the first coordinate axis when the first canvas is initially unchanged. For example, the first initial coordinate value may be the horizontal coordinate of the upper left corner (i.e., the top left corner) of the display area of ​​the first canvas when the first canvas is initially unchanged.

[0169] Furthermore, the data processing device can add (i.e., perform addition calculation) the first initial coordinate value and the first distance to obtain the above-mentioned first coordinate value. Correspondingly, the first coordinate value can be the horizontal coordinate of the upper left corner of the current display area (such as the target display area).

[0170] Similarly, the data processing device may also obtain an initial coordinate value of the display area of ​​the first canvas in the second direction (which may be referred to as a second initial coordinate value). The second initial coordinate value may be a vertical coordinate indicating the position of the display area of ​​the first canvas on the second coordinate axis when the first canvas is initially unchanged. For example, the second initial coordinate value may be the vertical coordinate of the upper left corner (i.e., the top left corner) of the display area of ​​the first canvas when the first canvas is initially unchanged.

[0171] Furthermore, the data processing device can add (i.e., perform addition calculation) the second initial coordinate value and the second distance to obtain the above-mentioned second coordinate value. Correspondingly, the second coordinate value can be the vertical coordinate of the upper left corner of the current display area (such as the target display area).

[0172] Furthermore, the data processing device can construct the target coordinates in the coordinate system where the first canvas is located through the first coordinate value and the second coordinate value obtained above. The horizontal coordinate in the target coordinates can be the first coordinate value, and the vertical coordinate in the target coordinates can be the second coordinate value. The target coordinates can be the position coordinates of the upper left corner of the current display area (such as the top left corner of the rectangular area of ​​the display area) in the coordinate system.

[0173] Therefore, the current display area of ​​the first canvas (e.g., the target display area) is uniquely determined by combining the target coordinates and the display area's dimensions (which may include the display area's length and width). Optionally, the display area's position within the first canvas in this application supports dynamic changes, but the display area's dimensions may not change during the dynamic change.

[0174] Optionally, in actual application scenarios, the above-mentioned target coordinates may also be any coordinate used to locate the display area in the first canvas. For example, the target coordinates may also be the position coordinates of any vertex of the current display area in the first canvas. Therefore, by combining a coordinate (i.e., the target coordinate) used to locate the display area of ​​the first canvas with the length of the display area in the horizontal direction and the width of the display area in the vertical direction, the rectangular area where the current display area in the first canvas is located may be uniquely determined.

[0175] In another feasible embodiment, there may be only one scroll bar for scrolling the position of the display area of ​​the first canvas, such as only a vertical scroll bar. In this case, the horizontal size of the display area may be equal to the size to which the first canvas is extended in the horizontal direction. In this case, the horizontal position of the display area in the first canvas does not need to be scrolled, but only the vertical position of the display area needs to be scrolled.

[0176] Vice versa, there may be only a horizontal scroll bar. In this case, the vertical size of the display area may be equal to the size to which the first canvas is extended in the vertical direction. In this case, the vertical position of the display area in the first canvas does not need to be scrolled, but only the horizontal position of the display area needs to be scrolled.

[0177] Alternatively, the above-mentioned scroll bar is only a form of scrolling to change the position of the display area in the first canvas. In more implementations, the position of the display area in the first canvas can also be dynamically changed in other forms. It is not necessary to dynamically change the position of the display area in the first canvas through a scroll bar, and this application does not impose any restrictions on this.

[0178] Please refer to Figure 11, which is a schematic diagram of a scenario of dynamically changing the position of a display area provided in an embodiment of the present application. As shown in Figure 11, the initial position of the display area in the first canvas can be at the upper left area of ​​the first canvas (for example, the position of the upper left corner of the display area at the initial position can be position Z1 of the upper left corner of the first canvas). By the user dynamically changing the display area on the terminal interface (such as scrolling through a scroll bar), the display area in the first canvas can be dynamically changed to other positions in the first canvas, such as the position of the upper left corner of the display area can be changed to position Z2 in the first canvas.

[0179] It can be seen that, while only drawing the graphic elements in the display area of ​​the first canvas or / and adjacent graphic elements, the present application also supports the user to dynamically switch the current display area on the terminal interface to display more graphic elements at other element positions in the first canvas, so that the user can view the graphic elements at all element positions on the first canvas. Of course, the user does not need to be aware of the existence of the first canvas.

[0180] Please refer to Figure 12, which is a flowchart of a method for modifying a graphic element provided by an embodiment of the present application. As shown in Figure 12, the method may include:

[0181] Step S301: If a modification operation triggered by a third graphic element displayed on the second canvas is received, an element modification area in the first canvas is obtained according to the modification operation.

[0182] In one embodiment, the third graphical element may be any graphical element displayed on the second canvas. There may be one or more third graphical elements. The user may modify the displayed third graphical element in the second canvas by performing a modification operation on the third graphical element. For example, if the user drags the entire chart, the modified third graphical element may include all graphical elements contained in the dragged chart. Alternatively, the user may modify only a single third graphical element.

[0183] Among them, the modification operation triggered on the third graphic element can be used to modify the position, display style, size, or data contained in the third graphic element, etc.; the specific type of modification can be determined according to the actual application scenario.

[0184] The location area of ​​a graphical element in the first canvas may also be a rectangular area. This rectangular area may be the minimum area within the first canvas within which the graphical element resides, i.e., it may be a rectangular area that just accommodates the graphical element. Therefore, it can be understood that the position of a graphical element in the first canvas may be used to indicate the location area (i.e., the rectangular area within which the graphical element resides) within the first canvas.

[0185] Therefore, if the data processing device receives a modification operation triggered on a third graphical element displayed on the second canvas, it can first obtain the element modification area in the first canvas based on the modification operation. The element modification area is the modified area. The element modification area can be referred to as a dirty area. The dirty area can also be a rectangular area, and therefore, the dirty area can also be referred to as a dirty rectangle. Optionally, there can be one or more element modification areas, and the one or more element modification areas can constitute a dirty rectangle list.

[0186] Among them, the process of obtaining the element modification area in the first canvas based on the modification operation of the third graphic element may include: if the modification operation is not used to modify the element position of the third graphic element (that is, the position area where the third graphic element is located), then the element area where the third graphic element is located in the first canvas when the modification operation is triggered can be used as the above-mentioned element modification area.

[0187] If the modification operation is used to modify the element position of the third graphic element, the element area where the third graphic element is located in the first canvas when the modification operation is triggered (that is, the element area where the third graphic element was located before being modified), and the element area to which the third graphic element is to be modified in the first canvas (that is, the element area to which the third graphic element needs to be modified) can both be regarded as element modification areas, because the element area where the third graphic element was located before being modified and the element area to which it needs to be modified both need to be modified accordingly.

[0188] It can be seen that one third graphic element can correspond to one or two element modification areas. If there are multiple third graphic elements, then multiple third graphic elements can correspond to multiple element modification areas.

[0189] Step S302: redraw the graphic elements in the element modification area in the first canvas according to the modification operation.

[0190] In one embodiment, the data processing device traverses each element modification region (e.g., traverses each dirty rectangle in the dirty rectangle list) and, based on the modification operation, redraws the graphic elements within each element modification region on the first canvas. This can be understood as redrawing the element modification region. It can be understood that, depending on the modification required by the modification operation on the third graphic element, corresponding drawing can be performed within the element modification region to obtain the redrawn graphic element within the element modification region.

[0191] For example, the redrawn third graphic element may be the third graphic element modified according to the modification operation; for another example, if the third graphic element needs to be moved from its original element position to another element position, the third graphic element in the element area at the original element position may be cleared.

[0192] In another feasible embodiment, if there are multiple element modification regions, the data processing device may further merge adjacent element modification regions among the multiple element modification regions to obtain at least one merged modification region, and then redraw each of the obtained merged modification regions. Optionally, adjacent element modification regions may refer to element modification regions whose distance is less than or equal to a set distance threshold. If there are multiple adjacent element modification regions, the multiple adjacent element modification regions may be merged together to obtain a corresponding merged modification region.

[0193] The merged modification area can also be a rectangular area, which is the smallest rectangular area that can simultaneously accommodate the merged element modification areas. For example, if element modification area q1 is adjacent to element modification area q2, and element modification area q2 is adjacent to element modification area q3, then element modification area q1, element modification area q2, and element modification area q3 can be merged together to obtain a merged modification area that can simultaneously accommodate element modification area q1, element modification area q2, and element modification area q3.

[0194] For example, if the element modification area q4 and the element modification area q5 are adjacent, the element modification area q4 and the element modification area q5 can be merged to obtain the minimum rectangular area that can accommodate the element modification area q4 and the element modification area q5 at the same time, that is, a corresponding merged modification area is obtained.

[0195] For example, if the element modification area q6 is not adjacent to any other element modification area, the element modification area q6 can be its own special merged modification area. In this case, the merged modification area can be the element area where the element modification area q6 is located in the first canvas.

[0196] Through the above process, at least one merged modification area can be obtained. A merged modification area can be obtained by merging at least two element modification areas, or a merged modification area can also be the element modification area itself that is not adjacent to other element modification areas.

[0197] Furthermore, the data processing device can redraw the graphic elements in each merged modification area obtained above in the first canvas according to the above modification operation, that is, redraw each merged modification area to obtain the graphic elements redrawn in each merged modification area.

[0198] It should be noted that when merging element modification areas, other areas outside the element modification areas may be introduced, so that the graphic elements in the other areas introduced also need to be redrawn. Therefore, when actually merging the element modification areas, relevant restrictions can be placed on the merging operation to ensure the performance of graphic element drawing. For example, the above-mentioned distance threshold can be set smaller. For example, the maximum number of element modification areas merged together can be limited. For example, a merged modification area can only be obtained by merging at most 3 element modification areas, and so on.

[0199] In the above process, by merging multiple element modification areas into a smaller number of merged modification areas, the data processing device can process (such as identifying and drawing separately) a smaller number of modification areas (such as merged modification areas), thereby also improving the performance of the data processing device in redrawing the graphic elements within the modification area.

[0200] Step S303: Display the redrawn graphic element and the original data corresponding to the redrawn graphic element in the second canvas.

[0201] In one embodiment, the data processing device may also display the redrawn graphic element and the original data corresponding to the redrawn graphic element (i.e., the original data associated with the redrawn graphic element) at a corresponding position in the second canvas to enable the user to make corresponding modifications to the third graphic element and allow the user to view such modifications.

[0202] It is understandable that no matter how the graphic elements drawn in the display area of ​​the first canvas are arranged, the graphic elements drawn in the display area will also be displayed in corresponding positions on the second canvas.

[0203] Through the above process, using the dirty rectangle method, the present application only needs to redraw the graphic elements that have changed (i.e., modified), without having to redraw all the graphic elements in the entire display area. This can also improve the efficiency and performance of drawing and displaying graphic elements when modifying them.

[0204] By adopting the above method provided by this application, a large number of charts can be drawn in a very short time when facing big data, multi-dimensional, and multi-faceted visualization scenarios, without any lag. At the same time, it breaks through the limits of the browser's canvas in pixel drawing, thereby showing superior performance in chart drawing and display scenarios, and also allows users to be more at ease when performing data analysis through charts.

[0205] Please refer to Figure 13, which is a schematic diagram of the structure of a data processing device provided in an embodiment of the present application. As shown in Figure 13, the data processing device 120 may include: an acquisition module 1201, a parsing module 1202, a first determination module 1203, a drawing module 1204, a second determination module 1205, and a display module 1206.

[0206] An acquisition module 1201 is configured to acquire an original data set, where the original data set includes at least one item of original data;

[0207] a parsing module 1202 configured to parse the original data set based on the first canvas to obtain a graphic element set, the graphic element set comprising a plurality of graphic elements and first element positions assigned to the plurality of graphic elements in the first canvas, wherein a first canvas size of the first canvas is dynamically adjustable according to the plurality of graphic elements;

[0208] A first determining module 1203 is configured to determine a display area in the first canvas, and based on the display area and first element positions corresponding to the plurality of graphic elements, select a first graphic element from the graphic element set, wherein the first element position corresponding to the first graphic element satisfies a preset positional relationship with the display area;

[0209] A drawing module 1204 is configured to draw the first graphic element in the first canvas based on a first element position corresponding to the first graphic element;

[0210] The second determining module 1205 is configured to use the first graphic element located in the display area as the second graphic element and determine target original data corresponding to the second graphic element from the original data set;

[0211] The display module 1206 is configured to display the target original data in a second canvas through a second graphic element, where a second canvas size corresponds to the display area.

[0212] Optionally, the size of the first canvas may be dynamically adjusted to a target size, where the target size is a size capable of accommodating the set of graphic elements;

[0213] The size of the display area is smaller than or equal to the target size, and the size of the display area is equal to the size of the second canvas.

[0214] In one embodiment, the parsing module 1202 parses the original data set based on the first canvas to obtain the graphic element set, including:

[0215] Obtain the target type of the chart required to display the original data in the original data set, and obtain the configuration data of the chart of the target type;

[0216] The configuration data is parsed based on the original data set and the first canvas to obtain a graphic element set, which is used to draw a chart of the target type.

[0217] In one embodiment, if a graphic element in the graphic element set is obtained by parsing one or more raw data in the original data set, then there is an association relationship between the graphic element and the one or more raw data;

[0218] The second determining module 1205 determines the target original data corresponding to the second graphic element from the original data set, including:

[0219] Original data associated with the second graphic element is determined from the original data set as target original data corresponding to the second graphic element.

[0220] In one embodiment, the second canvas is displayed on a terminal interface, and the terminal interface includes a first scroll bar and a second scroll bar, the first scroll bar is used to scroll the display area in a first direction, and the second scroll bar is used to scroll the display area in a second direction; the total scrolling distance of the first scroll bar is equal to the size of the first canvas in the first direction, and the total scrolling distance of the second scroll bar is equal to the size of the first canvas in the second direction;

[0221] The first determining module 1203 determines the display area in the first canvas in the following manner:

[0222] Obtain a first distance scrolled by the first scroll bar and a second distance scrolled by the second scroll bar;

[0223] A display area is determined in the first canvas based on the first distance and the second distance.

[0224] In one embodiment, the first canvas has a coordinate system including a first coordinate axis in a first direction and a second coordinate axis in a second direction. The first determination module 1203 determines the display area in the first canvas based on the first distance and the second distance, including:

[0225] Obtaining a first coordinate value based on the first distance, and obtaining a second coordinate value based on the second distance; the first coordinate value is used to indicate the position of the display area in the first canvas on the first coordinate axis, and the second coordinate value is used to indicate the position of the display area in the first canvas on the second coordinate axis;

[0226] Constructing target coordinates in a coordinate system based on the first coordinate value and the second coordinate value;

[0227] The position of the display area in the first canvas is determined by combining the target coordinates and the size of the display area.

[0228] In one embodiment, the first determining module 1203 obtains the first coordinate value based on the first distance and obtains the second coordinate value based on the second distance, including:

[0229] Acquire a first initial coordinate value of the display area in the first direction, and add the first initial coordinate value and the first distance to obtain a first coordinate value; and

[0230] A second initial coordinate value of the display area in the second direction is acquired, and the second initial coordinate value and the second distance are added together to obtain a second coordinate value.

[0231] In one embodiment, the display area is a rectangular area, the target coordinates are the position coordinates of any corner of the display area in the first canvas, the first direction is the horizontal direction, the second direction is the vertical direction, and the target size includes the horizontal length and the vertical width of the display area;

[0232] The display area is a rectangular area determined on the first canvas based on the position coordinates of any vertex, the length in the horizontal direction, and the width in the vertical direction.

[0233] In one embodiment, the first canvas is divided into M layers of sub-canvases according to a tree structure, where M is a positive integer. Any sub-canvas in the i-th layer is divided into N sub-canvases in the i+1-th layer, where each of the N sub-canvases is the next sub-canvas of any sub-canvas. M, i, and N are all positive integers, and i is less than M.

[0234] The first determining module 1203 selects the first graphic element from the graphic element set based on the display area and the first element positions corresponding to the plurality of graphic elements, including:

[0235] Traverse the M layers of sub-canvases in the tree structure from top to bottom;

[0236] The first graphic element is selected from the graphic element set based on the traversed sub-canvas, the display area, and the first element positions corresponding to the plurality of graphic elements.

[0237] In one embodiment, the first determining module 1203 selects the first graphic element from the graphic element set based on the traversed sub-canvas, the display area, and the positions of the first elements corresponding to the plurality of graphic elements, including:

[0238] Perform intersection calculation on the traversed sub-canvas and the display area;

[0239] If any sub-canvas of the traversed layer i does not intersect with the display area, stop traversing the next sub-canvas of any sub-canvas;

[0240] If any sub-canvas of the traversed layer i intersects with the display area, continue traversing the next sub-canvas of any sub-canvas;

[0241] The sub-canvas traversed in the Mth layer of sub-canvases that intersects with the display area is used as the sub-canvas to be drawn;

[0242] Determine the graphic elements in the graphic element set whose corresponding first element position is located within the sub-canvas to be drawn as first graphic elements;

[0243] The preset position relationship includes: in the M-th layer sub-canvas, the sub-canvas where the first graphic element is located intersects with the display area.

[0244] In one embodiment, the position of the display area in the first canvas supports dynamic change; the manner in which the first determination module 1203 determines the display area in the first canvas includes:

[0245] Determine a target display area in the first canvas, where the target display area is the current display area in the first canvas;

[0246] The first determining module 1203 selects the first graphic element from the graphic element set based on the display area and the first element positions corresponding to the plurality of graphic elements, including:

[0247] If the target display area has a previous display area, filtering out the first graphic element from the graphic element set based on the first element positions corresponding to the target display area, the previous display area, and the plurality of graphic elements;

[0248] The previous display area is the display area before the display area in the first canvas changes to the target display area.

[0249] In one embodiment, the first determining module 1203 selects the first graphic element from the graphic element set based on the target display area, the previous display area, and the first element positions corresponding to the plurality of graphic elements, including:

[0250] Obtaining an overlapping area between the target display area and the previous display area, and determining an area in the target display area excluding the overlapping area as an update area;

[0251] The first graphic element is selected from the graphic element set based on the update area and the first element positions corresponding to the plurality of graphic elements.

[0252] In one embodiment, the display module 1206 displays the target original data in the second canvas using the second graphic element, including:

[0253] In the second canvas, the target original data is displayed by a second graphic element located in the update area; and

[0254] In the second canvas, the original data corresponding to the drawn graphic element is displayed through the graphic element drawn in the overlapping area of ​​the previous display area.

[0255] In one embodiment, the data processing device 120 is further configured to:

[0256] If a modification operation triggered on the third graphic element displayed on the second canvas is received, obtaining an element modification area in the first canvas according to the modification operation;

[0257] Redrawing the graphic elements within the element modification area in the first canvas according to the modification operation;

[0258] In the second canvas, the redrawn graphic elements and the original data corresponding to the redrawn graphic elements are displayed.

[0259] In one embodiment, the method in which the data processing device 120 obtains the element modification area in the first canvas according to the modification operation includes:

[0260] If the modification operation is not used to modify the element position of the third graphic element, then determining the element area where the third graphic element is located in the first canvas as the element modification area; and,

[0261] If the modification operation is used to modify the element position of the third graphic element, the element area where the third graphic element is located in the first canvas and the element area to which the third graphic element is to be modified in the first canvas are both determined as element modification areas.

[0262] In one embodiment, the data processing device 120 redraws the graphic elements within the element modification area in the first canvas according to the modification operation, including:

[0263] If there are multiple element modification areas, merging adjacent element modification areas among the multiple element modification areas to obtain at least one merged modification area;

[0264] According to the modification operation, the graphic elements within the at least one merged modification area are redrawn in the first canvas.

[0265] According to one embodiment of the present application, the steps involved in the data processing method shown in FIG3 can be performed by various modules in the data processing device 120 shown in FIG13. For example, step S101 shown in FIG3 can be performed by the acquisition module 1201 in FIG13, and step S102 shown in FIG3 can be performed by the parsing module 1202 in FIG13; step S103 shown in FIG3 can be performed by the first determination module 1203 in FIG13, step S104 shown in FIG3 can be performed by the drawing module 1204 in FIG13, step S105 shown in FIG3 can be performed by the second determination module 1205 in FIG13, and step S106 shown in FIG3 can be performed by the display module 1206 in FIG13.

[0266] The present application can draw graphic elements on a first canvas. Since the size of the first canvas can be dynamically adjusted, no matter how many graphic elements need to be drawn, they can be implemented on the first canvas of dynamic size, so that the present application can have no limit on the number of graphic elements to be drawn; and the first canvas can also have a display area. The present application can filter out the first graphic element that currently needs to be drawn from the full set of graphic elements based on the display area. The first graphic element corresponds to the first element position in the first canvas and the display area. The preset position relationship between the first graphic element and the display area satisfies the preset position relationship, so that only the first graphic element associated with the display area can be drawn subsequently, without having to draw all the graphic elements in the graphic element set at one time. Then, in the second canvas actually used to display the original data, the corresponding target original data can be displayed by drawing the second graphic element located in the display area. Therefore, the efficiency of drawing the graphic elements is improved, and the timeliness of displaying the graphic elements is improved. In summary, the method provided by the present application can improve the performance of drawing and displaying graphic elements.

[0267] According to one embodiment of the present application, the various modules in the data processing device 120 shown in Figure 13 can be separately or all combined into one or several units to constitute, or one (some) of the units can be further divided into multiple smaller sub-units in function, and the same operation can be achieved without affecting the realization of the technical effects of the embodiments of the present application. The above modules are divided based on logical functions. In actual applications, the functions of a module can also be implemented by multiple units, or the functions of multiple modules can be implemented by one unit. In other embodiments of the present application, the data processing device 120 can also include other units. In actual applications, these functions can also be implemented with the assistance of other units, and can be implemented by the collaboration of multiple units.

[0268] In the embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program that has a predetermined function and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.

[0269] According to one embodiment of the present application, a computer program capable of executing the steps involved in the corresponding methods shown in the various embodiments of the present application can be run on a general-purpose computer device (the computer device may include processing elements and storage elements such as a central processing unit (CPU), a random access memory (RAM), and a read-only memory (ROM)) to construct a data processing device 120 as shown in Figure 13. The computer program can be recorded on a computer-readable recording medium, for example, and can be loaded into the computer device via the computer-readable recording medium and run therein.

[0270] Please refer to Figure 14, which is a structural diagram of a computer device provided in an embodiment of the present application. As shown in Figure 14, the computer device 1000 may include: a processor 1001, a network interface 1004 and a memory 1005. In addition, in some embodiments, the computer device 1000 may further include: a user interface 1003, and at least one communication bus 1002. Among them, the communication bus 1002 is used to realize the connection and communication between these components. Among them, the user interface 1003 may include a display screen (Display), a keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface and a wireless interface. The network interface 1004 may optionally include a standard wired interface and a wireless interface (such as a WI-FI interface). The memory 1005 may be a high-speed RAM memory or a non-volatile memory (non-volatile memory), such as at least one disk storage. The memory 1005 may also be at least one storage device located away from the aforementioned processor 1001. As shown in Figure 14, the memory 1005 as a computer storage medium may include an operating system, a network communication module, a user interface module and a device control application.

[0271] In the computer device 1000 shown in FIG14 , the network interface 1004 can provide network communication functions; the user interface 1003 is mainly used to provide an interface for user input; and the processor 1001 can be used to call the device control application stored in the memory 1005 to achieve:

[0272] Obtaining an original data set, where the original data set includes at least one item of original data;

[0273] Obtaining a graphic element set by parsing the original data set based on the first canvas, the graphic element set comprising a plurality of graphic elements and first element positions assigned to the plurality of graphic elements in the first canvas, wherein a first canvas size of the first canvas is dynamically adjustable according to the plurality of graphic elements;

[0274] Determining a display area in the first canvas, and based on the display area and first element positions corresponding to the plurality of graphic elements, selecting a first graphic element from the graphic element set, wherein the first element position corresponding to the first graphic element satisfies a preset positional relationship with the display area;

[0275] Drawing the first graphic element in the first canvas based on the first element position corresponding to the first graphic element;

[0276] Taking the first graphic element located in the display area as the second graphic element, and determining target original data corresponding to the second graphic element from the original data set;

[0277] The target original data is displayed in the second canvas by using a second graphic element, and a second canvas size of the second canvas corresponds to the display area.

[0278] It should be understood that the computer device 1000 described in the embodiments of the present application can execute the data processing methods described in the various embodiments of the present application, and can also execute the data processing device 120 described in the embodiment corresponding to FIG. 13 , and thus will not be described in detail here. In addition, the description of the beneficial effects of using the same method will not be repeated here.

[0279] In addition, it should be noted that the present application also provides a computer-readable storage medium, and the computer-readable storage medium stores a computer program. When the processor executes the computer program, it can perform the description of the data processing method in each embodiment of the present application. Therefore, it will not be repeated here. In addition, the description of the beneficial effects of using the same method will not be repeated. For technical details not disclosed in the computer storage medium embodiment involved in this application, please refer to the description of the method embodiment of this application.

[0280] As an example, the above-mentioned computer program can be deployed and executed on one computer device, or deployed and executed on multiple computer devices located in one location, or executed on multiple computer devices distributed in multiple locations and interconnected by a communication network. Multiple computer devices distributed in multiple locations and interconnected by a communication network can constitute a blockchain network.

[0281] The computer-readable storage medium may be an internal storage unit of the computer device, such as a hard disk or memory of the computer device. The computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped with the computer device. Furthermore, the computer-readable storage medium may include both an internal storage unit of the computer device and an external storage device. The computer-readable storage medium is used to store the computer program and other programs and data required by the computer device. The computer-readable storage medium may also be used to temporarily store data that has been output or is about to be output.

[0282] The present application provides a computer program product, which includes a computer program stored in a computer-readable storage medium. The processor of a computer device reads the computer program from the computer-readable storage medium, and the processor executes the computer program, so that the computer device performs the description of the above-mentioned data processing method in each embodiment of the present application. Therefore, it will not be repeated here. In addition, the description of the beneficial effects of adopting the same method will not be repeated. For technical details not disclosed in the computer-readable storage medium embodiment involved in this application, please refer to the description of the method embodiment of this application.

[0283] The terms "first", "second", etc. in the description, claims, and drawings of the embodiments of the present application are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "comprising" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, apparatus, product, or device comprising a series of steps or units is not limited to the listed steps or modules, but may optionally include steps or modules not listed, or may optionally include other step units inherent to these processes, methods, apparatuses, products, or devices.

[0284] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0285] The above disclosure is only a preferred embodiment of the present application, and certainly cannot be used to limit the scope of rights of the present application. Therefore, equivalent changes made according to the claims of the present application are still within the scope covered by the present application.

Claims

1. A data processing method, characterized in that, The method includes: Obtain an original data set, where the original data set includes at least one item of original data; Parse a graphic element set based on a first canvas through the original data set, where the graphic element set includes a plurality of graphic elements and first element positions respectively assigned to the plurality of graphic elements in the first canvas, and a first canvas size of the first canvas can be dynamically adjusted according to the plurality of graphic elements; Determine a display area in the first canvas, and based on the display area and the first element positions respectively corresponding to the plurality of graphic elements, filter out a first graphic element from the graphic element set, where a preset position relationship is satisfied between the first element position corresponding to the first graphic element and the display area; Draw the first graphic element in the first canvas based on the first element position corresponding to the first graphic element; Use the first graphic element located within the display area as a second graphic element, and determine target original data corresponding to the second graphic element from the original data set; Display the target original data through the second graphic element in a second canvas, where a second canvas size of the second canvas corresponds to the display area.

2. The method according to claim 1, wherein The size of the first canvas can be dynamically adjusted to a target size, and the target size is a size capable of accommodating the graphic element set; Wherein, a size of the display area is less than or equal to the target size, and the size of the display area is equal to the size of the second canvas.

3. The method according to claim 1 or 2, characterized in that The parsing the graphic element set based on the first canvas through the original data set includes: Obtain a target type of a chart required to display the original data in the original data set, and obtain configuration data of the chart of the target type; Perform parsing processing on the configuration data based on the original data set and the first canvas to obtain the graphic element set, and the graphic element set is used to draw the chart of the target type.

4. The method according to any one of claims 1 to 3, characterized in that, If a graphic element in the graphic element set is parsed based on one or more items of original data in the original data set, then there is an association relationship between the graphic element and the one or more items of original data; The determining the target original data corresponding to the second graphic element from the original data set includes: Determine, from the original data set, the original data having an association relationship with the second graphic element as the target original data corresponding to the second graphic element.

5. The method according to any one of claims 1-4, characterized in that The second canvas is displayed on a terminal interface, and the terminal interface includes a first scroll bar and a second scroll bar. The first scroll bar is used to perform a scrolling change on the display area in a first direction, and the second scroll bar is used to perform a scrolling change on the display area in a second direction. A total distance for which the first scroll bar is used for scrolling is equal to a size of the first canvas in the first direction, and a total distance for which the second scroll bar is used for scrolling is equal to a size of the first canvas in the second direction; The determining the display area in the first canvas includes: Obtain a first distance scrolled by the first scroll bar and a second distance scrolled by the second scroll bar; Determine the display area in the first canvas based on the first distance and the second distance.

6. The method according to any one of claims 1-5, characterized in that The first canvas has a coordinate system, which includes a first coordinate axis in the first direction and a second coordinate axis in the second direction; determining the display area in the first canvas based on the first distance and the second distance includes: Obtain a first coordinate value based on the first distance and a second coordinate value based on the second distance; the first coordinate value is used to indicate the position of the display area in the first canvas on the first coordinate axis, and the second coordinate value is used to indicate the position of the display area in the first canvas on the second coordinate axis; Construct a target coordinate in the coordinate system based on the first coordinate value and the second coordinate value; Wherein, the position of the display area in the first canvas is determined by combining the target coordinate and the size of the display area.

7. The method according to any one of claims 1 to 6, characterized in that, The obtaining a first coordinate value based on the first distance and a second coordinate value based on the second distance includes: Obtain a first initial coordinate value of the display area in the first direction, and perform an addition process on the first initial coordinate value and the first distance to obtain the first coordinate value; and, Obtain a second initial coordinate value of the display area in the second direction, and perform an addition process on the second initial coordinate value and the second distance to obtain the second coordinate value.

8. The method according to any one of claims 1-7, characterized in that, The display area is a rectangular area, the target coordinate is the position coordinate of any vertex angle of the display area in the first canvas, the first direction is the horizontal direction, the second direction is the vertical direction, and the size of the display area includes the length of the display area in the horizontal direction and the width in the vertical direction; Wherein, the display area is a rectangular area determined on the first canvas based on the position coordinate of any vertex angle, the length in the horizontal direction, and the width in the vertical direction.

9. The method according to any one of claims 1 to 8, characterized in that, The first canvas is divided into M layers of sub-canvases according to a tree structure, M is a positive integer, any sub-canvas in the i-th layer is divided into N sub-canvases in the i + 1-th layer, the N sub-canvases are all the next sub-canvases of any sub-canvas, M, i, and N are all positive integers, and i is less than M; The screening out the first graphic element from the graphic element set based on the display area and the first element positions respectively corresponding to the multiple graphic elements includes: Traverse the M layers of sub-canvases in the tree structure layer by layer from top to bottom; Screen out the first graphic element from the graphic element set based on the traversed sub-canvas, the display area, and the first element positions respectively corresponding to the multiple graphic elements.

10. The method according to any one of claims 1-9, characterized in that, The screening out the first graphic element from the graphic element set based on the traversed sub-canvas, the display area, and the first element positions respectively corresponding to the multiple graphic elements includes: Perform an intersection calculation on the traversed sub-canvas and the display area; If any sub-canvas of the i-th layer traversed does not intersect with the display area, stop traversing the next sub-canvas of the any sub-canvas; If any sub-canvas of the i-th layer traversed intersects with the display area, continue traversing the next sub-canvas of the any sub-canvas; Use the sub-canvas traversed in the M-th layer sub-canvas and intersecting with the display area as the sub-canvas to be drawn; Determine all the graphic elements in the graphic element set whose corresponding first element positions are within the sub-canvas to be drawn as the first graphic elements; Among them, the preset positional relationship includes: in the M-th layer sub-canvas, the sub-canvas where the first graphic element is located intersects with the display area.

11. The method according to any one of claims 1 to 10, characterized in that, The position of the display area in the first canvas supports dynamic change; determining the display area in the first canvas includes: Determine the target display area in the first canvas, and the target display area is the current display area in the first canvas; The screening of the first graphic elements from the graphic element set based on the display area and the first element positions respectively corresponding to the multiple graphic elements includes: If there is a previous display area for the target display area, screen the first graphic elements from the graphic element set based on the target display area, the previous display area and the first element positions respectively corresponding to the multiple graphic elements; Among them, the previous display area is the display area in the first canvas before the display area changes to the target display area.

12. The method according to any one of claims 1 to 11, characterized in that, The screening of the first graphic elements from the graphic element set based on the target display area, the previous display area and the first element positions respectively corresponding to the multiple graphic elements includes: Obtain the overlapping area between the target display area and the previous display area, and determine the area other than the overlapping area in the target display area as the updated area; Screen the first graphic elements from the graphic element set based on the updated area and the first element positions respectively corresponding to the multiple graphic elements.

13. The method according to any one of claims 1-12, characterized in that, The displaying of the target original data through the second graphic elements in the second canvas includes: In the second canvas, display the target original data through the second graphic elements located in the updated area; and In the second canvas, display the original data corresponding to the graphic elements already drawn through the graphic elements already drawn in the overlapping area of the previous display area.

14. The method according to any one of claims 1-13, characterized in that, The method further includes: If a modification operation triggered for the third graphic element displayed on the second canvas is received, obtain the element modification area in the first canvas according to the modification operation; According to the modification operation, redraw the graphic elements in the element modification area in the first canvas; In the second canvas, display the redrawn graphic elements and the original data corresponding to the redrawn graphic elements.

15. The method according to any one of claims 1 to 14, characterized in that, The obtaining of the element modification area in the first canvas according to the modification operation includes: If the modification operation is not used to modify the element position of the third graphic element, determine the element area where the third graphic element is located in the first canvas as the element modification area; and, If the modification operation is used to modify the element position of the third graphic element, determine both the element area where the third graphic element is located in the first canvas and the element area to which the third graphic element is to be modified in the first canvas as the element modification area.

16. The method according to any one of claims 1 to 15, characterized in that, The redrawing of the graphic elements in the element modification area in the first canvas according to the modification operation includes: If there are multiple element modification areas, perform a merging process on adjacent element modification areas among the multiple element modification areas to obtain at least one merged modification area; According to the modification operation, redraw the graphic elements in the at least one merged modification area in the first canvas.

17. A data processing device, characterized in that, The device includes: An acquisition module, configured to acquire an original data set, where the original data set includes at least one item of original data; An analysis module, configured to analyze, based on the original data set, in a first canvas to obtain a graphic element set, where the graphic element set includes multiple graphic elements and first element positions respectively allocated to the multiple graphic elements in the first canvas, and a first canvas size of the first canvas can be dynamically adjusted according to the multiple graphic elements; A first determination module, configured to determine a display area in the first canvas, and based on the display area and the first element positions respectively corresponding to the multiple graphic elements, screen out a first graphic element from the graphic element set, where a preset position relationship is satisfied between the first element position corresponding to the first graphic element and the display area; A drawing module, configured to draw the first graphic element in the first canvas based on the first element position corresponding to the first graphic element; A second determination module, configured to use the first graphic element located in the display area as a second graphic element and determine target original data corresponding to the second graphic element from the original data set; A display module, configured to display the target original data through the second graphic element in a second canvas, where a second canvas size of the second canvas corresponds to the display area.

18. A computer program product, characterized in that, Includes a computer program which, when executed by a processor, implements the steps of the method according to any one of claims 1 - 16.

19. A computer device, characterized in that, Includes a memory and a processor, where the memory stores a computer program, and when the computer program is executed by the processor, the processor is caused to execute the steps of the method according to any one of claims 1 - 16.

20. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, and the computer program is adapted to be loaded and executed by a processor to execute the method according to any one of claims 1 - 16.

Images