Data rendering method, apparatus and electronic device

Abstract

The disclosure provides a data rendering method and device and electronic equipment, relates to the field of data processing, and particularly relates to the technical field of data rendering, page loading and the like. The specific implementation scheme is as follows: a first data acquisition request is sent to a backend; the first data acquisition request is used to request acquisition of preceding page data, and the preceding page data is at least one page data in front in sequence in a plurality of page data obtained by performing page processing on to-be-rendered data; the preceding page data sent by the backend is received; a second data acquisition request is sent to the backend; the second data acquisition request is used to request acquisition of subsequent page data, and the subsequent page data is at least one page data after the preceding page data in sequence in the plurality of page data; and in the process of waiting for the backend to return the subsequent page data, data rendering and display are performed according to the preceding page data. Thus, the front end can render and display the preceding page data while waiting for acquisition of the subsequent page data, thereby improving user experience.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the field of data processing, in particular to the technical field of data rendering, page loading and the like, and more particularly to a data rendering method and device and an electronic device. BACKGROUND

[0002] When facing a data processing demand of hundreds of billions, such as querying the number of log data with the field method as get in the log data of hundreds of billions of rows in a period of time, and displaying the query result in the form of a column chart, due to the need to search the data amount of hundreds of billions, the processing speed is slow and the response time is long, during which the user can only see that the page is in a loading state, and cannot normally view the column chart, and the user experience is poor. SUMMARY

[0003] The present disclosure provides a data rendering method, device and electronic device.

[0004] According to a first aspect of the present disclosure, a data rendering method applied to a front end is provided, comprising:

[0005] sending a first data acquisition request to a back end; wherein the first data acquisition request is used to request to acquire previous page data, and the previous page data is at least one page data in front in order in a plurality of page data obtained by performing page processing on to-be-rendered data;

[0006] receiving the previous page data sent by the back end;

[0007] sending a second data acquisition request to the back end; wherein the second data acquisition request is used to request to acquire subsequent page data, and the subsequent page data is at least one page data after the previous page data in order in the plurality of page data;

[0008] during waiting for the back end to return the subsequent page data, performing data rendering and display according to the previous page data.

[0009] According to a second aspect of the present disclosure, a data rendering method applied to a back end is provided, comprising:

[0010] receiving a first data acquisition request sent by a front end; wherein the first data acquisition request is used to request to acquire previous page data, and the previous page data is at least one page data in front in order in a plurality of page data obtained by performing page processing on to-be-rendered data;

[0011] sending the previous page data to the front end;

[0012] receive a second data acquisition request sent by the front end; wherein the second data acquisition request is used to request to acquire subsequent page data, and the subsequent page data is at least one page data in the plurality of page data in sequence after the previous page data.

[0013] According to a third aspect of the present disclosure, a data rendering device applied to a front end is provided, comprising:

[0014] a first sending module configured to send a first data acquisition request to a back end; wherein the first data acquisition request is used to request to acquire previous page data, and the previous page data is at least one page data in a plurality of page data obtained by paging processing of to-be-rendered data in sequence in front;

[0015] a first receiving module configured to receive the previous page data sent by the back end;

[0016] a second sending module configured to send a second data acquisition request to the back end; wherein the second data acquisition request is used to request to acquire subsequent page data, and the subsequent page data is at least one page data in the plurality of page data in sequence after the previous page data;

[0017] a first processing module configured to perform data rendering and display according to the previous page data in a process of waiting for the back end to return the subsequent page data.

[0018] According to a fourth aspect of the present disclosure, a data rendering device applied to a back end is provided, comprising:

[0019] a second receiving module configured to receive a first data acquisition request sent by a front end; wherein the first data acquisition request is used to request to acquire previous page data, and the previous page data is at least one page data in a plurality of page data obtained by paging processing of to-be-rendered data in sequence in front;

[0020] a third sending module configured to send the previous page data to the front end;

[0021] a third receiving module configured to receive a second data acquisition request sent by the front end; wherein the second data acquisition request is used to request to acquire subsequent page data, and the subsequent page data is at least one page data in the plurality of page data in sequence after the previous page data.

[0022] According to a fifth aspect of the present disclosure, an electronic device is provided, comprising:

[0023] at least one processor; and

[0024] a memory connected with the at least one processor in communication; wherein,

[0025] The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the data rendering method according to the first aspect of the present disclosure, or perform the data rendering method according to the second aspect of the present disclosure.

[0026] According to a sixth aspect of the present disclosure, a non-transitory computer-readable storage medium of computer instructions is provided, the computer instructions being used to enable the computer to perform the data rendering method according to the first aspect of the present disclosure, or perform the data rendering method according to the second aspect of the present disclosure.

[0027] According to a seventh aspect of the present disclosure, a computer program product is provided, comprising a computer program, the computer program being used to implement the data rendering method according to the first aspect of the present disclosure, or implement the data rendering method according to the second aspect of the present disclosure, when the computer program is executed by a processor.

[0028] It should be understood that the content described in this part is not intended to identify key or important features of the embodiments of the present disclosure, nor to limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description. BRIEF DESCRIPTION OF DRAWINGS

[0029] The accompanying drawings are used to better understand the present scheme, and do not limit the present disclosure. Among them:

[0030] Figure 1 A flowchart of the data rendering method provided by the first embodiment of the present disclosure is shown in the figure;

[0031] Figure 2 A flowchart of the data rendering method provided by the second embodiment of the present disclosure is shown in the figure;

[0032] Figure 3 A flowchart of the data rendering method provided by the third embodiment of the present disclosure is shown in the figure;

[0033] Figure 4 A flowchart of the data rendering method provided by the fourth embodiment of the present disclosure is shown in the figure;

[0034] Figure 5 A flowchart of the data rendering method provided by the fifth embodiment of the present disclosure is shown in the figure;

[0035] Figure 6 A structural diagram of the data rendering device provided by the sixth embodiment of the present disclosure is shown in the figure;

