Rendering method and device for scale data paging

Abstract

The invention provides a scale data paging rendering method. The scale data paging rendering method comprises the following steps: acquiring a virtual scrolling distance of scrolling of a scroll bar; calculating the page number of the current page according to the virtual rolling distance and the canvas size; calculating an index value of a square block of the current page in the scale data according to the size of the canvas, the page number and the size of the square block, and obtaining a text width of the index value as the width of a text view area; calculating the width of the square view area and calculating the number of squares in each page which can be displayed in the square view area; and obtaining corresponding data from the scale data according to the number of the square blocks in each page and the page number, and displaying the obtained data in a manner through the square blocks in the square block view area. The invention further provides a corresponding scale data paging rendering device. According to the big data dynamic paging rendering method provided by the invention, the dynamic paging parameters can be determined on the premise of not calling data, and the data is directly called for rendering without a DOM (Document Object Model).

Description

Technical Field

[0001] The present application relates to the technical field of data rendering, and particularly to a rendering method and device for paging large-scale data. Background Art

[0002] Data visualization is an important tool for analysis and decision-making. However, with the continuous growth of data scale, traditional visualization tools often struggle to balance performance and interactivity when dealing with large amounts of data, especially data volumes exceeding one million. This is because processing large amounts of data can lead to problems such as long rendering times, low frame rates, large memory overheads, and poor dynamic adaptability.

[0003] To address the above technical problems in rendering large amounts of data, currently, the method of dynamic paging rendering is often used when rendering large amounts of data, that is, only the data required for the current page is read from the data source for rendering, and other non-current page data is not rendered. The current method of dynamic paging rendering may have the problem that the data required for dynamic paging rendering and the result of dynamic paging are mutually conditional, and it often requires retrieving the index value or precise position of the data for calculation before rendering, resulting in delays.

[0004] Therefore, in the case where the size of the data visible area is uncertain and the dynamic paging page number and the amount of data per page cannot be determined at the beginning, how to provide a rendering method for paging large-scale data that can determine dynamic paging parameters without retrieving the data, so as to save rendering time and resources, is a technical problem to be solved. Summary of the Invention

[0005] In view of the above problems in the prior art, the present application provides a rendering method for paging large-scale data, so as to provide a method for dynamically paging and rendering large data, which can determine dynamic paging parameters for rendering without retrieving the data, and save rendering time and resources.

[0006] To achieve the above object, in the first aspect of the present application, there is provided a rendering method for paging large-scale data. The canvas used includes a square view area and a text view area located on one side thereof. The square view area is used to display the squares in an array corresponding to each data, and the text view area is used to display the index value of the corresponding row of squares in the large-scale data; the method includes:

[0007] Obtain the virtual scroll distance of the scroll bar scrolling;

[0008] Calculate the current page number according to the virtual scroll distance and the canvas size;

[0009] Calculate the index value of a square on the current page in the large-scale data according to the canvas size, the page number, and the square size, and obtain the text width of the index value as the width of the text view area;

[0010] Calculate the width of the block view area according to the canvas size and the width of the text view area;

[0011] Calculate the number of blocks per page that can be displayed in the block view area according to the width of the block view area, the block size, and the canvas size;

[0012] Obtain the corresponding data from the scale data according to the number of blocks per page and the page number, and display the obtained data through each block in the block view area in a certain way.

[0013] Thus, by monitoring the virtual scrolling distance of the scroll bar, estimate the current page number required for dynamic paging and the index value of a certain data in the scale data in the current page, then the size of the canvas element related to the data value can be calculated, and thus the actual size of the block view area can be obtained, and then the number of blocks per page that can be displayed, that is, the actual amount of data per page, can be obtained for data query. In addition, the scrolling diagram can be quickly loaded according to the above information.

[0014] In addition, the method of the present application can avoid the method of selecting and rendering data based on DOM objects. Since DOM objects are not used for data selection and the calculation is completely based on the relevant information of the canvas, the calculation overhead is reduced and the processing speed of data visualization rendering is improved compared with the complex method of selecting and rendering data based on DOM objects.

[0015] As a possible implementation manner of the first aspect, calculating the current page number includes calculating the current page number according to the following formula:

[0016]

[0017] where pageNum is the current page number; scrollTop is the virtual scrolling distance, that is, the distance from the top of the block view area in the canvas to the top of all scale data; Ncol is the number of complete blocks accommodated in each column of the canvas; size is the side length dimension of each block; and gap is the spacing between two adjacent blocks.

[0018] Thus, since there are only text elements and the block view area in the canvas, the current page number estimated by the virtual scrolling distance is the actual current page number.

[0019] As a possible implementation manner of the first aspect, calculating the index value of a block in the current page in the scale data includes calculating according to the following formula:

[0020] maxLabelText = Nrow × Ncol × pageNum

[0021] Among them, maxLabelText is the index value of the last block on the current page in the scale data, and the index value of the scale data starts from 0; Nrow is the number of complete blocks that can be accommodated in each row of the canvas, and Ncol is the number of complete blocks that can be accommodated in each column of the canvas; pageNum is the page number of the current page.

[0022] As described above, since the text length of the index value of the last block on the current page in the scale data is theoretically longer than the text length of any index value on the current page, therefore, the text length calculated in this way can accurately determine the size of the block view area.

[0023] As a possible implementation of the first aspect, calculating the width of the block view area includes calculating according to the following formula:

[0024] squaresAvailableWidth = W - maxLabelTextWidth

[0025] Among them, squaresAvailableWidth is the width of the block view area, W is the width of the canvas, and maxLabelTextWidth is the width of the index value of the last block measured in the scale data.

[0026] As described above, the width of the block view area can be obtained for calculating the number of blocks that can be displayed on each page, that is, the number of blocks that can be displayed on each page in the block view area.

[0027] As a possible implementation of the first aspect, calculating the number of blocks that can be displayed on each page in the block view area includes calculating according to the following formula:

