A cross table rendering method and device, and a storage medium
By using SVG to determine the absolute coordinates of the cross-table layout and rendering it on the webpage, the problem of inaccurate display of cross-tables in different browsers is solved, achieving accurate and efficient rendering of cross-tables.
Patent Information
- Application Number
- CN202110641990.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-06-09
- Publication Date
- 2026-01-23
- Estimated Expiration
- 2041-06-09
AI Technical Summary
The existing web-based crosstabs have compatibility issues when displayed in different browsers, especially when there are many columns, cell merging fails and column grouping is displayed inaccurately.
Scalable Vector Graphics (SVG) is used to determine the absolute coordinate position of the cross-tab layout on the screen, and the cross-tab is rendered using SVG, including row headers, column headers, numerical cells, and row and column attribute information. Different data volumes are handled through dynamic or full rendering.
This ensures the accuracy of cross-tabulation display across different browsers, improves response speed and rendering efficiency, and avoids layout position changes caused by browser switching.
Smart Images

Figure CN115455320B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the field of data visualization, and in particular to a cross table rendering method and device, and a storage medium. BACKGROUND
[0002] The existing cross table on the webpage is rendered by using a table tag (table), and when rendering a multi-layer cross table, the table and a drawing plug-in (canvas) are combined or separately rendered. However, the table element in the webpage has limitations when the cells are merged, and when the number of columns is large, the merging of the cells fails, and the column grouping display is incorrect, which causes compatibility problems in the display of the cross table in different browsers. SUMMARY
[0003] The cross table rendering method and device, and the storage medium provided by the embodiments of the present application can solve the compatibility problem of the cross table display in different browsers, and ensure the accuracy of the cross table display.
[0004] The technical solution of the present application is implemented as follows:
[0005] In a first aspect, the embodiments of the present application provide a cross table rendering method, which comprises the following steps:
[0006] determining a first coordinate position corresponding to a first cross table layout on a screen by using a scalable vector graphics (SVG), wherein the first cross table layout is generated according to multi-layer table header information of a first cross table to be rendered and numerical information corresponding to the multi-layer table header information;
[0007] rendering the first cross table layout at the first coordinate position.
[0008] In the cross table rendering method, the step of determining the first coordinate position corresponding to the first cross table layout on the screen by using the SVG comprises the following steps:
[0009] determining a row header coordinate position and a column header coordinate position of the first cross table layout by using the SVG;
[0010] determining a numerical cell coordinate position of the first cross table layout according to the row header coordinate position and the column header coordinate position, wherein the numerical cell is a cross part of a row and a column in the first cross table layout;
[0011] determining a row-column attribute coordinate position between the row header coordinate position and the column header coordinate position;
[0012] determining the row table header coordinate position, the list header coordinate position, the numerical cell coordinate position and the row and column attribute coordinate position as the first coordinate position.
[0013] In the cross table rendering method, rendering the first cross table layout at the first coordinate position comprises:
[0014] rendering row table header information in the first cross table layout at the row table header coordinate position;
[0015] rendering list header information in the first cross table layout at the list header coordinate position;
[0016] rendering numerical information in the first cross table layout at the numerical cell coordinate position; the numerical information is information written in the numerical cell;
[0017] rendering row attribute information and column attribute information in the first cross table layout at the row and column attribute coordinate position.
[0018] In the cross table rendering method, determining the first coordinate position corresponding to the first cross table layout on the screen by using a scalable vector graphics (SVG) comprises:
[0019] when the number of numerical information in the first cross table layout is greater than a first preset numerical value, determining a rendering region as a screen display and a preset region connected with the screen display;
[0020] determining a cross table layout to be rendered from the first cross table layout according to the rendering region;
[0021] determining a first coordinate position of the cross table layout to be rendered in the rendering region by using the SVG;
[0022] when the number of numerical information in the first cross table layout is less than or equal to the first preset numerical value, determining the first coordinate position where the first cross table layout is located in the screen by using the SVG.
[0023] In the cross table rendering method, after determining the first coordinate position of the cross table layout to be rendered in the rendering region by using the SVG, the method further comprises:
[0024] rendering the cross table layout to be rendered at the first coordinate position;
[0025] displaying a partial first cross table corresponding to a partial cross table layout on the screen; the partial cross table layout is a cross table layout corresponding to the screen in the cross table layout to be rendered;
[0026] In a case that the page sliding display instruction is received, a to-be-displayed region is determined according to the page sliding display instruction;
[0027] In a case that the to-be-displayed region belongs to the rendering region, a part of the first cross table corresponding to the to-be-displayed region is displayed on the screen;
[0028] In a case that the to-be-displayed region does not belong to the rendering region, the first cross table layout is continuously rendered until the first cross table layout is completely rendered.
[0029] In the cross table rendering method, before the first coordinate position corresponding to the first cross table layout is determined on the screen by using a scalable vector graphics (SVG), the method further includes:
[0030] Obtaining multi-layer table header information and numerical values corresponding to the multi-layer table header information;
[0031] Determining row hierarchical information, row attribute information corresponding to the row hierarchical information, column hierarchical information and column attribute information corresponding to the column hierarchical information according to the multi-layer table header information;
[0032] Generating an initial cross table layout according to the row hierarchical information, the row attribute information, the column hierarchical information and the column attribute information;
[0033] Generating the first cross table layout based on the initial cross table layout and the numerical value information.
[0034] In the cross table rendering method, the generating the initial cross table layout according to the row hierarchical information, the row attribute information, the column hierarchical information and the column attribute information includes:
[0035] Generating row table header information according to the row attribute information and row hierarchical information corresponding to each row attribute information;
[0036] Generating table header information according to the column attribute information and column hierarchical information corresponding to each column attribute information;
[0037] Determining a number of rows and a number of columns according to the row hierarchical information and the column hierarchical information;
[0038] Generating the initial cross table layout according to the number of rows, the number of columns, the row table header information and the table header information.
[0039] In the cross table rendering method, after the first cross table layout is generated, the method further includes:
[0040] Based on the quantity of the numerical information and a second preset value, at least one thread is configured to simultaneously perform data analysis on the numerical information in the first crosstab layout, obtain data analysis results, and render the data analysis results.
[0041] In the above cross-tab rendering method, rendering the cross-tab layout to be rendered at the first coordinate position includes:
[0042] Configure multiple threads to simultaneously render the cross-tab layout to be rendered at the first coordinate position.
[0043] Secondly, embodiments of this application provide a cross-tabulation rendering apparatus, the apparatus comprising:
[0044] The determination module is used to determine the first coordinate position corresponding to the first cross table layout on the screen using a scalable vector image SVG; the first cross table layout is generated based on the multi-level header information of the first cross table to be rendered and the numerical information corresponding to the multi-level header information.
[0045] The rendering module is used to render the first cross table layout at the first coordinate position.
[0046] Thirdly, embodiments of this application provide a cross-table rendering device, the device comprising: a processor, a memory, and a communication bus; the processor, when executing a running program stored in the memory, implements the cross-table rendering method as described in any of the above claims.
[0047] Fourthly, embodiments of this application provide a storage medium storing a computer program thereon, characterized in that the computer program, when executed by a processor, implements the cross-table rendering method as described in any of the preceding claims.
[0048] This application provides a cross-tabulation rendering method, apparatus, and storage medium. The cross-tabulation rendering method includes: determining a first coordinate position corresponding to a first cross-tabulation layout on the screen using a scalable vector image (SVG); generating the first cross-tabulation layout based on multi-level header information and corresponding numerical information of the first cross-tabulation to be rendered; and rendering the first cross-tabulation layout at the first coordinate position. By using the above implementation scheme, the cross-tabulation is rendered using a scalable vector image (SVG). Since the first coordinate position determined by the scalable vector image (SVG) is an absolute position, it can be ensured that the layout position of the cross-tabulation does not change with browser switching, thus guaranteeing the accuracy of the cross-tabulation display. Attached Figure Description
[0049] Figure 1 A flowchart of a cross-tab rendering method provided in an embodiment of this application;
[0050] Figure 2A flowchart of a cross-tab rendering method module provided in an embodiment of this application;
[0051] Figure 3 An exemplary multi-layer cross representation is provided for embodiments of this application;
[0052] Figure 4 This is an exemplary rendering area diagram provided for an embodiment of this application;
[0053] Figure 5 A flowchart for generating a first cross table layout is provided in an embodiment of this application;
[0054] Figure 6 A dynamic rendering flowchart provided for an embodiment of this application;
[0055] Figure 7 A schematic diagram of the composition structure of a cross-table rendering apparatus provided in an embodiment of this application;
[0056] Figure 8 This is a schematic diagram of the composition structure of a cross-table rendering device provided in an embodiment of this application. Detailed Implementation
[0057] It should be understood that the specific embodiments described herein are merely illustrative of this application and are not intended to limit the scope of this application.
[0058] Example 1
[0059] This application provides a cross-tab rendering method, applied in a cross-tab rendering device. Figure 1 A flowchart of a cross-tab rendering method provided in this application embodiment is shown below. Figure 1 As shown, cross-tab rendering methods can include:
[0060] S101. Using a scalable vector image SVG, determine the first coordinate position corresponding to the first cross table layout on the screen; the first cross table layout is generated based on the multi-level header information of the first cross table to be rendered and the numerical information corresponding to the multi-level header information.
[0061] The cross-table rendering method proposed in this application can be applied to scenarios where cross-tables are displayed on a screen.
[0062] In this embodiment of the application, the cross-tabulation rendering process is specifically implemented through four modules. Figure 2 A flowchart of a cross-tab rendering method module provided in this application embodiment is shown below. Figure 2 As shown, the four modules are: user input module, layout preprocessing module, statistical analysis module, and rendering module.
[0063] Specifically, the first data is obtained by acquiring the data input from the user input module. The first data is then input into the layout preprocessing module, parsed, and a first cross-tab layout is generated based on the parsed content. The first cross-tab layout is then analyzed by the statistical analysis module, and finally rendered by the rendering module.
[0064] In this embodiment of the application, the cross-table rendering device uses Scalable Vector Graphics (SVG) to determine the first coordinate position corresponding to the first cross-table layout on the screen.
[0065] It should be noted that the first coordinate position corresponding to the first cross table layout is determined on the screen through... Figure 2 It is implemented in the rendering module.
[0066] In this embodiment of the application, since SVG has the characteristic of rendering text according to a specified path, SVG can be used to determine the first coordinate position corresponding to the first cross-tab layout on the screen. Specifically: using SVG, the row header coordinate position and the list header coordinate position of the first cross-tab layout are determined; the numerical cell coordinate position of the first cross-tab layout is determined based on the row header coordinate position and the list header coordinate position; the numerical cell is the intersection of the row and column in the first cross-tab layout; the intersection position between the row header coordinate position and the list header coordinate position is determined as the row and column attribute coordinate position; the row header coordinate position, the list header coordinate position, the numerical cell coordinate position, and the row and column attribute coordinate position are determined as the first coordinate position.
[0067] It should be noted that a crosstab can be divided into four parts, including row headers, list headers, row and column attributes, and values; and the row headers and list headers of a crosstab can be single-level or multi-level.
[0068] For example, Figure 3 An exemplary multi-layered cross representation intent provided for this application, such as Figure 3 As shown, Figure 3 The multi-level crosstab in the diagram consists of two levels of list headers and two levels of row headers. The position of the row and column attributes is where the row headers and list headers meet in the diagram. Figure 3 The rectangular area is composed of "operator", "gender" and "city".
[0069] In this embodiment of the application, the first coordinate position is determined by two methods: dynamic rendering and full rendering, based on the amount of numerical information in the first cross table layout.
[0070] Specifically, the process of determining the first coordinate position through dynamic rendering includes: when the number of numerical information in the first cross-tab layout is greater than a first preset value, the screen and the preset area connected to the screen are determined as the rendering area; based on the rendering area, the cross-tab layout to be rendered is determined from the first cross-tab layout; and using SVG, the first coordinate position of the cross-tab layout to be rendered in the rendering area is determined.
[0071] It should be noted that the first preset value at this time can be determined based on the maximum amount of numerical information that the screen can display.
[0072] It should be noted that the number of numerical information in the first crosstab layout is the total number of values in the first crosstab layout, such as... Figure 3 As shown, the number of cumulative payment amounts in each cell represents the number of numerical information items. The rendering area can be determined when the total amount of data exceeds a preset value. Alternatively, the number of columns in the first crosstab layout can be determined based on the number of these numerical information items, and the rendering area can be determined when the number of columns in the first crosstab layout exceeds a preset number of columns. Or, the number of rows in the first crosstab layout can be determined based on the number of these numerical information items, and the rendering area can be determined when the number of rows in the first crosstab layout exceeds a preset number of rows. The specific determination method can be determined according to the actual situation, and this application embodiment does not limit it here.
[0073] It should be noted that the preset area can be the window size of the next screen connected to the bottom of the current screen and the window size of the next screen connected to the right of the current screen, or it can be the window size of the next two screens connected to the bottom of the current screen and the window size of the next two screens connected to the right of the current screen. The specific size of the preset area can be determined according to the actual situation, and this application embodiment does not limit it here.
[0074] For example, Figure 4 An exemplary rendering area diagram is provided for this application, such as... Figure 4 As shown, screen a is the visible area, the part connected to screen a is the preset area b, and the rest is the invisible area c.
[0075] It should be noted that by defining the screen and the preset area adjacent to the screen as the rendering area, and then rendering the corresponding cross-table based on this rendering area, when the user swipes the screen to view the cross-table, if the user's swipe screen size is within this rendering area, the user can directly view the cross-table without re-rendering, thus improving the response speed.
[0076] It should be noted that since the rendering area is determined when the total amount of data is greater than the preset value, this means that the screen size cannot fully render the first cross-tab layout, that is, the first cross-tab layout cannot be fully displayed on the screen. Therefore, it is necessary to determine a portion of the cross-tab layout that can match the rendering area size from the first cross-tab layout and identify it as the cross-tab layout to be rendered.
[0077] It should be noted that since the layout to be rendered is determined from the first cross-tab layout, and is a partial first cross-tab layout, the steps of determining the first coordinate position of the cross-tab layout to be rendered in the rendering area are the same as those of determining the first coordinate position corresponding to the first cross-tab layout, and will not be repeated here.
[0078] Specifically, the process of determining the first coordinate position through full rendering includes: when the number of numerical information in the first cross table layout is less than or equal to the first preset value, using SVG, the first coordinate position of the first cross table layout is determined from the screen.
[0079] It should be noted that since the rendering area is determined when the total amount of data is less than or equal to a preset value, this means that the screen size may be able to render the first cross-tab layout completely, that is, the first cross-tab layout can be fully displayed on the screen. Therefore, the first coordinate position of the first cross-tab layout can be determined directly from the screen using SVG. The specific steps are the same as the steps for determining the first coordinate position of the first cross-tab layout, and will not be repeated here.
[0080] In this embodiment of the application, before determining the first coordinate position corresponding to the first cross-table layout on the screen using a scalable vector image SVG, a process of generating the first cross-table layout is included, and this process is achieved through... Figure 2 The user input module and layout preprocessing module are implemented together. Figure 5 A flowchart for generating a first crosstab layout is provided in this application, such as Figure 5 As shown, the method includes:
[0081] S201. Obtain multi-level header information and the corresponding numerical information of the multi-level header information.
[0082] Specifically, the input module receives the first data input by the user and transmits the first data to the layout preprocessing module. The layout preprocessing module parses the first data input by the user to obtain multi-level header information and the corresponding numerical information.
[0083] S202. Determine the row hierarchy information, the row attribute information corresponding to the row hierarchy information, the column hierarchy information, and the column attribute information corresponding to the column hierarchy information based on the multi-level header information.
[0084] It should be noted that the row layering information and column layering information refer to the number of layers in the row and the layering information corresponding to each row layer, and the number of layers in the column and the layering information corresponding to each column layer.
[0085] Specifically, such as Figure 3 As shown, the row header has two levels. The attribute information of the first level row header is "Province", and the hierarchical information of the first level row header is "Shanghai" and "Yunnan". The attribute information of the second level row header is "City", and the hierarchical information of the second level row header is "Shanghai", "Lincang 3", "Lijiang", "Baoshan", etc.
[0086] Specifically, such as Figure 3 As shown, the list header has two levels. The first level list header's attribute information is "Operator", and the hierarchical information of the first level list header is "China Mobile", "China Unicom", "China Telecom" and "Others". The second level list header's attribute information is "Gender", and the hierarchical information of the second level list header is "Male" and "Female".
[0087] S203. Generate the initial crosstab layout based on row hierarchy information, row attribute information, column hierarchy information, and column attribute information.
[0088] Specifically, based on the row attribute information and the row hierarchy information corresponding to each row attribute information, row header information is generated; based on the column attribute information and the column hierarchy information corresponding to each column attribute information, column header information is generated; based on the row hierarchy information and column hierarchy information, the number of rows and columns is determined; based on the number of rows, the number of columns, the row header information, and the column header information, the initial crosstab layout is generated.
[0089] It should be noted that after determining the number of rows, columns, row header information, and list header information, the process of generating the initial crosstab layout can be implemented through a preset loop algorithm. Specifically, the row header information and list header information are scanned sequentially from top to bottom and from left to right, and each initial value is set to 1. The horizontal scan is denoted by i, and the vertical scan is denoted by j. In each scan, when d[i][j] = d[i][j+1], the value of the cell is incremented by 1. This process is repeated until the last column of the last row is scanned, at which point the initial layout matrix is generated.
[0090] S204. Generate the first cross-tab layout based on the initial cross-tab layout and numerical information.
[0091] Specifically, the numerical information is added sequentially to the cells corresponding to the initial crosstab layout to generate the first crosstab layout.
[0092] It should be noted that when generating the first crosstab layout, the row headers or list headers with the same attribute information in the initial crosstab layout also need to be merged layer by layer, such as... Figure 3 As shown, in Figure 3 In the list header, "Move" is the attribute of the merged list header. Since the parent list headers of "Move, Female" and "Move, Male" are both "Move", they are merged.
[0093] In this embodiment of the application, after generating the first cross-tab layout, based on the quantity of numerical information and a second preset value, at least one thread is configured to simultaneously perform data analysis on the numerical information in the first cross-tab layout, obtain the data analysis results, and render the data analysis results.
[0094] It should be noted that data analysis of the numerical information in the first crosstab layout is performed through... Figure 2 It is implemented using the data analysis module in the software.
[0095] Specifically, when the number of numerical information is greater than or equal to a preset value, one thread is configured to perform data analysis on the numerical information in the first crosstab layout; when the number of numerical information is greater than the preset value, multiple threads are configured to perform data analysis on the numerical information in the first crosstab layout simultaneously. After the data analysis is performed, the data analysis results are obtained and rendered.
[0096] It should be noted that a thread can also be a worker thread.
[0097] Understandably, configuring multiple threads to perform data analysis operations on this first crosstab layout simultaneously can improve data analysis efficiency.
[0098] It should be noted that data analysis operations can be summing numerical information of the same attribute, sorting numerical information of the same row or column from smallest to largest or from largest to smallest, or finding the maximum or minimum value of all numerical information in the first crosstab layout. The specific data analysis operation is determined according to the actual situation, and this application embodiment does not limit it.
[0099] In this embodiment of the application, a first cross-table layout is generated so that the cross-table rendering device can use a scalable vector image SVG to determine the first coordinate position corresponding to the first cross-table layout on the screen.
[0100] In this embodiment of the application, after determining the first coordinate position corresponding to the first cross table layout, the first cross table layout can be rendered at the determined first coordinate position.
[0101] S102, Render the first cross table layout at the first coordinate position.
[0102] In this embodiment of the application, after determining the first coordinate position corresponding to the first cross-table layout, the cross-table rendering device renders the first cross-table layout at the first coordinate position.
[0103] It should be noted that rendering the first crosstab layout at the first coordinate position is done through... Figure 2 It is implemented in the rendering module.
[0104] Specifically, the row header information of the first crosstab layout is rendered at the row header coordinate position; the list header information of the first crosstab layout is rendered at the list header coordinate position; the numerical information of the first crosstab layout is rendered at the numerical cell coordinate position; the numerical information is the information written in the numerical cell; and the row attribute information and column attribute information of the first crosstab layout are rendered at the row and column attribute coordinate positions.
[0105] It should be noted that when rendering the row and column attribute information in the first crosstab layout at the row and column attribute coordinate positions, such as Figure 3 As shown, it is necessary to divide the rectangular area at the row and column attribute coordinate positions. During the division, this rectangular area is divided into the required number of triangles according to the row header and column header information.
[0106] It should be noted that when rendering the numerical information in the first crosstab layout at the coordinate position of the numerical cell, multiple cells are generated according to the first crosstab layout, and each cell corresponds to the numerical value rendered in the first crosstab layout.
[0107] In this embodiment of the application, after determining the first coordinate position of the cross table layout to be rendered in the rendering area using SVG, the cross table layout to be rendered is rendered at the first coordinate position.
[0108] It should be noted that the first coordinate position of the cross-tab layout to be rendered in the rendering area is determined by using SVG when the number of numerical information in the first cross-tab layout is greater than the first preset value. The first coordinate position is determined by dynamic rendering. Therefore, rendering the cross-tab layout to be rendered at this first coordinate position is dynamic rendering.
[0109] Specifically, Figure 6 A dynamic rendering flowchart is provided for this application, such as Figure 6 As shown, the method includes:
[0110] S301, Render the cross table layout to be rendered at the first coordinate position.
[0111] In this embodiment of the application, when rendering the cross-tab layout to be rendered at the first coordinate position, multiple threads are configured to render the cross-tab layout to be rendered simultaneously at the first coordinate position.
[0112] It should be noted that multiple workers can also be configured to render the cross-tab layout to be rendered simultaneously at the first coordinate position.
[0113] It is understandable that configuring multiple threads for dynamic rendering can improve rendering efficiency.
[0114] S302. Display a portion of the first cross-table corresponding to the partial cross-table layout on the screen; the partial cross-table layout is the cross-table layout on the screen that is to be rendered.
[0115] It should be noted that since this cross-table layout to be rendered is a partial cross-table layout corresponding to the rendering area, after rendering this cross-table layout, the partial first cross-table corresponding to this partial cross-table layout will be displayed in the rendering area.
[0116] S303. Upon receiving a page slide display instruction, determine the area to be displayed based on the page slide display instruction.
[0117] Specifically, the page swiping display command can be a user-inputted command to swipe up, swipe down, swipe left, or swipe right. After receiving the user's page swiping display command, the area to be displayed is determined according to this command. Specifically, assuming the user swipes down three screen sizes, the area to be displayed is the fourth screen size; or assuming the user only swipes down one screen size, the area to be displayed is the second screen size. The specific swipe size is determined according to the actual situation, and this application embodiment does not limit it.
[0118] S304. If the area to be displayed belongs to the rendering area, display the first cross table corresponding to the area to be displayed on the screen.
[0119] Specifically, when the number of numerical information in the first cross-table layout is greater than the first preset value, the cross-table rendering device determines the screen display and the preset area connected to the screen display as the rendering area. If the preset area is set to the window size of the next screen connected to the bottom of the current screen and the window size of the next screen connected to the right of the current screen, and assuming the user scrolls down a page the size of one screen, the area to be displayed is the second screen page. Since the area to be displayed is now part of the rendering area, and the cross-table layout to be rendered has already been rendered at the first coordinate position, the part of the first cross-table corresponding to this area to be displayed can be directly displayed.
[0120] S305. If the area to be displayed is not part of the rendering area, continue rendering the first cross table layout until the first cross table layout is fully rendered.
[0121] Specifically, if the preset area is still the window size of the next screen connected to the bottom of the current screen and the window size of the next screen connected to the right of the current screen, and assuming the user has scrolled down three screen sizes of pages, the area to be displayed is the fourth screen page. Since the area to be displayed is not part of the rendering area, it is necessary to continue rendering the first cross-tab layout in this area to be displayed, and then display the part of the first cross-tab corresponding to this area on the screen.
[0122] Furthermore, this application can also render the cross-table layout to be rendered by full rendering. Specifically, after using SVG to determine the first coordinate position of the first cross-table layout from the screen, the cross-table layout to be rendered is rendered at the first coordinate position.
[0123] It should be noted that the first coordinate position of the first cross table layout is determined by using SVG to determine the first coordinate position from the screen when the number of numerical information in the first cross table layout is less than or equal to the first preset value. Therefore, rendering the cross table layout to be rendered at this first coordinate position is a full rendering.
[0124] In this embodiment of the application, during full rendering, all cross-tabs corresponding to the first cross-tab are displayed on the screen.
[0125] It should be noted that full rendering can be understood as rendering the entire first crosstab at once, meaning that the entire crosstab is rendered on the screen.
[0126] This application provides a cross-tabulation rendering method, which includes: determining a first coordinate position corresponding to a first cross-tabulation layout on the screen using a scalable vector image (SVG); generating the first cross-tabulation layout based on the multi-level header information of the first cross-tabulation to be rendered and the corresponding numerical information of the multi-level header information; and rendering the first cross-tabulation layout at the first coordinate position. By using the above implementation scheme to render the cross-tabulation using a scalable vector image (SVG), and because the first coordinate position determined by the scalable vector image (SVG) is an absolute position, it can be ensured that the layout position of the cross-tabulation does not change with browser switching, thus ensuring the accuracy of the cross-tabulation display.
[0127] Example 2
[0128] In another embodiment of this application, a cross-table rendering apparatus is provided. Figure 7 This application provides a schematic diagram of the composition structure of a cross-tab rendering device, as shown below.Figure 7 As shown, the cross-table rendering apparatus includes:
[0129] The determination module 10 is used to determine the first coordinate position corresponding to the first cross table layout on the screen using a scalable vector image SVG; the first cross table layout is generated based on the multi-level header information of the first cross table to be rendered and the numerical information corresponding to the multi-level header information.
[0130] The rendering module 11 is used to render the first cross table layout at the first coordinate position.
[0131] The determining module 10 is further configured to use the SVG to determine the row header coordinate position and the list header coordinate position of the first cross-tab layout; determine the numerical cell coordinates of the first cross-tab layout based on the row header coordinate position and the list header coordinate position; the numerical cell is the intersection of the row and column in the first cross-tab layout; determine the intersection position between the row header coordinate position and the list header coordinate position as the row and column attribute coordinate position; and determine the row header coordinate position, the list header coordinate position, the numerical cell coordinate position, and the row and column attribute coordinate position as the first coordinate position.
[0132] The rendering module 11 is further configured to render the row header information of the first cross-tab layout at the row header coordinate position; render the list header information of the first cross-tab layout at the list header coordinate position; render the numerical information of the first cross-tab layout at the numerical cell coordinate position; the numerical information is the information written in the numerical cell; and render the row attribute information and column attribute information of the first cross-tab layout at the row and column attribute coordinate positions.
[0133] The determining module 10 is further configured to, when the number of numerical information in the first cross-table layout is greater than a first preset value, determine the screen display and the preset area connected to the screen display as the rendering area; determine the cross-table layout to be rendered from the first cross-table layout according to the rendering area; and determine the first coordinate position of the cross-table layout to be rendered in the rendering area using the SVG.
[0134] The determining module 10 is further configured to, when the number of numerical information in the first cross table layout is less than or equal to the first preset value, use the SVG to determine the first coordinate position of the first cross table layout from the screen.
[0135] The rendering module 11 is further configured to render the cross table layout to be rendered at the first coordinate position.
[0136] Optionally, the cross-table rendering device 1 further includes: a display module;
[0137] The display module is used to display a portion of the first cross-table corresponding to a portion of the cross-table layout on the screen; the portion of the cross-table layout is the cross-table layout corresponding to the screen in the cross-table layout to be rendered.
[0138] The determining module 10 is further configured to determine the area to be displayed based on the page sliding display instruction when a page sliding display instruction is received;
[0139] The display module is further configured to display a portion of the first cross table corresponding to the area to be displayed on the screen when the area to be displayed belongs to the rendering area;
[0140] The rendering module 11 is further configured to continue rendering the first cross-tab layout when the area to be displayed does not belong to the rendering area, until the first cross-tab layout is fully rendered.
[0141] Optionally, the cross-table rendering device 1 further includes: an acquisition module and a generation module;
[0142] The acquisition module is used to acquire multi-level header information and the corresponding values of the multi-level header information;
[0143] The determining module 10 is further configured to determine row hierarchical information, row attribute information corresponding to the row hierarchical information, column hierarchical information, and column attribute information corresponding to the column hierarchical information based on the multi-level header information;
[0144] The generation module is used to generate an initial crosstab layout based on the row hierarchy information, the row attribute information, the column hierarchy information, and the column attribute information;
[0145] The generation module is further configured to generate the first cross-tab layout based on the initial cross-tab layout and the values.
[0146] The generation module is also used to generate row header information based on the row attribute information and the row hierarchy information corresponding to each row attribute information;
[0147] The generation module is also used to generate list header information based on the column attribute information and the column hierarchical information corresponding to each column attribute information;
[0148] The determining module 10 is further configured to determine the number of rows and columns based on the row layering information and the column layering information;
[0149] The generation module is further configured to generate the initial crosstab layout based on the number of rows, the number of columns, the row header information, and the column header information.
[0150] Optionally, the cross-tab rendering device 1 further includes: a data analysis module;
[0151] The data analysis module is configured to perform data analysis on the numerical information in the first crosstab layout simultaneously based on the quantity of the numerical information and a second preset value, obtain the data analysis results, and render the data analysis results.
[0152] The rendering module 11 is also configured to configure multiple threads to render the cross-tab layout to be rendered simultaneously at the first coordinate position.
[0153] This application provides a cross-tabulation rendering method apparatus, which includes: determining a first coordinate position corresponding to a first cross-tabulation layout on the screen using a scalable vector image (SVG); generating the first cross-tabulation layout based on multi-level header information of the first cross-tabulation to be rendered and the corresponding numerical information of the multi-level header information; and rendering the first cross-tabulation layout at the first coordinate position. By using the above implementation scheme to render the cross-tabulation using a scalable vector image (SVG), and because the first coordinate position determined by the scalable vector image (SVG) is an absolute position, it can be ensured that the layout position of the cross-tabulation does not change with browser switching, thus ensuring the accuracy of the cross-tabulation display.
[0154] Figure 8 This is a schematic diagram of the composition structure of a cross-tab rendering device provided in an embodiment of this application. In practical applications, based on the same disclosed concept of the above embodiments, such as... Figure 8 As shown, the cross-table rendering device in this embodiment includes: a display 12, a processor 13, a memory 14, and a communication bus 15.
[0155] In a specific embodiment, the determining module 10, rendering module 11, acquisition module, generation module, and data analysis module can be implemented by a processor 13 located on the cross-table rendering device, and the display module can be implemented by a display 12 located on the cross-table rendering device. The processor 13 can be at least one of an Application-Specific Integrated Circuit (ASIC), a Digital Signal Processor (DSP), a Digital Signal Processing Device (DSPD), a Programmable Logic Device (PLD), a Field-Programmable Gate Array (FPGA), a CPU, a controller, a microcontroller, or a microprocessor. It is understood that for different devices, the electronic device used to implement the above processor functions can also be other types; this embodiment does not specifically limit this.
[0156] In this embodiment, the communication bus 15 is used to establish communication between the display 12, the processor 13, and the memory 14; when the processor 13 executes the running program stored in the memory 14, it implements the following cross-table rendering method:
[0157] Using Scalable Vector Image (SVG), the first coordinate position corresponding to the first cross table layout is determined on the screen; the first cross table layout is generated based on the multi-level header information of the first cross table to be rendered and the numerical information corresponding to the multi-level header information.
[0158] Render the first cross table layout at the first coordinate position.
[0159] Optionally, the processor 13 is further configured to utilize the SVG to determine the row header coordinate position and the list header coordinate position of the first crosstab layout; determine the numerical cell coordinate position of the first crosstab layout based on the row header coordinate position and the list header coordinate position; the numerical cell is the intersection of the row and column in the first crosstab layout; determine the intersection position between the row header coordinate position and the list header coordinate position as the row and column attribute coordinate position; and determine the row header coordinate position, the list header coordinate position, the numerical cell coordinate position, and the row and column attribute coordinate position as the first coordinate position.
[0160] Optionally, the processor 13 is further configured to render the row header information in the first crosstab layout at the row header coordinate position; render the list header information in the first crosstab layout at the list header coordinate position; render the numerical information in the first crosstab layout at the numerical cell coordinate position; the numerical information is the information written in the numerical cell; and render the row attribute information and column attribute information in the first crosstab layout at the row and column attribute coordinate positions.
[0161] Optionally, the processor 13 is further configured to: when the number of numerical information in the first cross-tab layout is greater than a first preset value, determine the screen display and the preset area connected to the screen display as a rendering area; determine the cross-tab layout to be rendered from the first cross-tab layout according to the rendering area; determine the first coordinate position of the cross-tab layout to be rendered in the rendering area using the SVG; and when the number of numerical information in the first cross-tab layout is less than or equal to the first preset value, determine the first coordinate position of the first cross-tab layout from the screen using the SVG.
[0162] Optionally, the processor 13 is further configured to render the cross-table layout to be rendered at the first coordinate position; display a portion of the first cross-table corresponding to the partial cross-table layout on the screen; the partial cross-table layout being the cross-table layout corresponding to the screen in the cross-table layout to be rendered; upon receiving a page sliding display instruction, determining the area to be displayed according to the page sliding display instruction; if the area to be displayed belongs to the rendering area, displaying a portion of the first cross-table corresponding to the area to be displayed on the screen; if the area to be displayed does not belong to the rendering area, continuing to render the first cross-table layout until the first cross-table layout is fully rendered.
[0163] Optionally, the processor 13 is further configured to obtain multi-level header information and the corresponding numerical values; determine row hierarchical information, row attribute information, column hierarchical information, and column attribute information based on the multi-level header information; generate an initial cross-tab layout based on the row hierarchical information, the row attribute information, the column hierarchical information, and the column attribute information; and generate the first cross-tab layout based on the initial cross-tab layout and the numerical values.
[0164] Optionally, the processor 13 is further configured to generate row header information based on the row attribute information and the row hierarchy information corresponding to each row attribute information; generate list header information based on the column attribute information and the column hierarchy information corresponding to each column attribute information; determine the number of rows and columns based on the row hierarchy information and the column hierarchy information; and generate the initial crosstab layout based on the number of rows, the number of columns, the row header information, and the list header information.
[0165] Optionally, the processor 13 is further configured to configure at least one thread to simultaneously perform data analysis on the numerical information in the first crosstab layout based on the quantity of the numerical information and a second preset value, obtain data analysis results, and render the data analysis results.
[0166] Optionally, the processor 13 is further configured to configure multiple threads to simultaneously render the cross-tab layout to be rendered at the first coordinate position.
[0167] This application provides a storage medium storing a computer program thereon. The computer-readable storage medium stores one or more programs, which can be executed by one or more processors and applied in a cross-table rendering device. The computer program implements the cross-table rendering method as described above.
[0168] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.
[0169] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the related technology, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to cause an image display device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the cross-table rendering method described in the various embodiments of this disclosure.
[0170] The above description is merely a preferred embodiment of this application and is not intended to limit the scope of protection of this application.
Claims
1. A cross-tab rendering method, characterized in that, The method includes: Using Scalable Vector Image (SVG), the first coordinate position corresponding to the first cross table layout is determined on the screen; the first cross table layout is generated based on the multi-level header information of the first cross table to be rendered and the numerical information corresponding to the multi-level header information. Render the first cross table layout at the first coordinate position; The step of using a scalable vector image (SVG) to determine the first coordinate position corresponding to the first cross table layout on the screen includes: Using the SVG, the row header coordinate position and the list header coordinate position of the first cross-tab layout are determined; The coordinate positions of the numerical cells in the first cross-tab layout are determined based on the coordinate positions of the row header and the column header; the numerical cells are the intersections of rows and columns in the first cross-tab layout. The intersection between the row header coordinate position and the column header coordinate position is determined as the row and column attribute coordinate position; The coordinate positions of the row header, the column header, the numerical cell, and the row and column attribute coordinate positions are determined as the first coordinate position; Rendering the first cross table layout at the first coordinate position includes: Render the row header information of the first cross-tab layout at the specified row header coordinate position; Render the list header information in the first cross-tab layout at the coordinate position of the list header; The numerical information in the first crosstab layout is rendered at the coordinate position of the numerical cell; the numerical information is the information written in the numerical cell. The row and column attribute information of the first crosstab layout is rendered at the specified row and column attribute coordinate positions.
2. The method according to claim 1, characterized in that, The step of using scalable vector image SVG to determine the first coordinate position corresponding to the first cross table layout on the screen includes: If the number of numerical information in the first cross table layout is greater than the first preset value, the screen display and the preset area connected to the screen display are determined as the rendering area. Based on the rendering area, determine the cross-table layout to be rendered from the first cross-table layout; Using the SVG, the first coordinate position of the cross table layout to be rendered in the rendering area is determined; If the number of numerical information in the first cross table layout is less than or equal to the first preset value, the first coordinate position of the first cross table layout is determined from the screen using the SVG.
3. The method according to claim 2, characterized in that, After determining the first coordinate position of the crosstab layout to be rendered in the rendering area using the SVG, the method further includes: Render the cross table layout to be rendered at the first coordinate position; A portion of the first cross-table layout corresponding to a portion of the cross-table layout is displayed on the screen; the portion of the cross-table layout is the cross-table layout corresponding to the screen in the cross-table layout to be rendered. Upon receiving a page slide display instruction, the area to be displayed is determined according to the page slide display instruction; If the area to be displayed belongs to the rendering area, a portion of the first cross table corresponding to the area to be displayed is displayed on the screen. If the area to be displayed does not belong to the rendering area, continue rendering the first cross-tab layout until the first cross-tab layout is fully rendered.
4. The method according to claim 1, characterized in that, Before determining the first coordinate position corresponding to the first cross table layout on the screen using a scalable vector image (SVG), the method further includes: Obtain multi-level header information and the corresponding numerical information of the multi-level header information; Based on the multi-level header information, determine the row hierarchy information, the row attribute information corresponding to the row hierarchy information, the column hierarchy information, and the column attribute information corresponding to the column hierarchy information; An initial crosstab layout is generated based on the row hierarchy information, the row attribute information, the column hierarchy information, and the column attribute information; Based on the initial cross-tab layout and the numerical information, the first cross-tab layout is generated.
5. The method according to claim 4, characterized in that, The step of generating an initial crosstab layout based on the row hierarchy information, the row attribute information, the column hierarchy information, and the column attribute information includes: Based on the row attribute information and the row hierarchy information corresponding to each row attribute information, generate row header information; Based on the column attribute information and the column hierarchy information corresponding to each column attribute information, generate list header information; The number of rows and columns are determined based on the row hierarchy information and the column hierarchy information; The initial crosstab layout is generated based on the number of rows, the number of columns, the row header information, and the column header information.
6. The method according to claim 5, characterized in that, After generating the first crosstab layout, the method further includes: Based on the quantity of the numerical information and a second preset value, at least one thread is configured to simultaneously perform data analysis on the numerical information in the first crosstab layout, obtain data analysis results, and render the data analysis results.
7. The method according to claim 3, characterized in that, Rendering the cross-tab layout to be rendered at the first coordinate position includes: Configure multiple threads to simultaneously render the cross-tab layout to be rendered at the first coordinate position.
8. A cross-table rendering apparatus, characterized in that, The device includes: The determination module is used to determine the first coordinate position corresponding to the first cross table layout on the screen using a scalable vector image SVG; the first cross table layout is generated based on the multi-level header information of the first cross table to be rendered and the numerical information corresponding to the multi-level header information. The rendering module is used to render the first cross table layout at the first coordinate position; The determining module is further configured to utilize the SVG to determine the row header coordinate position and column header coordinate position of the first cross-tab layout; determine the numerical cell coordinate position of the first cross-tab layout based on the row header coordinate position and the column header coordinate position; the numerical cell is the intersection of a row and a column in the first cross-tab layout; determine the intersection position between the row header coordinate position and the column header coordinate position as the row and column attribute coordinate position; and determine the row header coordinate position, the column header coordinate position, the numerical cell coordinate position, and the row and column attribute coordinate position as the first coordinate position. The rendering module is further configured to: render the row header information of the first cross-tab layout at the row header coordinate position; render the list header information of the first cross-tab layout at the list header coordinate position; render the numerical information of the first cross-tab layout at the numerical cell coordinate position; the numerical information being the information written in the numerical cell; and render the row attribute information and column attribute information of the first cross-tab layout at the row and column attribute coordinate positions.
9. A cross-tab rendering device, characterized in that, The device includes a processor, a memory, and a communication bus; when the processor executes the running program stored in the memory, it implements the cross-table rendering method as described in any one of claims 1-7.
10. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the cross-table rendering method as described in any one of claims 1-7.
Citation Information
Patent Citations
Power grid equipment map rendering method
CN110599891A
Method, system and computer-readable recording medium for editing font using scalable vector graphic format
CN111274761A