[0036] Figure 7 A structural diagram of the data rendering device provided by the seventh embodiment of the present disclosure is shown in the figure;

[0037] Figure 8A schematic block diagram of an example electronic device that can be used to implement embodiments of the present disclosure is shown. DETAILED DESCRIPTION

[0038] Exemplary embodiments of the present disclosure are described herein with reference to the accompanying drawings, which are included to provide a thorough understanding of embodiments of the present disclosure by a person of ordinary skill in the art, and should not be construed as limiting the scope of the present disclosure. Thus, persons of ordinary skill in the art will recognize various changes and modifications that can be made to the embodiments described herein, without departing from the scope and spirit of the present disclosure. Also, in the following description, descriptions of well-known functions and constructions are omitted for clarity and conciseness.

[0039] The data rendering method, apparatus and electronic device of embodiments of the present disclosure are described below with reference to the accompanying drawings.

[0040] Figure 1 A flowchart of the data rendering method provided by Embodiment One of the present disclosure is shown.

[0041] It should be noted that the data rendering method of embodiments of the present disclosure is applied to the front end.

[0042] As shown in Figure 1 The data rendering method can include the following steps S101-S104:

[0043] In step S101, a first data acquisition request is sent to the back end.

[0044] The first data acquisition request is used to request acquisition of preceding page data, which is at least one page data in front in order among a plurality of page data obtained by page processing of the to-be-rendered data.

[0045] The to-be-rendered data can be any data, such as table data, column chart, etc.

[0046] As an example, if the to-be-rendered data is part or all of the data in a table with one hundred billion rows, the plurality of rows of to-be-rendered data can be page processed according to a set number of rows to obtain a plurality of page data, wherein one page data contains a set number of rows of to-be-rendered data.

[0047] As another example, if the to-be-rendered data is a column chart, one vertical bar (one column) in the column chart can be regarded as one page data to obtain a plurality of page data.

[0048] In embodiments of the present disclosure, when the front end needs to render and display the to-be-rendered data, the front end can send a first data acquisition request to the back end to request acquisition of at least one page data in front in order among a plurality of page data obtained by page processing of the to-be-rendered data.

[0049] Optionally, the plurality of page data obtained by the page processing of the to-be-rendered data is uniquely identified by a page number, and the first data acquisition request carries the page number of the previous page data.

[0050] As a possible implementation, any page data is obtained by reserving data in a target data range corresponding to the page data in the to-be-rendered data and setting data in each data range other than the target data range to a set value. In this way, by reserving only the data in the target data range, the amount of data that needs to be processed by the front end can be significantly reduced, thereby accelerating the rendering speed.

[0051] For the example in which the to-be-rendered data is part or all of the data in the table with 100 billion rows, the target data range corresponding to any page data is a specific set number of rows corresponding to the page data; for the example in which the to-be-rendered data is a column chart, the target data range corresponding to any page data is a horizontal category corresponding to the page data.

[0052] The set value can be a null value, a placeholder, or a default value, etc.

[0053] As an example, assuming that the to-be-rendered data is a column chart, and the column chart is composed of 30 vertical bars (30 columns), the page data of the first page is data composed of 30 vertical bars (30 columns), in which only the first vertical bar (the first column) has data, and the data of the remaining 29 vertical bars (29 columns) is set to a set value, such as 0, and the page data of other pages is similar and will not be described here.

[0054] In this way, by page processing, the amount of data requested by the front end at a time is reduced, thereby reducing the pressure on the back end and the occupation of network bandwidth, and also reducing the error rate caused by loading a large amount of data at a time.

[0055] Step S102, receiving the previous page data sent by the back end.

[0056] In the embodiments of the present disclosure, after receiving the first data acquisition request sent by the front end, the back end sends the previous page data requested by the front end to the front end. Correspondingly, the front end can receive the previous page data sent by the back end.

[0057] Step S103, sending a second data acquisition request to the back end.

[0058] The second data acquisition request is used to request to acquire the next page data, and the next page data is at least one page data in the plurality of page data that is sequentially after the previous page data.

[0059] That is, the order of the latter page data in the plurality of page data obtained by the page processing of the to-be-rendered data is located after the order of the former page data. In this way, by sequentially obtaining the page data, the integrity and consistency of the data can be ensured, and the problems of data loss or duplication can be avoided.

[0060] In the embodiments of the present disclosure, the execution order of the front end sending the first data acquisition request to the back end and the front end sending the second data acquisition request to the back end is not limited. Alternatively, the front end can send the first data acquisition request and the second data acquisition request to the back end at the same time; or the front end can send the first data acquisition request to the back end first, and then send the second data acquisition request to the back end after receiving the former page data sent by the back end; or the front end can send the first data acquisition request to the back end first, and then send the second data acquisition request to the back end (whether or not the former page data sent by the back end is received), and the like.

[0061] In step S104, during the process of waiting for the back end to return the latter page data, data rendering and display are performed according to the former page data.

[0062] In the embodiments of the present disclosure, the data rendering and display can be performed according to the former page data during the process of waiting for the back end to return the latter page data (after the former page data sent by the back end is received). In this way, the user can see part of the data (the former page data) without waiting for all the data to be loaded, thereby improving the loading speed and user experience. In addition, the data rendering and display are progressive, and the user can see more data as the latter page data is gradually loaded. This dynamic loading method achieves the animation effect of sequentially displaying the page data, and makes the page loading more smooth.

[0063] As a possible implementation manner, before the data rendering is performed, the former page data can be processed to process the former page data into data required for the data rendering.

[0064] The data rendering method of the embodiments of the present disclosure reduces the amount of data requested by the front end at a time through page processing, thereby reducing the pressure on the back end and the occupation of network bandwidth, and also reducing the error rate caused by loading a large amount of data at one time. By sequentially obtaining the page data, the integrity and consistency of the data can be ensured, and the problems of data loss or duplication can be avoided. For a large data application scenario, the user can gradually browse the data instead of loading all the data at one time, thereby improving the loading speed and user experience.