[0028] pageSize = Nrow real × Ncol

[0029] Among them, pageSize is the number of blocks that can be displayed on each page, and Nrow real is the actual number of complete blocks that can be accommodated in each row of the block view area;

[0030] The Nrow real is calculated according to the following formula:

[0031]

[0032] As described above, the number of blocks that can be displayed on each page calculated through the actual number of complete blocks that can be accommodated in each row of the block view area can be used together with the current page number to obtain corresponding data from the scale data.

[0033] As a possible implementation of the first aspect, it further includes:

[0034] Calculating the virtual total scrolling distance of the scroll bar based on the total virtual height of the scale data and the height of the block view area;

[0035] Calculating the actual total scrolling distance of the scroll bar based on the actual height of the scroll bar and the self-height of the scroll bar slider;

[0036] Calculating the actual scrolling distance of the scroll bar based on the virtual scrolling distance of the scroll bar, the virtual total scrolling distance of the scroll bar, and the actual total scrolling distance of the scroll bar;

[0037] Showing the movement of the scroll bar slider according to the actual scrolling distance of the scroll bar.

[0038] As above, according to the mapping relationship between the actual scrolling distance of the scroll bar and the actual total scrolling distance of the scroll bar, and between the scrolling distance of the scroll bar and the virtual total scrolling distance of the scroll bar, by solving the mapping relationship, the actual scrolling distance of the scroll bar is obtained, so that the scroll bar can be loaded and rendered.

[0039] As a possible implementation of the first aspect, the calculating the virtual total scrolling distance of the scroll bar includes:

[0040] maxScrollTop = max(0, totalHeight - visibleHeight)

[0041] where maxScrollTop is the virtual total scrolling distance of the scroll bar, totalHeight is the total virtual height, and visibleHeight is the height of the block view area;

[0042] The calculating the actual total scrolling distance of the scroll bar includes:

[0043] maxRealScrollTop = max(0, scrollH - scrollbarThumbHeight)

[0044] where maxRealScrollTop is the actual total scrolling distance of the scroll bar, scrollH is the actual height of the scroll bar; scrollbarThumbHeight is the self-height of the scroll bar slider;

[0045] The calculating the actual scrolling distance of the scroll bar includes:

[0046]

[0047] Among them, realSrollTop is the actual scrolling distance of the scroll bar, and scrollTop is the virtual scrolling distance, that is, the distance from the top of the block view area in the canvas to the top of all scale data.

[0048] As above, the total virtual height of the data can be obtained from the total number of data rows, and together with the height of the block view area, it is used to calculate the total virtual scrolling distance and the total scrolling distance of the scroll bar. Since the height of the block view area and the self-height of the scroll bar slider are calculation results, the max() function is used to avoid the calculation result being less than the results of the total virtual height and the virtual scrolling distance of the scroll bar.

[0049] As a possible implementation manner of the first aspect, the calculation of the total virtual height includes:

[0050] totalHeight = totalRows × (size + gap)

[0051] Among them, totalRows is the total number of data rows; the calculation of the total number of data rows includes:

[0052]

[0053] Among them, totalSquares is the total amount of data, Nrow real is the actual number of complete blocks accommodated in each row of the block view area;

[0054] The calculation of the height of the block view area includes:

[0055] visibleHeight = Ncol × (size + gap)

[0056] Among them, Ncol is the number of complete blocks accommodated in each column of the canvas; size is the side length dimension of each block; gap is the spacing between two adjacent blocks;

[0057] The calculation of the self-height of the scroll bar slider includes:

[0058]

[0059] As above, obtaining the total number of data rows, the total virtual height, the number of complete blocks accommodated in each column of the canvas, and the self-height of the scroll bar slider can be used to calculate the total virtual scrolling distance and the actual total scrolling distance parameters of the scroll bar.

[0060] As a possible implementation manner of the first aspect, the display of the acquired data by each block in the block view area in a certain manner includes: drawing a block diagram by the Echarts method;

[0061] The display of the movement of the scroll bar slider includes: drawing the scroll bar and the slider through the canvas.

[0062] As described above, Echarts and canvas can directly operate on image pixels. For example, the length of text pixels can be obtained through the canvas, and a square image can be drawn through Echarts to obtain the size of the square; drawing based on the results of Echarts and canvas can reduce the cost required for converting objects.

[0063] The second aspect of the present application provides a rendering device for paging large-scale data. The canvas used includes a square view area and a text view area located on one side thereof. The square view area is used to display squares in an array corresponding to each data, and the text view area is used to display the index value of the corresponding row of squares in the large-scale data; it is characterized in that it includes:

[0064] An acquisition unit for acquiring the virtual scrolling distance of the scroll bar scrolling;

[0065] A calculation unit for calculating the current page number according to the virtual scrolling distance and the canvas size; also for calculating the index value of a square in the current page in the large-scale data according to the canvas size, the page number, and the square size, and obtaining the text width of the index value as the width of the text view area; also for calculating the width of the square view area according to the canvas size and the width of the text view area; also for calculating the number of squares that can be displayed on each page in the square view area according to the width of the square view area, the square size, and the canvas size;

[0066] A display unit for acquiring corresponding data from the large-scale data according to the number of squares on each page and the page number, and displaying the acquired data through the squares in the square view area in a certain manner. Description of the Drawings

[0067] Figure 1 is a flowchart of the first embodiment of the rendering method for paging large-scale data of the present application;

[0068] Figure 2a is a flowchart of the second embodiment of the rendering method for paging large-scale data of the present application;

[0069] Figure 2b is a schematic diagram of the data rendering page 1 provided by the second embodiment of the present application;

[0070] Figure 2c is a schematic diagram of the data rendering page 2 with annotations provided by the second embodiment of the present application;

[0071] Figure 2d-1 and Figure 2d-2It is the logical flowchart of data rendering provided by the second embodiment of the present application;