[0065] It should be noted that, in the technical solutions of the present disclosure, the collection, storage, use, processing, transmission, provision and disclosure of user personal information are all performed on the premise of obtaining the consent of the user, and all comply with the relevant legal regulations and do not violate public order and good customs.

[0066] For the purpose of clearly illustrating the above embodiment, the present disclosure further provides a data rendering method.

[0067] Figure 2 A flowchart of the data rendering method provided by the second embodiment of the present disclosure is shown in FIG. 2.

[0068] As shown in FIG. 2, the data rendering method can include the following steps S201-S204: Figure 2

[0069] Step S201, sending a first data acquisition request to a backend.

[0070] In any one of the embodiments of the present disclosure, the front end can send a data acquisition request to the backend through an interface corresponding to the data to be rendered. That is, the front end requests the previous page data through the interface.

[0071] Thus, the front end requests data through the interface, which can realize on-demand loading, i.e., the front end will only load data when needed, thereby reducing unnecessary resource consumption.

[0072] Step S202, receiving the previous page data sent by the backend.

[0073] In any one of the embodiments of the present disclosure, the previous page data sent by the backend can be received through an interface corresponding to the data to be rendered. That is, the backend returns the previous page data through the interface.

[0074] The explanation and description of steps S201-S202 can be referred to the related description in any one of the embodiments of the present disclosure, which will not be repeated here.

[0075] Step S203, determining whether there is unacquired page data according to the number of pages of the previous page data and the total number of pages of the data to be rendered, and sending a second data acquisition request to the backend in the case that there is unacquired page data.

[0076] In the embodiments of the present disclosure, after receiving the previous page data sent by the backend, the front end can first determine whether there is unacquired page data according to the number of pages of the previous page data and the total number of pages of the data to be rendered, and then send a second data acquisition request to the backend in the case that there is unacquired page data. Thus, by pre-judging whether there is unacquired page data and sending a data acquisition request only when necessary, unnecessary network requests can be avoided, the occupation of network bandwidth can be reduced, the processing load of the backend can be reduced, and the backend can more effectively process other requests.

[0077] ​Optionally, the page number of the previous page data can be selected by the front end when requesting to obtain the previous page data, and the page number of the previous page data can be carried in the first data obtaining request sent by the front end to the back end, so that the back end determines which page data obtained by the back end from the plurality of page data obtained by the back end from the to-be-rendered data through the paging processing is the previous page data requested by the first data obtaining request.

[0078] Optionally, the total page number of the to-be-rendered data can be sent by the back end to the front end synchronously when the back end sends the previous page data to the front end, that is, after receiving the first data obtaining request sent by the front end, the back end sends the previous page data requested by the front end and the total page number of the to-be-rendered data to the front end.

[0079] Step S204, in the process of waiting for the back end to return the next page data, data rendering and display are performed according to the previous page data.

[0080] The explanation of step S204 can be referred to the related description in any embodiment of the present disclosure, which will not be repeated here.

[0081] The data rendering method of the embodiment of the present disclosure can realize on-demand loading through the interface request of the front end, that is, the front end only loads data when needed, thereby reducing unnecessary resource consumption. By pre-judging whether there is unobtained page data and sending a data obtaining request only when necessary, unnecessary network requests can be avoided, network bandwidth occupation can be reduced, and the processing load of the back end can be reduced, so that the back end can more effectively process other requests.

[0082] It should be noted that in the present disclosure, there can be a case that at least one page data has been obtained before the previous page data is obtained, which will be described below in combination with Figure 3 The process is described below.

[0083] Figure 3 A flowchart of the data rendering method provided in the third embodiment of the present disclosure is shown in FIG. 3.

[0084] As shown in FIG. 3, the data rendering method can include the following steps S301 to S306: Figure 3

[0085] Step S301, a first data obtaining request is sent to a back end.

[0086] The explanation of step S301 can be referred to the related description in any embodiment of the present disclosure, which will not be repeated here.

[0087] Step S302, in the process of waiting for the back end to return the previous page data, data rendering and display are performed according to the obtained historical page data.

[0088] ​The history page data is at least one page data in the plurality of page data and is in sequence before the previous page.

[0089] In the embodiment of the present disclosure, the front end has obtained the history page data before obtaining the previous page data, that is, the front end has sent at least one data obtaining request for requesting to obtain part or all of the history page data to the front end before sending the first data obtaining request to the back end, and has also received the history page data sent by the back end. At this time, the front end can perform data rendering and display according to the obtained history page data after sending the first data obtaining request to the back end (in the process of waiting for the back end to return the previous page data).

[0090] As a possible implementation manner, if the number of the history page data is one, the data rendering and display can be directly performed according to the history page data in the process of performing data rendering and display according to the obtained history page data; if the number of the history page data is a plurality, the plurality of history page data needs to be fused first, and then data rendering and display are performed according to the fused data in the process of performing data rendering and display according to the obtained history page data.

[0091] Therefore, by performing data rendering and display according to the obtained history page data in the process of waiting for the back end to return the previous page data, the user will not see a blank screen or a loading animation, and the user experience is improved.

[0092] Step S303, receiving the previous page data sent by the back end.

[0093] Step S304, sending a second data obtaining request to the back end.

[0094] The explanation and description of steps S303 to S304 can be referred to the related description in any embodiment of the present disclosure, and will not be described herein.

[0095] Step S305, generating fused page data according to the previous page data and the history page data in the process of waiting for the back end to return the next page data.

[0096] In the embodiment of the present disclosure, the front end has obtained the history page data before obtaining the previous page data, so that the front end needs to perform data rendering and display according to the previous page data and the history page data in the process of waiting for the back end to return the next page data. Specifically, the front end can first perform fusion processing on the previous page data and the history page data to obtain fused page data, and then perform data rendering and display according to the fused page data. Therefore, by performing fusion processing on the data to be rendered first, and then performing data rendering and display according to the fused data, the number of rendering times can be reduced, and the rendering efficiency is improved.

[0097] As an example, assuming that the data to be rendered is a column chart, and the column chart is composed of 4 vertical bars (4 columns), and the data amounts corresponding to the 4 vertical bars (4 columns) are 30, 70, 50, and 80 respectively, if any page data is to retain the data in the target data range corresponding to the page data in the data to be rendered, and the data in each data range other than the target data range in the data to be rendered is set to a set value (the set value is assumed to be 0), then the page data of the first page can be represented as [30, 0, 0, 0], the page data of the second page can be represented as [0, 70, 0, 0], the page data of the third page can be represented as [0, 0, 50, 0], and the page data of the fourth page can be represented as [0, 0, 0, 80]. Assuming that the page data of the first page is historical page data, and the page data of the second page is previous page data, the fusion processing of the previous page data and the historical page data can obtain the following fusion page data: [30, 70, 0, 0].

[0098] In step S306, data rendering and display are performed according to the fusion page data.

[0099] The data rendering method of the embodiments of the present disclosure can reduce the number of rendering times and improve rendering efficiency by performing fusion processing on the data to be rendered before rendering, and then performing data rendering and display according to the fused data.

[0100] It should be noted that the above embodiments are described from the perspective of the front end, and in order to more clearly illustrate the data rendering process, the present disclosure provides a possible implementation manner of a data rendering method described from the perspective of the back end, Figure 4 FIG. 4 is a flowchart of a data rendering method provided in Embodiment Four of the present disclosure.

[0101] As shown in FIG. 4, the data rendering method can include the following steps S401 to S403: Figure 4

[0102] In step S401, a first data acquisition request sent by the front end is received.

[0103] The first data acquisition request is used to request to acquire previous page data, and the previous page data is at least one page data in front in order in a plurality of page data obtained by performing page processing on the data to be rendered.

[0104] In the embodiments of the present disclosure, when the front end needs to render and display the data to be rendered, the front end can send a first data acquisition request to the back end to request to acquire at least one page data in front in order in a plurality of page data obtained by performing page processing on the data to be rendered. Correspondingly, the back end can receive the first data acquisition request sent by the front end.

[0105] ​The explanation of this step can be referred to the related description in any embodiment of the present disclosure, which will not be repeated here.

[0106] In step S402, the front end is sent the previous page data.

[0107] In the embodiments of the present disclosure, after receiving the first data acquisition request sent by the front end, the back end sends the previous page data requested by the front end to the front end.

[0108] Optionally, the plurality of page data obtained by the pagination processing of the to-be-rendered data is uniquely identified by the page number, and the first data acquisition request carries the page number of the previous page data. Thus, the back end can determine which page data is the previous page data requested by the first data acquisition request from the plurality of page data obtained by the pagination processing of the to-be-rendered data according to the page number of the previous page data carried in the first data acquisition request, and send the determined previous page data to the front end.

[0109] The explanation of this step can be referred to the related description in any embodiment of the present disclosure, which will not be repeated here.

[0110] In step S403, the second data acquisition request sent by the front end is received.

[0111] The second data acquisition request is used to request to acquire the at least one page data after the previous page data in the plurality of page data.

[0112] In the embodiments of the present disclosure, the front end sends the second data acquisition request to the back end to request to acquire the at least one page data after the previous page data in the plurality of page data obtained by the pagination processing of the to-be-rendered data. Correspondingly, the back end can receive the second data acquisition request sent by the front end.

[0113] The explanation of this step can be referred to the related description in any embodiment of the present disclosure, which will not be repeated here.

[0114] The data rendering method of the embodiments of the present disclosure reduces the amount of data requested by the front end at a time through the pagination processing, thereby reducing the pressure on the back end and the occupation of network bandwidth, and also reducing the error rate caused by loading a large amount of data at a time. By sequentially acquiring the page data, the integrity and consistency of the data can be ensured, and the problems of data loss or duplication can be avoided. For the application scenario of large data volume, the user can gradually browse the data instead of loading all the data at a time, thereby improving the loading speed and user experience.

[0115] In order to clearly illustrate the above-mentioned embodiments, examples are given.

[0116] In the related art, the column chart display scheme is that the front end initiates a request for an interface, and after the interface returns data, the front end performs column chart rendering. However, if it is necessary to aggregate 100 billion rows of data (for example, querying the number of logs with the field method as get in 100 billion rows of logs in a certain period of time and displaying in the form of a column chart), after the page requests the column chart interface, the interface itself needs to search 100 billion logs, which is slow and the interface response time is long. During this period, the page is always in a loading state and cannot normally display the column chart, which is poor user experience.

[0117] To solve the problem of slow response of the column chart interface, the present disclosure loads the column chart by page, thereby achieving column chart display Figure 1 of one by one, improving user experience.

[0118] It should be noted that the present disclosure is mainly used for the scene of aggregating 100 billion data and displaying the aggregation result to a column chart, and is mainly used to solve the problems of large data volume, slow aggregation interface response, slow column chart loading, and poor user experience.

[0119] Figure 5 A flowchart of the data rendering method provided by Embodiment Five of the present disclosure is shown.

[0120] As shown in Figure 5 , the data rendering method can include the following steps S501 to S512:

[0121] Step S501, page initialization.

[0122] The page starts loading the column chart, at which time the page is in a column chart loading state.

[0123] Step S502, interface requests first page data of column chart.

[0124] The front end requests the first page data of the column chart from the back end through the interface. Among them, one vertical bar (one column) in the column chart is regarded as one page data, and the first page data refers to the first vertical bar (one column) in the column chart.

[0125] Step S503, the interface returns the first page data of the column chart and the total number of pages of the column chart.

[0126] The back end returns the requested first page data of the column chart to the front end through the interface, and returns the total number of pages of the column chart. Among them, the total number of pages of the column chart refers to the total number of vertical bars (one column) included in the column chart. For example, assuming that a column chart is composed of 30 vertical bars (30 columns), the total number of pages of the column chart is 30.