[0072] Figure 3 It is the schematic diagram of the rendering device for large-scale data paging provided by the embodiment of the present application;

[0073] Figure 4 It is the structural schematic diagram of a computing device provided by the embodiment of the present application.

[0074] It should be understood that in the above structural schematic diagram, the sizes and forms of each block diagram are for reference only and should not constitute an exclusive interpretation of the embodiments of the present invention. The relative positions and inclusion relationships between the block diagrams presented in the structural schematic diagram only schematically represent the structural associations between the block diagrams, rather than limiting the physical connection methods of the embodiments of the present invention. Detailed implementation manners

[0075] The following takes examples in conjunction with the drawings to further illustrate the technical solutions provided by the present application. It should be understood that the system structures and business scenarios provided in the embodiments of the present application are mainly used to illustrate the possible implementation manners of the technical solutions of the present application and should not be interpreted as the only limitation of the technical solutions of the present application. Those of ordinary skill in the art know that with the evolution of the system structure and the emergence of new business scenarios, the technical solutions provided by the present application are equally applicable to similar technical problems.

[0076] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the technical field to which the present application belongs. In case of inconsistency, the meaning described in this specification or the meaning obtained according to the content recorded in this specification shall prevail. In addition, the terms used herein are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application. In order to accurately describe the technical content in the present application and to accurately understand the present invention, the following explanation or definition of the terms used in this specification is given before the description of the specific implementation manners:

[0077] 1) ECharts: It is an open-source data visualization tool library that provides rich chart types, such as line charts, bar charts, pie charts, scatter plots, radar charts, maps, etc., as well as corresponding interactive functions. ECharts has flexible configuration items and powerful data presentation capabilities. It can help developers quickly build charts on web pages to display the distribution, trends, and relationships of data, etc. ECharts supports two rendering methods, Canvas and SVG, and can be compatible with mainstream browsers.

[0078] 2) requestAnimationFrame: It is a Web API that allows developers to perform updates to animations and visual effects before the next repaint of the browser. It synchronizes the frame rate of the animation with the refresh rate of the display to reduce screen tearing.

[0079] 3) Canvas: It refers to a rectangular area used for drawing graphics. For example, it can be in HTML5 <canvas>Element. It provides a rectangular area within which various graphics, texts, images, etc. can be drawn through a drawing API.

[0080] 4) Square view area: The square view area specifically refers to a particular part of the canvas used to display data points represented in the form of squares. As the user performs operations such as controlling the scroll bar slider to scroll, the visualized data area will change dynamically. New squares enter the viewport (i.e., the square view area), and old squares move out of the viewport.

[0081] 5) Terms related to scroll bars and sliders:

[0082] The self-height (scrollbarThumbHeight) of the scroll bar slider: It refers to the self-height (i.e., length) of the draggable part (i.e., the slider or thumb) in the scroll bar. The self-height of the slider usually reflects the proportional relationship between the current viewport and the entire content length. For example, when the document is very long, the slider will appear very small, and vice versa.

[0083] The actual height (scrollH) of the scroll bar: It refers to the height of the visible scroll bar element on the user interface, that is, the height of the scroll bar container.

[0084] The actual total scroll distance (maxRealScrollTop) of the scroll bar: It refers to the maximum physical distance that the scroll bar slider can move. It is the height of the scroll bar container minus the self-height of the slider.

[0085] maxRealScrollTop = max(0, scrollH - scrollbarThumbHeight). scrollH is the actual height of the scroll bar. scrollbarThumbHeight is the height of the scroll bar slider.

[0086] The actual scroll distance (realScrollTop) of the scroll bar: It refers to the actual displacement of the slider relative to the starting position. It indicates how many pixels the slider has moved relative to the top within the scroll bar container.

[0087] The virtual total scroll distance (maxScrollTop) of the scroll bar: The virtual total scroll distance of the scroll bar refers to the maximum logical distance that the entire content can scroll. It reflects the total height of all data items from top to bottom.

[0088] maxScrollTop = max(0, totalHeight - visibleHeight). totalHeight is the total virtual height required to display all data. visibleHeight is the total height of the squares and their spacings that can be fully displayed within the current viewport.

[0089] Virtual scroll distance of the scroll bar (scrollTop): It refers to the distance that has been logically scrolled by the user through interactive methods such as the scroll bar or the scroll wheel, that is, the distance from the top of the block view area in the canvas to the top of all scale data. This value reflects the relative position of the current page among all possible displayed data.

[0090] The rendering solution for scale data paging provided by the embodiments of the present application can estimate the current page number and a certain data value on the current page by monitoring the virtual scroll distance of the scroll bar and the canvas size. Based on this value, the actual size of the block view area and the actual data volume per page can be obtained, and data can be queried according to the actual data volume and the current page number. The loading parameter of the scroll bar is the actual scroll distance obtained by calculating the actual data. This solution can provide a rendering method for scale data paging, which can determine dynamic paging parameters without retrieving data and directly retrieve data for rendering without going through the DOM. The embodiments of the present application can be applied to scenarios such as big data rendering in various front-end visualization scenarios.

[0091] The first embodiment of the present application provides a rendering method for scale data paging. Next, in combination with Figure 1 , the implementation manners of each step of this method will be specifically described, including steps S10 - S60.

[0092] S10: Obtain the virtual scroll distance of the scroll bar scrolling.

[0093] In some embodiments, the rendering window or interface, etc., monitors the scroll event of the scroll bar, and obtains the virtual scroll distance of the scroll bar when the scroll bar scrolls. Among them, the virtual scroll distance refers to the distance that the data in the block view area scrolls. When the scroll event occurs, initial parameters are also required for calculation. Among them, the initial parameters include the canvas size, the total data volume, the side length of the block, the block spacing, the actual height of the scroll bar, the actual total scroll distance of the scroll bar, and the virtual scroll distance of the scroll bar; the canvas size includes the canvas width and the canvas height.