[0127] Step S504, data processing into data required for rendering the column chart.

[0128] Before the column chart rendering, the first page data of the obtained column chart needs to be processed, so as to process the first page data of the obtained column chart into data required for rendering the column chart, and the column chart is rendered according to the processed data.

[0129] Step S505, column chart rendering.

[0130] Step S506, judging the size relationship between the current page and the total number of column chart pages to determine whether to request the next page data.

[0131] Optionally, the current page and the total number of column chart pages can be compared to determine whether to request the next page data. If there is a next page, the interface continues to request the next page data; if there is no next page, it does not continue to request.

[0132] Step S507, if no, it does not continue to request.

[0133] Step S508, if yes, the interface requests the next page data of the column chart.

[0134] Step S509, the interface returns the next page data of the column chart and the total number of column chart pages.

[0135] Step S510, the next page data of the obtained column chart is fused with the previously obtained column chart page data, and the fused data is processed into data required for rendering the column chart.

[0136] After the next page data of the column chart is returned, the obtained next page data of the column chart is fused with the previously obtained column chart page data, and then the column chart is rendered, thereby realizing the effect of column chart page loading.

[0137] Step S511, column chart rendering.

[0138] Step S512, judging the size relationship between the current page and the total number of column chart pages to determine whether to request the next page data.

[0139] In summary, the column chart interface realizes the page mechanism, and the purpose is to reduce the response time of a single interface. If the page mechanism is not realized, the interface response is 30s, and the response speed of the column chart page interface is 1s. The front end requests the column chart interface in series, and the column chart is rendered after each interface returns. The front end requests the column chart interface in series, and the response data is spliced through a certain mechanism. For example, the first page column chart response data is [0, 0, 0, 80], the second page column chart response data is [0, 0, 50, 0], and the front end splices [0, 0, 50, 80] to render the column chart. As a result, the response time of a single interface is reduced, and the effect of column chart page loading is realized. Compared with waiting for a long time for an interface to display the loading state, the loading speed and user experience are improved.

[0140] The data rendering method provided in the embodiments of the present disclosure corresponds to the data rendering method described above Figures 1 to 3 The data rendering method provided in the embodiments of the present disclosure corresponds to the data rendering method described above Figures 1 to 3 The data rendering method provided in the embodiments of the present disclosure corresponds to the data rendering method described above

[0141] Figure 6 A structural schematic diagram of the data rendering device provided in the sixth embodiment of the present disclosure.

[0142] As Figure 6 shown, the data rendering device 600 can include a first sending module 610, a first receiving module 620, a second sending module 630, and a first processing module 640.

[0143] The first sending module 610 is configured to send a first data acquisition request to the backend, where the first data acquisition request is used to request to acquire previous page data, and the previous page data is at least one page data in front of the multiple page data obtained by performing page processing on the to-be-rendered data.

[0144] The first receiving module 620 is configured to receive the previous page data sent by the backend.

[0145] The second sending module 630 is configured to send a second data acquisition request to the backend, where the second data acquisition request is used to request to acquire subsequent page data, and the subsequent page data is at least one page data after the previous page data in the multiple page data.

[0146] The first processing module 640 is configured to perform data rendering and display according to the previous page data during a process of waiting for the backend to return the subsequent page data.

[0147] In a possible implementation of the embodiments of the present disclosure, the device described above further includes:

[0148] The determining module is configured to determine whether there is unacquired page data according to the number of pages of the previous page data and the total number of pages of the to-be-rendered data, and send the second data acquisition request to the backend in a case where there is unacquired page data.

[0149] In a possible implementation of the embodiments of the present disclosure, the device described above further includes:

[0150] The second processing module is configured to perform data rendering and display according to the acquired historical page data during a process of waiting for the backend to return the previous page data, where the historical page data is at least one page data before the previous page in the multiple page data.

[0151] In a possible implementation of the present disclosure, the first processing module 640 is further configured to:

[0152] In the process of waiting for the backend to return the next page data, the fusion page data is generated according to the previous page data and the historical page data;

[0153] The data rendering and display are performed according to the fusion page data.

[0154] In a possible implementation of the present disclosure, the first sending module 610 is further configured to:

[0155] The data acquisition request is sent to the backend through the interface corresponding to the to-be-rendered data;

[0156] The first receiving module 620 is further configured to:

[0157] The previous page data sent by the backend is received through the interface corresponding to the to-be-rendered data;

[0158] The second sending module 630 is further configured to:

[0159] The second data acquisition request is sent to the backend through the interface corresponding to the to-be-rendered data.

[0160] In a possible implementation of the present disclosure, any page data is obtained by retaining the data in a target data range corresponding to the page data in the to-be-rendered data and setting the data in each data range other than the target data range in the to-be-rendered data to a set value.

[0161] The data rendering apparatus provided in the present disclosure reduces the amount of data requested by the front end at a time through the page processing, thereby reducing the pressure on the backend and the occupation of network bandwidth, and also reducing the error rate caused by loading a large amount of data at a time. For the application scenario of a large amount of data, the user can gradually browse the data instead of loading all the data at a time, thereby improving the loading speed and user experience.

[0162] The data rendering method provided in the present embodiment corresponds to the data rendering method provided in the present embodiment. Figure 4 The data rendering apparatus provided in the present disclosure corresponds to the data rendering method provided in the present embodiment. Figure 4 Therefore, the implementation of the data rendering method is also applicable to the data rendering apparatus provided in the present disclosure, and will not be described in detail in the present disclosure.

[0163] Figure 7 FIG. 7 is a structural schematic diagram of the data rendering apparatus provided in the seventh embodiment of the present disclosure.

[0164] As Figure 7As shown, the data rendering apparatus 700 can include a second receiving module 710, a third sending module 720, and a third receiving module 730.

[0165] The second receiving module 710 is configured to receive a first data acquisition request sent by the front end, where the first data acquisition request is used to request acquisition of previous page data, and the previous page data is at least one page data in front of a plurality of page data obtained by performing page processing on the to-be-rendered data.