[0094] In some embodiments, the virtual scroll distance of the scroll bar is obtained by adding an event listener to the scroll event.

[0095] In some embodiments, the requestAnimationFrame API provided by the browser can be used to determine whether the browser needs to be refreshed before a rendering is performed, so as to determine the rendering timing, and perform calculations and data queries.

[0096] S20: Calculate the current page number according to the virtual scroll distance and the canvas size.

[0097] In some embodiments, the estimation based on the virtual scroll distance and the canvas size is performed by assuming that all ranges in the canvas are square view areas, so as to obtain the estimated amount of data displayed per page or the total number of squares. By calculating the virtual scroll distance divided by the estimated amount of data displayed per page and taking the integer, an estimated current page number is obtained according to the page number sorting rule.

[0098] In some embodiments, the current page number is calculated according to the following formula:

[0099]

[0100] where pageNum is the current page number; scrollTop is the virtual scroll distance, that is, the distance from the top of the square view area in the canvas to the top of the entire scale data; Ncol is the number of complete squares accommodated in each column of the canvas; size is the side length of each square; and gap is the spacing between two adjacent squares.

[0101] In some embodiments, the square can also be any other shape, such as a rectangle, a circle, etc.

[0102] In some embodiments, the squares can be arranged from left to right and from top to bottom at a certain spacing. The above visualization content can be drawn by tools such as ECharts.

[0103] In some embodiments, the squares are arranged in rows and columns, and the number of squares that can be accommodated in each row and column can be calculated based on the canvas size.

[0104] In some embodiments, the number of complete squares accommodated in each row of the canvas and the number of complete squares accommodated in each column of the canvas are obtained according to the following formula,

[0105]

[0106] where H is the height of the canvas, W is the width of the canvas, size is the side length of each square; gap is the spacing between two adjacent squares. Here, the area of the canvas does not include the scroll bar.

[0107] S30: Calculate the index value of a square on the current page in the scale data according to the canvas size, the page number, and the square size, and obtain the text width of the index value as the width of the text view area.

[0108] In some embodiments, after obtaining the page number of the current page, one or more data of interest in the current page can be estimated; in some embodiments, the last value in the current page can be selected as the ROI (Region of Interest, data of interest), and it can also be the first value in the last row, any one, etc.

[0109] In some embodiments, the ROI can be the index value of a block in the current page in the scale data, and is obtained according to the following formula:

[0110] maxLabelText = Nrow × Ncol × pageNum

[0111] Where maxLabelText is the index value of the last block in the current page in the scale data, and the index value of the scale data starts from 0.

[0112] In some embodiments, other elements may also be included in the canvas.

[0113] S40: Calculate the width of the block view area according to the canvas size and the width of the text view area.

[0114] In some embodiments, the width squaresAvailableWidth of the block view area is obtained according to the following formula,

[0115] squaresAvailableWidth = W - maxLabelTextWidth

[0116] Where W is the width of the canvas, and maxLabelTextWidth is the width of the area occupied by the text element obtained by measurement; among them, the width of the measured text can be obtained through the measurement tool in the Canvas.

[0117] S50: Calculate the number of blocks that can be displayed per page in the block view area according to the width of the block view area, the block size, and the canvas size;

[0118] In some embodiments, the number of blocks per page is obtained according to the following formula:

[0119] pageSize = Nrow real × Ncol

[0120] Where pageSize is the number of blocks that can be displayed per page, that is, the actual data volume per page, and Nrow real is the actual number of complete blocks accommodated in each row of the block view area, and is calculated according to the following formula.

[0121]

[0122] S60: Obtain corresponding data from the scale data according to the number of squares per page and the page number, and display the obtained data through each square in the square view area in a certain manner.

[0123] In some embodiments, the query data includes: the query position is the current page number, the size is the data corresponding to the number of squares that can be displayed, and whether there is cached data; if there is no such cached data, query the data through the service and obtain the data result and store it in the cache; if there is such cached data, read the cached data as the data result; according to the data result, draw each data result as a square, and draw all the data results in the order from left to right and from top to bottom.

[0124] In some embodiments, if the values of the data are finite, they can be represented in a color manner. For example, the values are 00 (empty), 01 (bad), 10 (good) representing states; if the values represent presence or absence, they can also be represented in ways such as 1 and 0.

[0125] In some embodiments, the data is drawn through ECharts and displayed in the canvas after being rendered using Canvas; during the rendering and drawing process, the browser can be made to automatically call a specified callback function at an appropriate time through the requestAnimationFrame API provided by the browser, so that the animation is synchronized with the refresh rate of the display, thereby avoiding unnecessary redrawing and resource waste. Among them, the callback function can include cached data and scroll bar rendering parameters.

[0126] In some embodiments, the data is managed in the order of the time when it enters the cache. When the cache capacity reaches the limit, the data that enters the cache earliest will be removed first to make room for new data.

[0127] In some embodiments, the displaying the obtained data through each square in the square view area in a certain manner includes: drawing the square chart in the Echarts manner; the displaying the movement of the scroll bar slider includes: drawing the scroll bar and the slider through canvas.

[0128] In some embodiments, before querying the data, the scroll bar can be rendered first, including: calculating the total virtual scrolling distance of the scroll bar according to the total virtual height of the scale data and the height of the square view area; calculating the actual total scrolling distance of the scroll bar according to the actual height of the scroll bar and the self-height of the scroll bar slider; calculating the actual scrolling distance of the scroll bar according to the virtual scrolling distance of the scroll bar, the total virtual scrolling distance of the scroll bar, and the actual total scrolling distance of the scroll bar; and displaying the movement of the scroll bar slider according to the actual scrolling distance of the scroll bar.

[0129] In some embodiments, calculating the virtual total scroll distance of the scroll bar includes:

[0130] maxScrollTop = max(0, totalHeight - visibleHeight)