[0166] The third sending module 720 is configured to send the previous page data to the front end.

[0167] The third receiving module 730 is configured to receive a second data acquisition request sent by the front end, where the second data acquisition request is used to request acquisition of subsequent page data, and the subsequent page data is at least one page data after the previous page data in the plurality of page data.

[0168] In a possible implementation of the present disclosure, the second receiving module 710 is further configured to:

[0169] receive the first data acquisition request sent by the front end through an interface corresponding to the to-be-rendered data;

[0170] The third sending module 720 is further configured to:

[0171] send the previous page data to the front end through an interface corresponding to the to-be-rendered data;

[0172] The third receiving module 730 is further configured to:

[0173] receive the second data acquisition request sent by the front end through an interface corresponding to the to-be-rendered data.

[0174] In a possible implementation of the present disclosure, any page data is obtained by retaining data in a first data range corresponding to the page data in the to-be-rendered data and setting data in each data range other than the first data range to a set value.

[0175] The data rendering apparatus of the present disclosure reduces the amount of data requested by the front end at a time through page processing, thereby reducing the pressure on the back end and the occupation of network bandwidth, and also reducing the error rate caused by loading a large amount of data at a time. By sequentially acquiring the page data, the integrity and consistency of the data can be ensured, and the problems of data loss or duplication can be avoided. For a large data application scenario, the user can gradually browse the data instead of loading all the data at a time, thereby improving the loading speed and user experience.

[0176] To achieve the above-mentioned embodiments, the present disclosure further provides an electronic device, which can include at least one processor; and a memory connected with the at least one processor in communication; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the data rendering method proposed in any one of the above-mentioned embodiments of the present disclosure.

[0177] To achieve the above-mentioned embodiments, the present disclosure further provides a non-transitory computer readable storage medium storing computer instructions, wherein the computer instructions are used to make a computer execute the data rendering method proposed in any one of the above-mentioned embodiments of the present disclosure.

[0178] To achieve the above-mentioned embodiments, the present disclosure further provides a computer program product, which includes a computer program, and the computer program, when executed by a processor, implements the data rendering method proposed in any one of the above-mentioned embodiments of the present disclosure.

[0179] According to embodiments of the present disclosure, the present disclosure further provides an electronic device, a readable storage medium and a computer program product.

[0180] Figure 8 A schematic block diagram of an example electronic device that can be used to implement embodiments of the present disclosure is shown.

[0181] The electronic device can include the server and the client in the above-mentioned embodiments. The electronic device is intended to represent various forms including digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device can also represent various forms of mobile devices, such as personal digital assistants, cellular telephones, smart phones, wearable devices, and other similar computing devices. The components shown here, their connections and relationships, and their functions, are meant to be examples only, and are not intended to limit the implementations of the present disclosure described and / or claimed in this document.

[0182] As shown in Figure 8 The device 800 includes a computing unit 801 that can perform various appropriate actions and processes in accordance with a computer program stored in a ROM (Read-Only Memory) 802 or a computer program loaded into a RAM (Random Access Memory) 803 from a storage unit 807. In the RAM 803, various programs and data required for the operation of the device 800 can also be stored. The computing unit 801, the ROM 802, and the RAM 803 are connected to each other through a bus 804. An I / O (Input / Output) interface 805 is also connected to the bus 804.

[0183] A plurality of components in the device 800 are connected to the I / O interface 805, including: an input unit 806, such as a keyboard, a mouse, etc.; an output unit 807, such as various types of displays, speakers, etc.; a storage unit 808, such as a magnetic disk, an optical disk, etc.; and a communication unit 809, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 809 allows the device 800 to exchange information / data with other devices through a computer network, such as the Internet, and / or various telecommunication networks.

[0184] The computing unit 801 can be various general and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 801 include, but are not limited to, a CPU (Central Processing Unit), a GPU (Graphic Processing Units), various special-purpose AI (Artificial Intelligence) computing chips, various computing units running machine learning model algorithms, a DSP (Digital Signal Processor), and any appropriate processor, controller, microcontroller, etc. The computing unit 801 performs various methods and processes described above, such as the data rendering method described above. For example, in some embodiments, the data rendering method described above can be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as the storage unit 808. In some embodiments, part or all of the computer program can be loaded and / or installed on the device 800 via the ROM 802 and / or the communication unit 809. When the computer program is loaded to the RAM 803 and executed by the computing unit 801, one or more steps of the data rendering method described above can be performed. Alternatively, in other embodiments, the computing unit 801 can be configured to perform the data rendering method described above by any other appropriate means, such as by means of firmware.

[0185] Various implementations of the systems and techniques described above can be realized in digital electronic circuitry, integrated circuitry, a Field Programmable Gate Array (FPGA), an Application-Specific Integrated Circuit (ASIC), an Application Specific Standard Product (ASSP), a System on a Chip (SOC), a Complex Programmable Logic Device (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include implementation in one or more computer programs that are executable and / or interpretable on a programmable system including at least one programmable processor, which can be special or general purpose, coupled to receive data and instructions from, and to transmit data and instructions to, a storage system, at least one input device, and at least one output device.

[0186] Program code for carrying out methods of the present disclosure can be written in any combination of one or more programming languages. This program code can be provided to a processor or controller of a general or special purpose computer, such that the program code, when executed by the processor or controller, causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code can execute entirely on a machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.

[0187] In the context of this disclosure, a machine-readable medium can be a tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include but is not limited to an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of the machine-readable storage medium would include a linearly-programmed electronic storage, a portable computer diskette, a hard disk, RAM, ROM, EPROM (Electrically Programmable Read-Only-Memory), or flash memory, an optical fiber, a CD-ROM (Compact Disc Read-Only Memory), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0188] To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having a display device (e.g., a CRT (Cathode-Ray Tube) or LCD (Liquid Crystal Display) monitor) for displaying information to the user and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the computer. Other kinds of devices can be used to provide for interaction with a user as well; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form, including acoustic, speech, or tactile input.