[0131] where maxScrollTop is the virtual total scroll distance of the scroll bar, totalHeight is the total virtual height, and visibleHeight is the height of the block view area;

[0132] Calculating the actual total scroll distance of the scroll bar includes:

[0133] maxRealScrollTop = max(0, scrollH - scrollbarThumbHeight)

[0134] where maxRealScrollTop is the actual total scroll distance of the scroll bar, scrollH is the actual height of the scroll bar; scrollbarThumbHeight is the self - height of the scroll bar slider;

[0135] Calculating the actual scroll distance of the scroll bar includes:

[0136]

[0137] where realSrollTop is the actual scroll distance of the scroll bar, scrollTop is the virtual scroll distance, that is, the distance from the top of the block view area in the canvas to the top of all scale data.

[0138] In some embodiments, calculating the total virtual height includes:

[0139] totalHeight = totalRows×(size + gap)

[0140] where totalRows is the total number of data rows; calculating the total number of data rows includes:

[0141]

[0142] where totalSquares is the total amount of data, Nrow real is the actual number of complete blocks accommodated in each row of the block view area;

[0143] Calculating the height of the block view area includes:

[0144] visibleHeight = Ncol × (size + gap)

[0145] Wherein, Ncol is the number of complete squares accommodated in each column of the canvas; size is the side length dimension of each square; gap is the spacing between two adjacent squares;

[0146] The calculation of the self-height of the scroll bar slider includes:

[0147]

[0148] The second embodiment of the present application provides a rendering method for paging large-scale data. The inventor's research found that in previous dynamic paging rendering, when selecting rendering data, it was necessary to determine the current page number and the amount of data per page for dynamic paging, and determining the current page number and the amount of data per page for dynamic paging required calculation through the required data. The required data and the result of dynamic paging are mutually conditional. Therefore, in actual use, it is necessary to retrieve the index value or exact position of the data on the current page through other means such as web objects, and then infer the paging and page number from the data position, resulting in unnecessary waste of time resources. The technical solution of the present application can determine the dynamic paging parameters without retrieving the data, so as to save the time and resources of rendering. The following will refer to Figure 2a the flowchart shown in Figure 2d-1 and Figure 2d-2 the flowchart shown in( Figure 2d-1 and Figure 2d-2 In the two figures, A, B, C, and D represent the corresponding process nodes) for description. The method provided by this second embodiment includes the following steps S200-S250.

[0149] S200: The scroll bar scrolls a certain distance, obtains the initial parameters and determines whether to draw.

[0150] In the embodiment of the present application, taking the data scale of 10 billion data as an example, as Figure 2b shown, each square represents a piece of data. Among them, the color of the square represents different data, such as dark color representing error and light color representing focus. The canvas area consists of a square view area and a header part, that is, a text view area. Among them, the header part is the index value corresponding to the first square in its row in the database, and the index value starts from 0.

[0151] During operation, the embodiments of the present application monitor the scrolling behavior of the scroll bar in real time. When the scroll bar exhibits a scrolling behavior, the parameters of the initial rendering are obtained. Or when the canvas size changes, such as when the user changes the size of the interface, the initial parameters also need to be obtained or calculated. Among them, the initial parameters include the canvas width W, the canvas height H, the total data volume totalSquares, the block size size, the block spacing gap, the actual height of the scroll bar scrollH, the actual total scroll distance of the scroll bar maxRealScrollTop, and the virtual scroll distance of the scroll bar scrollTop.

[0152] Before starting the calculation, it is also necessary to determine whether the browser needs to be refreshed through the requestAnimationFrame API provided by the browser. If so, the subsequent calculation is started.

[0153] S210: Calculate the page number of the current page.

[0154] In the calculation stage, first, the approximate number of complete blocks that can be accommodated in each row of the canvas Nrow, and the number of complete blocks that can be accommodated in each column of the canvas Ncol are estimated according to the size and spacing of the blocks. Since the page setting of the embodiments of the present application is that the text elements on the left and the block view area on the right are arranged horizontally, the height of the block view area is the same as the canvas height. At this time, Ncol can be regarded as the actual number of complete blocks that can be accommodated in each column of the block view area.

[0155] Nrow and Ncol are obtained by rounding down according to the following formula:

[0156]

[0157] Then, the current page number pageNum at this time can be calculated by the following formula:

[0158]

[0159] Since Ncol is an exact value, the current page number calculated by pageNum is also relatively an exact value and matches the actual page number.

[0160] S220: Estimate the maximum text width of the current page, and calculate the width of the block view area and the number of blocks that can be displayed on each page according to the result.

[0161] Observe Figure 2b And 2c It can be known that the value of the text element is the index value of the first cell in each row in the scale data, and the maximum length of the text element in the canvas is related to the index value of the last cell in its row in the scale data. Since the index value increases as the squares are arranged, in this row, the text length of the index value of the first cell must be less than the text length of the index value of the last cell.

[0162] The index value of the last square on the current page in the scale data can be obtained according to the following formula:

[0163] maxLabelText = Nrow × Ncol × pageNum

[0164] Use the pixel measurement provided by Canvas to measure the text length of the index value of the last cell in this row, such as context.measureText(maxLabelText).width. Thus, by estimating the way of Nrow, the accurate current page number and the maximum width of the text element on the current page are obtained.

[0165] Since the width of the square view area and the width of the text element together constitute the width of the canvas, therefore, there is:

[0166] squaresAvailableWidth = W - maxLabelTextWidth

[0167] where squaresAvailableWidth is the width of the square view area.

[0168] According to the width of the square view area, the actual number Nrow of complete squares accommodated in each row of the square view area can now be accurately calculated real :

[0169]

[0170] Then the actual data volume pageSize per page can be obtained by multiplying the number of rows and columns, that is:

[0171] pageSize = Nrow real × Ncol

[0172] S230: Calculate the relevant data of the virtual scroll bar.

[0173] To load the scroll bar, it is necessary to obtain the actual scrolling distance of the scroll bar on the screen. Due to the correspondence between the total amount of data and the total display height of the data, the actual scrolling distance of the scroll bar / the actual total scrolling distance of the scroll bar is equal to the virtual scrolling distance of the scroll bar / the virtual total scrolling distance of the scroll bar. Among them, the virtual scrolling distance of the scroll bar is an initial parameter. To obtain the actual scrolling distance of the scroll bar, it is necessary to calculate the virtual total scrolling distance of the scroll bar and the actual total scrolling distance of the scroll bar.

[0174] Among them, the virtual total scrolling distance of the scroll bar should be the total virtual height of the data minus the height of the block view area.

[0175] For the height of the data visualization area (the height of the block view area) visibleHeight, since the relationship between the canvas height and size + gap is not always a multiple relationship, the height of the data visualization area is actually the product of size + gap and the number of rows:

[0176] visibleHeight = Ncol × (size + gap)

[0177] The total virtual height of the data totalHeight can be obtained by the total number of data rows totalRows × (size + gap). Since the number of complete blocks accommodated in each row is an actual value, totalRows can be obtained according to the following formula:

[0178]

[0179] Then the virtual total scrolling distance of the scroll bar can be obtained according to the following formula:

[0180] maxScrollTop = max(0, totalHeight - visibleHeight)

[0181] Among them, since visibleHeight and totalHeight are calculated values indirectly obtained through the canvas, the block view area may be deformed when the user operates the interface, so there may be an abnormal situation where visibleHeight is less than totalHeight. Therefore, here, a positive value processing is performed on it.

[0182] The actual total scrolling distance of the scroll bar can be obtained by subtracting the height of the slider itself from the actual height of the slider bar. Among them, the actual height of the scroll bar is an initial parameter, and the height of the slider itself is dynamically adjusted according to the ratio of the size of the block view area to the size of the total data area (i.e., the total virtual height), as shown in the following formula:

[0183]

[0184] Among them, the height of the slider should be at least greater than 20.

[0185] Then the actual total scrolling distance of the scroll bar can be obtained by the following formula:

[0186] maxRealScrollTop = max(0, scrollH - scrollbarThumbHeight)

[0187] For the same consideration as the virtual total scrolling distance of the scroll bar, it can only be a positive number here.

[0188] Then the actual scrolling distance of the scroll bar can be obtained by the following formula:

[0189]

[0190] Among them, scrollTop, maxScrollTop, and maxRealScrollTop have all been obtained through the above calculations.

[0191] S240: Use Canvas to draw the scroll bar according to the parameters of the scroll bar.

[0192] According to the actual scrolling distance of the scroll bar calculated in step S230, use Canvas to draw a custom scroll bar and slider, that is, render the scroll bar at the position of the actual scrolling distance.

[0193] S250: Query data according to the current page number and the amount of data per page and use ECharts to draw a bar chart.

[0194] To save memory and improve rendering efficiency, use the FIFO (First In First Out) cache policy to manage page data. Specifically, manage data according to the time order in which data enters the cache. When the cache capacity reaches the limit, the data that entered the cache earliest (i.e., the "oldest" data) will be removed first to make room for new data.

[0195] For example, when querying data, first check whether there is cached data in the cache location. If there is no cached data, query the data in the database through the service and store it in the cache location. The stored data is the latest data; at this time, if the cache has reached the capacity limit, remove the data that was stored in the cache earliest.

[0196] Then draw the queried data into a bar chart using ECharts, as Figure 2b and 2c shown.

[0197] If the data to be queried already exists in the cache location, the data can be directly obtained from the cache and drawn into a bar chart using ECharts.

[0198] After the drawing is completed, the embodiment of the present application will continue to monitor the scrolling time for the next data reading and rendering.

[0199] The technical solution of the embodiment of the present application (with a data scale of 10 billion) is run in a device environment with an Intel i7 processor and 16GB of memory. Through debugging, the block view area is adjusted to display 100 blocks per page. The results of the performance comparison experiment are shown in the following table:

[0200] Table 1 Results of the performance comparison experiment

[0201] Index Traditional method Method of this application First screen rendering time >500ms <50ms Scroll response time >200ms <16ms Average frame rate 10FPS 60FPS Maximum memory occupancy >300MB <80MB

[0202] As can be seen from the above table, the first-screen rendering time, scrolling response time, and maximum memory occupancy have all decreased significantly, while the average frame rate has increased significantly. This shows that the technical solution of the present application can greatly improve the rendering speed of the existing technology, saving rendering resources and time. The results of the user experience survey also show that most users indicate that the scrolling and interaction performance is smooth and are satisfied with the dynamic rendering effect.

[0203] The third aspect of the present application provides a rendering device for paging large-scale data. The canvas used includes a block view area and a text view area located on one side of it. The block view area is used to display each block in an array corresponding to each data, and the text view area is used to display the index value of the corresponding row of blocks in the large-scale data; as Figure 3 shown, the rendering device for paging large-scale data includes:

[0204] An obtaining unit for obtaining the virtual scrolling distance of the scroll bar scrolling; specifically, this obtaining unit can be used to implement step S10 and its optional embodiments in the first embodiment.

[0205] A calculation unit for calculating the current page number according to the virtual scrolling distance and the canvas size; also for calculating the index value of a block on the current page in the large-scale data according to the canvas size, the page number, and the block size, and obtaining the text width of the index value as the width of the text view area; also for calculating the width of the block view area according to the canvas size and the width of the text view area; also for calculating the number of blocks that can be displayed on each page in the block view area according to the width of the block view area, the block size, and the canvas size; specifically, this calculation unit can be used to implement steps S20-S50 and their optional embodiments in the first embodiment.

[0206] A display unit is configured to obtain corresponding data from the scale data according to the number of squares per page and the page number, and display the obtained data through the squares in the square view area in a certain manner. Specifically, the obtaining unit can be used to implement step S60 and its optional embodiments in the first embodiment.