[0189] The systems and techniques described here can be implemented in a computing system that includes a back-end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a Web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back-end, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a LAN (Local Area Network), a WAN (Wide Area Network), the Internet, and a blockchain network.

[0190] The computer system can include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a host product in the cloud computing service system, to solve the defects of large management difficulty and weak business scalability in traditional physical host and VPS service (Virtual Private Server, virtual private server). The server can also be a server of a distributed system, or a server combined with a blockchain.

[0191] It should be noted that artificial intelligence is a discipline that studies enabling computers to simulate some thinking processes and intelligent behaviors of humans (such as learning, reasoning, thinking, planning, etc.), and has both hardware and software technologies. Artificial intelligence hardware technology generally includes technologies such as sensors, special artificial intelligence chips, cloud computing, distributed storage, big data processing, etc.; artificial intelligence software technology mainly includes computer vision technology, speech recognition technology, natural language processing technology, and machine learning / deep learning, big data processing technology, knowledge graph technology, etc. several major directions.

[0192] Cloud computing refers to accessing elastic and scalable shared physical or virtual resource pools through a network, including servers, operating systems, networks, software, applications, and storage devices, and can deploy and manage resources in a demand-driven and self-service manner. Through cloud computing technology, efficient and powerful data processing capabilities can be provided for artificial intelligence, blockchain, and other technology applications and model training.

[0193] According to the technical scheme of the embodiment of the present disclosure, a first data acquisition request is sent to the backend; wherein the first data acquisition request is used to request to acquire previous page data, and the previous page data is at least one page data in front of a plurality of page data obtained by performing page processing on the to-be-rendered data; the previous page data sent by the backend is received; a second data acquisition request is sent to the backend; wherein the second data acquisition request is used to request to acquire subsequent page data, and the subsequent page data is at least one page data after the previous page data in the plurality of page data; during waiting for the backend to return the subsequent page data, data rendering and display are performed according to the previous page data. Thus, the front end can render and display the previous page data while waiting to acquire the subsequent page data, improving user experience.

[0194] It should be understood that the various forms of flow shown above can be used to reorder, add, or remove steps. For example, the steps described in the present disclosure can be performed in parallel, in series, or in a different order, as long as the desired results of the technology disclosed in the present disclosure are achieved, which is not limited herein.

[0195] The specific implementation described above does not constitute a limitation on the protection scope of the present disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent replacements, and improvements made within the spirit and principles of the present disclosure shall be included in the protection scope of the present disclosure.

Claims

1. A data rendering method applied to a front end, comprising: sending a first data acquisition request to a back end; wherein the first data acquisition request is used to request to acquire previous page data, the previous page data being at least one page data in front of a plurality of page data obtained by page processing of to-be-rendered data; receiving the previous page data sent by the back end; sending a second data acquisition request to the back end; wherein the second data acquisition request is used to request to acquire subsequent page data, the subsequent page data being at least one page data after the previous page data in the plurality of page data; during a process of waiting for the back end to return the subsequent page data, performing data rendering and display according to the previous page data; wherein during the process of waiting for the back end to return the subsequent page data, performing data rendering and display according to the previous page data, comprising: during the process of waiting for the back end to return the subsequent page data, performing fusion processing on the previous page data and historical page data to obtain fusion page data; wherein the historical page data is at least one page data before the previous page data in the plurality of page data; performing data rendering and display according to the fusion page data; wherein if the to-be-rendered data is a column chart, the column chart is composed of four vertical bars, and the data amounts corresponding to the four vertical bars are 30, 70, 50 and 80 respectively, if any one of the page data is obtained by retaining data in a target data range corresponding to the page data in the to-be-rendered data and setting data in each data range other than the target data range to a set value, and the set value is 0, then the first page data is represented as [30, 0, 0, 0], the second page data is represented as [0, 70, 0, 0], the third page data is represented as [0, 0, 50, 0], and the fourth page data is represented as [0, 0, 0, 80]; if the first page data is the historical page data and the second page data is the previous page data, then the fusion processing on the previous page data and the historical page data obtains the fusion page data represented as [30, 70, 0, 0].

2. The data rendering method of claim 1, wherein, Before the step of sending the second data acquisition request to the back end, further comprising: determining whether there is unacquired page data according to the number of pages of the previous page data and the total number of pages of the to-be-rendered data, so as to send the second data acquisition request to the back end in the case that there is unacquired page data.

3. The data rendering method of claim 1, wherein, The step of sending the first data acquisition request to the back end, comprising: sending the first data acquisition request to the back end through an interface corresponding to the to-be-rendered data; The step of receiving the previous page data sent by the back end, comprising: receiving the previous page data sent by the back end through the interface corresponding to the to-be-rendered data; The step of sending the second data acquisition request to the back end, comprising: sending the second data acquisition request to the back end through the interface corresponding to the to-be-rendered data.

4. A data rendering method applied to a backend, comprising: receiving a first data acquisition request sent by a frontend; wherein the first data acquisition request is used to request acquisition of preceding page data, the preceding page data being at least one page data in front of a plurality of page data obtained by performing page processing on to-be-rendered data; sending the preceding page data to the frontend; receiving a second data acquisition request sent by the frontend; wherein the second data acquisition request is used to request acquisition of subsequent page data, the subsequent page data being at least one page data following the preceding page data in the plurality of page data; wherein the preceding page data is used for the frontend to perform data rendering and display according to the preceding page data in a process of waiting for the backend to return the subsequent page data; wherein the data rendering and display according to the preceding page data in the process of waiting for the backend to return the subsequent page data comprises: performing fusion processing on the preceding page data and historical page data that has been acquired to obtain fusion page data in the process of waiting for the backend to return the subsequent page data; wherein the historical page data is at least one page data in front of the preceding page data in the plurality of page data; performing data rendering and display according to the fusion page data; wherein if the to-be-rendered data is a column chart composed of four vertical bars, the data amounts corresponding to the four vertical bars are 30, 70, 50 and 80 respectively, if any page data is obtained by retaining data in a target data range corresponding to the page data in the to-be-rendered data and setting data in each data range other than the target data range to a set value, and the set value is 0, then the first page data is represented as [30, 0, 0, 0], the second page data is represented as [0, 70, 0, 0], the third page data is represented as [0, 0, 50, 0], and the fourth page data is represented as [0, 0, 0, 80]; if the first page data is the historical page data and the second page data is the preceding page data, then the fusion processing on the preceding page data and the historical page data obtains the fusion page data represented as [30, 70, 0, 0].