[0207] Figure 4 FIG. is a structural schematic diagram of a computing device 900 provided by an embodiment of the present application. The computing device can execute the optional embodiments in the above method. The computing device can be a terminal, or a chip or a chip system inside the terminal. As Figure 4 shown, the computing device 900 includes: a processor 910, a memory 920, and a communication interface 930.

[0208] It should be understood that Figure 4 the communication interface 930 in the computing device 900 shown can be used to communicate with other devices, and specifically can include one or more transceiver circuits or interface circuits.

[0209] Among them, the processor 910 can be connected to the memory 920. The memory 920 can be used to store the program code and data. Therefore, the memory 920 can be an internal storage unit of the processor 910, or an external storage unit independent of the processor 910, or a component including an internal storage unit of the processor 910 and an external storage unit independent of the processor 910.

[0210] Optionally, the computing device 900 may further include a bus. Among them, the memory 920 and the communication interface 930 can be connected to the processor 910 through the bus. The bus can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 4 a non-arrowed line is used in FIG., but it does not mean that there is only one bus or one type of bus.

[0211] It should be understood that in the embodiments of the present application, the processor 910 may adopt a central processing unit (CPU). The processor may also be other general-purpose processors, digital signal processors (DSPs), application specific integrated circuits (ASICs), field programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc. Alternatively, the processor 910 adopts one or more integrated circuits for executing relevant programs to implement the technical solutions provided in the embodiments of the present application.

[0212] The memory 920 may include a read-only memory and a random access memory, and provide instructions and data to the processor 910. A part of the processor 910 may also include a non-volatile random access memory. For example, the processor 910 may also store information about the device type.

[0213] When the computing device 900 is running, the processor 910 executes the computer-executable instructions in the memory 920 to perform any operation step of the above method and any optional embodiment thereof.

[0214] It should be understood that the computing device 900 according to the embodiments of the present application may correspond to the corresponding subject executing the methods according to the embodiments of the present application, and the above and other operations and / or functions of each module in the computing device 900 respectively implement the corresponding processes of the methods in the present embodiments. For the sake of brevity, they will not be described in detail here.

[0215] Those of ordinary skill in the art can realize that the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present application.

[0216] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working processes of the systems, devices, and units described above can refer to the corresponding processes in the foregoing method embodiments and will not be described in detail here.

[0217] In several embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the units is only a logical function division. In actual implementation, there may be other division methods. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed couplings or direct couplings or communication connections between each other can be through some interfaces. The indirect couplings or communication connections of devices or units can be in electrical, mechanical, or other forms.

[0218] The units described as separate components may or may not be physically separated. The components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0219] In addition, in each embodiment of this application, the functional units can be integrated into a processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit.

[0220] If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of this application. The foregoing storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs that can store program codes.

[0221] The embodiments of this application also provide a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, it is used to execute the above method, and the method includes at least one of the solutions described in the above various embodiments.

[0222] The computer storage medium of the embodiments of the present application may adopt any combination of one or more computer-readable media. The computer-readable media may be computer-readable signal media or computer-readable storage media. The computer-readable storage media may be, for example, but not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or components, or any combination of the above. More specific examples (a non-exhaustive list) of the computer-readable storage media include: electrical connections with one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the above. In this document, the computer-readable storage media may be any tangible medium that contains or stores a program, which can be used by or in combination with an instruction execution system, device, or component.

[0223] The computer-readable signal media may include data signals propagated in a baseband or as part of a carrier wave, which carry computer-readable program codes. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The computer-readable signal media may also be any computer-readable media other than the computer-readable storage media, which can send, propagate, or transmit a program for use by or in combination with an instruction execution system, device, or component.

[0224] The program codes contained on the computer-readable media may be transmitted by any appropriate media, including but not limited to wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0225] The computer program codes for performing the operations of the present application may be written in one or more programming languages or combinations thereof. The programming languages include object-oriented programming languages such as Java, Smalltalk, C++, and also include conventional procedural programming languages such as the "C" language or similar programming languages. The program codes may be executed entirely on the user's computer, partially on the user's computer, executed as an independent software package, partially on the user's computer and partially on a remote computer, or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (for example, by using an Internet service provider to connect through the Internet).

[0226] In addition, the terms "first", "second", "third", etc. or similar terms such as Module A, Module B, Module C, etc. in the description and claims are only used to distinguish similar objects and do not represent a specific order for the objects. Understandably, the specific order or sequence can be interchanged when permitted so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein.

[0227] In the above description, the reference numerals indicating steps, such as S110, S120,... etc., do not necessarily mean that the steps will be executed in this order. The order of the front and back steps can be interchanged when permitted, or they can be executed simultaneously.

[0228] The term "comprising" used in the description and claims should not be construed as being limited to the content listed thereafter; it does not exclude other elements or steps. Therefore, it should be construed as specifying the presence of the stated features, wholes, steps or components, but does not exclude the presence or addition of one or more other features, wholes, steps or components and their groups. Therefore, the expression "a device comprising devices A and B" should not be limited to a device consisting only of components A and B.

[0229] The "one embodiment" or "embodiment" mentioned in this specification means that the specific features, structures or characteristics described in connection with the embodiment are included in at least one embodiment of the present application. Therefore, the phrases "in one embodiment" or "in an embodiment" that appear throughout this specification do not necessarily all refer to the same embodiment, but may refer to the same embodiment. In addition, in one or more embodiments, the various specific features, structures or characteristics can be combined in any suitable manner, as will be apparent to those of ordinary skill in the art from the present disclosure.

[0230] Note that the above is only the preferred embodiment of the present application and the technical principles applied. Those skilled in the art will understand that the present application is not limited to the specific embodiments described herein, and various obvious changes, re-adjustments and substitutions can be made by those skilled in the art without departing from the protection scope of the present application. Therefore, although the present application has been described in detail through the above embodiments, the present application is not limited to the above embodiments. Without departing from the concept of the present application, more other equivalent embodiments can be included, all of which fall within the protection scope of the present application.< / canvas>

Claims

1. A paging rendering method for scale data. The canvas used includes a block view area and a text view area located on one side of it. The block view area is used to display each block in an array corresponding to each data, and the text view area is used to display the index value of the corresponding row of blocks in the scale data; characterized in that, The method includes: Obtaining the virtual scrolling distance of the scroll bar; Calculating the current page number according to the virtual scrolling distance and the canvas size; Calculating the index value of a square in the current page in the scale data according to the canvas size, the page number, and the square size, and obtaining the text width of the index value as the width of the text view area; Calculating the width of the square view area according to the canvas size and the width of the text view area; Calculating the number of squares that can be displayed per page in the square view area according to the width of the square view area, the square size, and the canvas size; Obtaining the corresponding data from the scale data according to the number of squares per page and the page number, and displaying the obtained data through each square in the square view area in a certain manner.

2. The method according to claim 1, wherein The calculating of the current page number includes calculating the current page number according to the following formula: where pageNum is the current page number; scrollTop is the virtual scrolling distance, that is, the distance from the top of the square view area in the canvas to the top of all the scale data; Ncol is the number of complete squares that can be accommodated in each column of the canvas; size is the side length size of each square; gap is the spacing between two adjacent squares.

3. The method according to claim 1, wherein The calculating of the index value of a square in the current page in the scale data includes: maxLabelText = Nrow × Ncol × pageNum where maxLabelText is the index value of the last square in the current page in the scale data, and the index value of the scale data starts from 0; Nrow is the number of complete squares accommodated in each row of the canvas, Ncol is the number of complete squares accommodated in each column of the canvas; pageNum is the current page number.

4. The method according to claim 1, wherein The calculating of the width of the square view area includes: squaresAvailableWidth = W - maxLabelTextWidth where squaresAvailableWidth is the width of the square view area, W is the width of the canvas, and maxLabelTextWidth is the width of the index value of the last square in the current page in the scale data measured.

5. The method according to claim 4, wherein The calculating of the number of squares that can be displayed per page in the square view area includes: pageSize = Nrow real × Ncol where pageSize is the number of squares that can be displayed on each page, Nrow real is the actual number of complete squares that can be accommodated in each row of the square view area, and Ncol is the number of complete squares that can be accommodated in each column of the canvas; The Nrow real Calculated according to the following formula: size is the side length size of each square; gap is the spacing between two adjacent squares.

6. The method according to claim 1, characterized in that, It further includes: Calculating the total virtual scrolling distance of the scroll bar according to the total virtual height of the scale data and the height of the square view area; Calculating the actual total scrolling distance of the scroll bar according to the actual height of the scroll bar and the height of the scroll bar slider itself; Calculating the actual scrolling distance of the scroll bar according to the virtual scrolling distance of the scroll bar, the total virtual scrolling distance of the scroll bar, and the actual total scrolling distance of the scroll bar; Displaying the movement of the scroll bar slider according to the actual scrolling distance of the scroll bar.

7. The method according to claim 6, wherein The calculating of the total virtual scrolling distance of the scroll bar includes: maxScrollTop = max(0, totalHeight - visibleHeight) Among them, maxScrollTop is the virtual total scroll distance of the scroll bar, totalHeight is the total virtual height, and visibleHeight is the height of the block view area; The calculation of the actual total scroll distance of the scroll bar includes: maxRealScrollTop = max(0, scrollH - scrollbarThumbHeight) Among them, maxRealScrollTop is the actual total scroll distance of the scroll bar, scrollH is the actual height of the scroll bar; scrollbarThumbHeight is the self - height of the scroll bar slider; The calculation of the actual scroll distance of the scroll bar includes: Among them, realSrollTop is the actual scroll distance of the scroll bar, scrollTop is the virtual scroll distance, that is, the distance from the top of the block view area in the canvas to the top of all scale data.

8. The method according to claim 7, characterized in that, The calculation of the total virtual height includes: totalHeight = totalRows×(size + gap) Among them, totalRows is the total number of data rows; the calculation of the total number of data rows includes: where totalSquares is the total amount of data, and Nrow real is the actual number of complete squares accommodated in each row of the square view area; The calculation of the height of the block view area includes: visibleHeight = Ncol×(size + gap) Among them, Ncol is the number of complete blocks accommodated in each column of the canvas; size is the side length dimension of each block; gap is the spacing between two adjacent blocks; The calculation of the self - height of the scroll bar slider includes: Among them, A is a preset value, and A is greater than 0 and less than or equal to the track length.

9. The method according to any one of claims 1-8, characterized in that, The display of each data obtained through each block in the block view area in a certain way includes: drawing a block diagram by Echarts; The display of the movement of the scroll bar slider includes: drawing the scroll bar and the slider through canvas.

10. A rendering device for paging large-scale data. The canvas used includes a square view area and a text view area located on one side thereof. The square view area is used to display the squares in an array corresponding to each piece of data, and the text view area is used to display the index value of the corresponding row of squares in the large-scale data; characterized in that, It includes: An acquisition unit, used to acquire the virtual scroll distance of the scroll bar scrolling; A calculation unit, used to calculate the current page number according to the virtual scroll distance and the canvas size; It is also used to calculate the index value of a block on the current page in the scale data according to the canvas size, the page number and the block size, and obtain the text width of the index value as the width of the text view area; It is also used to calculate the width of the block view area according to the canvas size and the width of the text view area; it is also used to calculate the number of blocks that can be displayed on each page in the block view area according to the width of the block view area, the block size, and the canvas size; A display unit, used to obtain the corresponding data from the scale data according to the number of blocks on each page and the page number, and display each data obtained through each block in the block view area in a certain way.

Images