5. The data rendering method of claim 4, wherein, The receiving of the first data acquisition request sent by the frontend comprises: receiving the first data acquisition request sent by the frontend through an interface corresponding to the to-be-rendered data; The sending of the preceding page data to the frontend comprises: sending the preceding page data to the frontend through the interface corresponding to the to-be-rendered data; The receiving of the second data acquisition request sent by the frontend comprises: receiving the second data acquisition request sent by the frontend through the interface corresponding to the to-be-rendered data.

6. A data rendering apparatus applied to a frontend, comprising: The first sending module is configured to send a first data acquisition request to a backend, wherein the first data acquisition request is used to request acquisition of previous page data, and the previous page data is at least one page data in front of a plurality of page data obtained by performing page processing on the to-be-rendered data. The first receiving module is configured to receive the previous page data sent by the backend. The second sending module is configured to send a second data acquisition request to the backend, wherein the second data acquisition request is used to request acquisition of subsequent page data, and the subsequent page data is at least one page data after the previous page data in the plurality of page data. The first processing module is configured to perform data rendering and display according to the previous page data during a process of waiting for the backend to return the subsequent page data. The first processing module is further configured to: during the process of waiting for the backend to return the subsequent page data, perform fusion processing on the previous page data and historical page data that has been acquired, to obtain fusion page data, wherein the historical page data is at least one page data before the previous page data in the plurality of page data. Data rendering and display are performed according to the fusion page data. If the to-be-rendered data is a column chart composed of four vertical bars, and the data amounts corresponding to the four vertical bars are 30, 70, 50, and 80 respectively, if any page data is obtained by retaining data in a target data range corresponding to the page data in the to-be-rendered data and setting data in each data range other than the target data range to a set value, and the set value is 0, then the first page data is represented as [30, 0, 0, 0], the second page data is represented as [0, 70, 0, 0], the third page data is represented as [0, 0, 50, 0], and the fourth page data is represented as [0, 0, 0, 80]; if the first page data is the historical page data, and the second page data is the previous page data, then the fusion page data obtained by performing fusion processing on the previous page data and the historical page data is represented as [30, 70, 0, 0].

7. The data rendering device of claim 6, wherein, The apparatus further includes: The determining module is configured to determine whether there is unacquired page data according to a number of pages of the previous page data and a total number of pages of the to-be-rendered data, to send a second data acquisition request to the backend if there is unacquired page data.

8. The data rendering device of claim 6, wherein, The first sending module is further configured to: The first receiving module is further configured to: The second sending module is further configured to:

9. A data rendering apparatus applied to a backend, comprising: ​ ​ ​ The second receiving module is configured to receive a first data acquisition request sent by the front end; the first data acquisition request is used to request acquisition of previous page data, and the previous page data is at least one page data in front of a plurality of page data obtained by performing page processing on the to-be-rendered data; The third sending module is configured to send the previous page data to the front end; The third receiving module is configured to receive a second data acquisition request sent by the front end; the second data acquisition request is used to request acquisition of subsequent page data, and the subsequent page data is at least one page data after the previous page data in the plurality of page data; The previous page data is used for data rendering and display according to the previous page data in a process of waiting for the back end to return the subsequent page data; The process of rendering and displaying data according to the previous page data in the process of waiting for the back end to return the subsequent page data comprises: In the process of waiting for the back end to return the subsequent page data, the previous page data and historical page data that have been acquired are fused to obtain fused page data; the historical page data is at least one page data before the previous page data in the plurality of page data; Data is rendered and displayed according to the fused page data; If the to-be-rendered data is a column chart, the column chart is composed of four vertical bars, and the data amounts corresponding to the four vertical bars are 30, 70, 50 and 80 respectively, if any page data is obtained by retaining data in a target data range corresponding to the page data in the to-be-rendered data and setting data in each data range other than the target data range to a set value, and the set value is 0, then the page data of the first page is represented as [30, 0, 0, 0], the page data of the second page is represented as [0, 70, 0, 0], the page data of the third page is represented as [0, 0, 50, 0], and the page data of the fourth page is represented as [0, 0, 0, 80]; if the page data of the first page is the historical page data, and the page data of the second page is the previous page data, then the previous page data and the historical page data are fused to obtain the fused page data represented as [30, 70, 0, 0].

10. The data rendering device of claim 9, wherein, The second receiving module is further configured to: receive the first data acquisition request sent by the front end through an interface corresponding to the to-be-rendered data; The third sending module is further configured to: send the previous page data to the front end through an interface corresponding to the to-be-rendered data; The third receiving module is further configured to: receive the second data acquisition request sent by the front end through an interface corresponding to the to-be-rendered data.

11. An electronic device, comprising: at least one processor; and a memory connected with the at least one processor in communication; wherein, The memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the data rendering method of any one of claims 1-3, or, to perform the data rendering method of any one of claims 4-5.

12. A non-transitory computer readable storage medium having stored thereon computer instructions, wherein, The computer instructions are for causing the computer to perform the data rendering method of any one of claims 1-3, or, to perform the data rendering method of any one of claims 4-5.

13. A computer program product comprising a computer program which, when executed by a processor, implements the data rendering method of any one of claims 1-3, or, implements the data rendering method of any one of claims 4-5.

Images