Data rendering method, device, storage medium and electronic device

Abstract

The present specification provides a data rendering method, device, storage medium and electronic device, which determine the data to be rendered corresponding to each cycle according to a preset cycle, determine each key cycle in the cycles, obtain the data to be rendered corresponding to each key cycle for each key cycle, store it in a front-end database as the first data, and obtain all the data to be rendered that have not been stored before the key cycle, store it in the front-end database as the second request data. The first data corresponding to each key cycle in the front-end database is rendered through each single-cycle component, and, according to the second request data, all the data to be rendered before each key cycle in the front-end database is determined as the second data, and the second data corresponding to each key cycle is rendered through each multi-cycle component.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a data rendering method, device, storage medium and electronic device. Background Art

[0002] With the rapid development of artificial intelligence, data visualization technology has also been widely used. For example, during model training, users usually use data visualization components to render real-time data during the experiment and display it on the front end in the form of charts, etc., so as to understand the real-time status of the experiment through these rendered charts, better understand the movement trajectory and change trend of the algorithm, so as to intervene in the experiment operation and configuration in time.

[0003] Furthermore, in data visualization, a cycle is a unit of backend data generation or collection. For example, in the training process of a machine learning model, a cycle may represent an iteration cycle, including forward propagation, loss calculation, and backpropagation. In time series analysis, a cycle represents a fixed time interval, such as a day, a week, or a month, during which the data points collected are used to analyze trends and patterns.

[0004] Based on this, visualization components can be divided into single-cycle components and multi-cycle components. Single-cycle components are used to render data for a single cycle or time point to show the status or results of a specific duration. For example, to show the population income distribution of the current cycle, you need a scatter plot or pyramid chart component. To show the current location of the car on the map, you need to use a geographic information system (GIS) map or scatter plot component. These scatter plots and other visualization components only show single-cycle data and are single-cycle components. Multi-cycle components need to process and display data across multiple cycles or time periods. Such components can show the trend of data changes over time. For example, a line chart component needs to render data for multiple cycles and is a multi-cycle component.

[0005] In traditional data visualization technology, front-end applications usually need to obtain all data from the server and render the data into charts or other visual elements for user analysis. This rendering method performs well when the data volume is small, but when processing large-scale data sets, due to the large amount of data that the front-end needs to load from the server, in a non-LAN environment with limited bandwidth, it is easy to cause problems such as large data acquisition delays and uncontrollable front-end rendering progress. It is not suitable for large-scale data rendering and meets the data visualization needs of application scenarios such as large model training.

[0006] In addition, if a variety of complex visualization components are introduced to enhance the visualization effect, such as trajectory maps, heat maps, segmentation maps and other diverse chart types, the pressure of data processing and rendering will be further increased, resulting in slow response or even crash of the front-end page, affecting the user experience.

[0007] Therefore, how to achieve efficient rendering of large amounts of data has become a problem that needs to be solved urgently. Summary of the invention

[0008] The embodiments of this specification provide a data rendering method, device, storage medium and electronic device to partially solve the problems existing in the above-mentioned prior art.

[0009] The embodiments of this specification adopt the following technical solutions:

[0010] This specification provides a data rendering method, wherein the visualization component includes a plurality of single-period components and a plurality of multi-period components, and the method includes:

[0011] According to the preset cycles, determine the data to be rendered corresponding to each cycle;

[0012] Determining each key period among the periods;

[0013] For each key period, the to-be-rendered data corresponding to the key period is obtained, and stored in the front-end database as first data, and all the to-be-rendered data that have not been stored before the key period are obtained, and stored in the front-end database as second request data;

[0014] The first data corresponding to each key cycle in the front-end database is rendered through each single-cycle component, and, based on the second request data, all the data to be rendered before each key cycle in the front-end database is determined as the second data, and the second data corresponding to each key cycle is rendered through each multi-cycle component.

[0015] Optionally, all the to-be-rendered data that has not been stored before the critical period is obtained as the second request data, specifically including:

[0016] For each key cycle, if the total number of cycles corresponding to the data to be rendered that has not been stored before the key cycle is greater than the preset maximum number of cycles for a single request, then the data to be rendered that has not been stored corresponding to each cycle whose number of cycles does not exceed the maximum number of cycles for a single request is obtained and stored in the front-end database until all the data to be rendered that has not been stored before the key cycle is obtained as the second request data.

[0017] Optionally, the method further comprises:

[0018] When rendering the first data and the second data, determining a key period corresponding to the data to be rendered that is currently being rendered as a current playback period;

[0019] Determining, according to the current playback cycle, a preloading target cycle corresponding to the current playback cycle;

[0020] Determine the critical period of the latest first data and second data obtained as the latest loaded period; if the latest loaded period is not the preloading target period, obtain the first data and second request data corresponding to the next critical period of the latest loaded period, store them in the front-end database, and update the latest loaded period until the latest loaded period is the preloading target period.

[0021] Optionally, determining a preloading target period corresponding to the current playback period according to the current playback period specifically includes:

[0022] According to the current playback speed, the number of key cycles corresponding to the to-be-rendered data that can be rendered within the preset preloading target duration is determined as the number of preloading cycles;

[0023] A preloading target period is determined according to the current playback period and the number of preloading periods.

[0024] Optionally, obtaining the first data and the second request data corresponding to the next critical period of the latest loaded period specifically includes:

[0025] Determine, according to the latest loaded cycle, the pre-playing duration that can be supported by the pre-loaded data that has not yet been rendered and is currently stored in the front-end database;

[0026] According to a preset threshold, determine whether the pre-playback duration can meet the requirements of the merged request preloading data. If so, starting from the latest loaded cycle, obtain the first data and the second request data corresponding to each consecutive key cycle with a cycle number equal to the preset merged cycle number.

[0027] Optionally, rendering the first data and the second data specifically includes:

[0028] Determine the key period corresponding to the data to be rendered that is currently being rendered as the current playback period;

[0029] Determine the average data acquisition time of the first data and the second request data corresponding to each key period historically acquired before the current playback period;

[0030] If the average data acquisition duration is greater than the periodic playback duration corresponding to each current key period, the periodic playback duration is adjusted according to a preset step length to determine the latest playback duration;

[0031] According to the latest playback duration, the first data corresponding to each key period in the front-end database is rendered through each single-period component, and the second data corresponding to each key period is rendered through each multi-period component.

[0032] Optionally, the method further comprises:

[0033] For each key period, the frame rate of the front-end interface when rendering the first data and the second data is obtained. If the frame rate is lower than a preset threshold, the ideal time required for each visualization component to render the data is determined according to the period playback time corresponding to the key period and the number of visualization components.

[0034] If the ideal duration is less than the actual duration required for each visualization component to render the data, each first single-cycle component and each first multi-cycle component are determined according to the preset rendering priority of each visualization component, so as to render the first data corresponding to the key period through each first single-cycle component, and render the second data corresponding to the key period through each first multi-cycle component;

[0035] Based on whether each visualization component renders data in the critical cycle, the latest rendering priority of each visualization component is re-determined, and based on the latest rendering priority, each first single-cycle component and each first multi-cycle component is re-determined to render the data corresponding to the next critical cycle of the critical cycle until the data to be rendered corresponding to each critical cycle is rendered.

[0036] This specification provides a data rendering device, the device comprising:

[0037] A data determination module, used to determine the to-be-rendered data corresponding to each period according to a preset period;

[0038] A cycle determination module, in which a user determines each key cycle among the cycles;

[0039] The request module is used to obtain, for each key period, the to-be-rendered data corresponding to the key period, as first data, and store them in the front-end database; and obtain all the to-be-rendered data that have not been stored before the key period, as second request data, and store them in the front-end database;

[0040] A rendering module is used to render the first data corresponding to each key period in the front-end database through the single-period components, and, based on the second request data, determine all the data to be rendered before each key period in the front-end database as the second data, and render the second data corresponding to each key period through the multi-period components.

[0041] This specification provides a computer-readable storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, the above-mentioned data rendering method is implemented.

[0042] The present specification provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned data rendering method when executing the program.

[0043] At least one of the above technical solutions adopted in the embodiments of this specification can achieve the following beneficial effects:

[0044] The embodiment of this specification discloses a data rendering method. After determining the data to be rendered corresponding to each cycle and the key cycle in each cycle, for each key cycle, the data to be rendered corresponding to the key cycle is obtained as the first data and stored in the front-end database, and all the data to be rendered that have not been stored before the key cycle are obtained as the second request data and also stored in the front-end database. The first data corresponding to each key cycle is rendered by each single-cycle component, and after determining all the data to be rendered before each key cycle according to the second request data as the second data, the second data corresponding to each key cycle is rendered by each multi-cycle component. Through this method, the visualization components are divided into single-cycle components and multi-cycle components. For single-cycle components, only the data to be rendered corresponding to the key cycle is obtained, but not the data to be rendered corresponding to all cycles, thereby reducing the loading of invalid data. For multi-cycle components, all the data to be rendered that have not been stored before each key cycle are requested for rendering in multiple times, rather than rendering the data after obtaining all the data, thereby reducing the pressure of data request and rendering, thereby realizing efficient rendering of large amounts of data. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] The drawings described herein are used to provide a further understanding of this specification and constitute a part of this specification. The illustrative embodiments and descriptions of this specification are used to explain this specification and do not constitute an improper limitation on this specification. In the drawings:

[0046] Figure 1 It is a flowchart of a data rendering method provided by an embodiment of this specification;

[0047] Figure 2 A schematic diagram of a data request process provided in an embodiment of this specification;

[0048] Figure 3 A schematic diagram of a data preloading process provided in an embodiment of this specification;

[0049] Figure 4 A schematic diagram of a frame rate optimization process provided in an embodiment of this specification;

[0050] Figure 5 A schematic diagram of the structure of a data rendering device provided in an embodiment of this specification;

[0051] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this specification. DETAILED DESCRIPTION

[0052] In order to make the purpose, technical solutions and advantages of this specification more clear, the technical solutions of this specification will be clearly and completely described below in combination with the specific embodiments of this specification and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of this specification, not all of them. Based on the embodiments in this specification, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this specification.

[0053] The technical solutions provided by the embodiments of this specification are described in detail below in conjunction with the accompanying drawings.

[0054] S100: According to preset cycles, determine the data to be rendered corresponding to each cycle.

[0055] In the embodiments of this specification, users may render data through various visualization components, and display the rendered data to be analyzed or observed in the form of charts on the front-end page. For example, during the training of a large model, users can use data visualization components to render real-time data during the experiment and display it on the front-end in the form of charts, etc., so as to understand the real-time status of the experiment through these rendered charts, better understand the movement trajectory and change trend of the algorithm, so as to intervene in the experiment operation and configuration in a timely manner.

[0056] The front end can determine the data that needs to be rendered and displayed on the front end interface through the visualization component in each period, and the data to be rendered corresponding to each period, according to the period preset by the user or the period automatically divided by the system, so as to render the data after obtaining the data to be rendered corresponding to each period from the back end.

[0057] Among them, the preset cycle is a unit for backend data generation or collection, which can be determined and divided based on the number of iterations, time intervals or other custom conditions. In this step, the front end will determine the backend data that needs to be collected and rendered in each cycle according to the preset cycle division, as the data to be rendered corresponding to each cycle. For example, in the training process of a machine learning model, a cycle may represent an iteration cycle, including forward propagation, loss calculation, and back propagation. Correspondingly, the experimental data generated in the cycle corresponding to an iterative process, including loss value, accuracy, model parameters, etc., is the data to be rendered corresponding to each cycle.

[0058] Furthermore, for the data to be rendered corresponding to each cycle, users can use multiple visualization components to render the data to be rendered to meet different analysis needs. Specifically, for data that only needs to focus on the status of a specific cycle or time point, you can select a single-cycle component to render the data. These components can clearly and intuitively present the data situation within the cycle, helping users to quickly understand the current status. For example, in a specific iteration cycle of a machine learning model, the user may want to observe the distribution relationship between features. At this time, a scatter plot can be used to display the feature data of the current cycle. When it is necessary to display the proportion of each category within a certain cycle, such as the accuracy distribution of the model prediction results, a pie chart can intuitively express this information.

[0059] Correspondingly, if you need to show the trend of data changes over time, you can render the data through the multi-period component. The multi-period component can connect data points of multiple periods to form a continuous trend chart, helping users to deeply understand the dynamic laws behind the data. For example, by rendering the loss value of the model through the line chart component, you can intuitively observe the trend of loss changes with the number of iterations, and the accuracy can be represented by the bar chart component to compare the performance differences between different iterations.

[0060] In addition, strong visualization multi-period components such as intersection traffic light simulation, reinforcement learning bouncing game, and crowd evacuation simulation can show the dynamic changes of data more vividly and intuitively, enhancing the user's interactive experience and analysis depth. For example, by adjusting the simulation parameters of the crowd evacuation simulation component (such as the number of exits and the direction of evacuation instructions), users can observe the changes in key indicators such as crowd evacuation speed and congestion area under different cycles.

[0061] S102: Determine each key period in the periods.

[0062] Furthermore, after determining each cycle, the operation mode of the front-end interface can be determined in response to the user's selection or preset configuration, and the key cycles in each cycle can be dynamically calculated and updated according to the operation mode of the front-end interface. Thus, after determining each key cycle, the data to be rendered corresponding to each key cycle is obtained from the back-end according to the determined key cycles, and the data is displayed on the front-end interface in the form of a chart or the like at a preset playback speed.

[0063] The playback speed here refers to the playback speed of the data to be rendered corresponding to each key period on the front-end page after being rendered. The faster the playback speed, the shorter the display time of the data to be rendered corresponding to each key period on the front-end interface after being rendered. Specifically, the playback speed can be user-defined or automatically adjusted by the system according to the user's interactive behavior. The playback speed is usually measured in terms of the number of cycles rendered per second, such as rendering 1 cycle per second, rendering 2 cycles per second, etc. In addition, for a key period that has been played, the data to be rendered corresponding to the key period can be re-rendered based on the user's replay operation.

[0064] For example, in the embodiment of the present specification, the operation mode of the page can be divided into three modes: single cycle, multi-cycle operation and operation to a specified cycle. Specifically, a key cycle array and a current cycle pointer can be created, and the key cycle array is used to store all key cycles in the playback process, and the current cycle pointer points to the current cycle in the array. In the single cycle mode, each cycle is a key cycle. In the multi-cycle operation mode, the user or the front end can determine a specific number of cycles as a target, and the number of cycles can be increased by any positive integer each time until the specified number of cycles is reached or exceeded. For example, there are ten cycles, and the specific number of cycles is two, then the key cycles in these ten cycles can be determined as the first cycle, the third cycle, the fifth cycle, and so on. In the specified cycle operation mode, then in response to the user's click or setting, the specified arbitrary cycle can be used as each key cycle. When the page operation mode is switched, all key cycles from the current cycle to the end in the key cycle array will be cleared, and each key cycle will be regenerated according to the new mode.

[0065] Of course, the critical period can also be determined according to the rules or conditions preset by the user. For example, in the training of the machine learning model, the user may set a loss value threshold or an accuracy threshold. When these thresholds are reached, the corresponding period is regarded as a critical period. The specific method for determining the critical period is not limited in the embodiments of this specification.

[0066] S104: For each key period, obtain the to-be-rendered data corresponding to the key period, store it in the front-end database as the first data, and obtain all the to-be-rendered data that have not been stored before the key period, store it in the front-end database as the second request data.

[0067] Furthermore, after determining each key cycle, the front end will request data corresponding to each key cycle from the back end. Among them, for each single-cycle component, since these components only need to render the data to be rendered corresponding to each key cycle, when requesting data, it is also possible to obtain only the data to be rendered corresponding to each key cycle from the back end, and store it in the front-end database as the first data, without obtaining the data to be rendered corresponding to each cycle except the key cycle, thereby reducing the amount of data requests. For example, if the determined key cycles are the first cycle, the third cycle, and the fifth cycle, then when obtaining the data to be rendered by the single-cycle component, the data to be rendered corresponding to the first cycle, the third cycle, and the fifth cycle can be obtained.

[0068] At the same time, for each multi-cycle component, when rendering data, the multi-cycle component needs to render the data to be rendered corresponding to each key cycle and all cycles before each key cycle. Therefore, when obtaining the backend data, it is not possible to only obtain the data to be rendered corresponding to each key cycle.

[0069] Furthermore, in order to avoid repeatedly acquiring the data to be rendered corresponding to each cycle, which would cause excessive data request pressure, it is possible to acquire all the data that have not been stored before each key cycle each time data is acquired, that is, the data to be rendered corresponding to all cycles between two key cycles is used as the second request data and stored in the front-end database. For example, if the key cycles are determined to be the first cycle, the third cycle, and the fifth cycle, then when acquiring the data to be rendered by the multi-cycle component, the data to be rendered corresponding to the first cycle, the data to be rendered corresponding to the second cycle and the third cycle, and the data to be rendered corresponding to the fourth cycle and the fifth cycle can be acquired in batches in chronological order.

[0070] Among them, the front-end database mentioned here refers to the client storage database running in the user's browser, such as the IndexedDB database. Unlike traditional back-end database storage, IndexedDB can store a large amount of structured data and support complex query operations. If the data has been stored in IndexedDB, it can reduce requests to the back-end server and avoid repeated data loading, thereby reducing network latency and server load. Therefore, after each acquisition of the first data and the second request data, the data will be stored in the front-end database so that the corresponding data can be obtained from the front-end database when the subsequent visualization component renders the data.

[0071] In addition, IndexedDB allows web applications to access and manipulate data when users are offline. Even without a network connection, each visualization component can render the data stored in IndexedDB. By storing data in IndexedDB, data persistence can be maintained. When the user visits the application again, the data can be quickly read from IndexedDB and rendered, improving the user experience.

[0072] At the same time, for strong visualization components such as traffic light simulation at intersections and reinforcement learning bouncing games, the corresponding data can be directly obtained from the IndexedDB library for rendering based on the user's playback request, without having to request data from the back end, thereby improving the efficiency of re-rendering the data corresponding to the key period that has been played.

[0073] In addition, when the total amount of the first data and the second request data is less than a preset threshold, or the corresponding hardware performance of the front-end browser meets the preset conditions, IndexedDB is not the only or necessary choice for front-end data storage. The first data and the second request data can also be directly temporarily stored in the memory to improve data access speed.

[0074] Of course, the front end can also adopt a dual cache strategy of memory plus IndexedDB according to the characteristics and access frequency of the first data and the second request data. That is, the data that needs to be accessed frequently is stored in the memory to improve the access speed, and the data is also stored in IndexedDB to ensure data persistence. When the data in the memory changes, the data in IndexedDB can be updated synchronously to ensure data consistency. The specific front-end data storage method is not limited in the embodiments of this specification.

[0075] Further, such as Figure 2 As shown, Figure 2 A flow chart of data request provided in the embodiment of this specification, after determining each key period and classifying each visualization component, for each key period, obtaining the data of all components in the key period can be regarded as a data request task, and obtaining the first data corresponding to the key period and the second request data can be used as two subtasks of the data request task, and these two subtasks can be started in parallel to minimize the total request time. After determining the data request task, the front end will execute the data request task corresponding to each key period according to the task request list, and then after obtaining the data corresponding to a key period, update the key period for which the data has been obtained, and render the data of the key period through the visualization component, while continuing to obtain the data to be rendered corresponding to the next key period until the number of key periods is reached.

[0076] S106: Render the first data corresponding to each key period in the front-end database through each single-period component, and, based on the second request data, determine all the data to be rendered before each key period in the front-end database as the second data, and render the second data corresponding to each key period through each multi-period component.

[0077] Similarly, in the data rendering stage, it is divided into the rendering of single-cycle components and the rendering of multi-cycle components. When rendering data through each single-cycle component, the corresponding data rendering logic of the front end will retrieve the first data corresponding to each key period from the front-end database, that is, the data to be rendered in each key period, directly render each first data, and display it on the front-end interface according to the current playback speed.

[0078] Different from the rendering of single-cycle components, for each key cycle, when rendering data through multi-cycle components, the corresponding data rendering logic of the front-end will determine all the data to be rendered before the key cycle as the second data based on the second request data before the key cycle that has been obtained in batches in the front-end database. Then, the second data corresponding to the key cycle is rendered through each multi-cycle component. For example, in the front-end database, the data to be rendered for the first cycle, the data to be rendered corresponding to the second and third cycles, and the data to be rendered corresponding to the fourth and fifth cycles have been stored in batches. When rendering data through multi-cycle components, the data to be rendered corresponding to the five cycles from the first cycle to the fifth cycle will be determined first, and rendered as the second data by the multi-cycle component.

[0079] Furthermore, for the convenience of display, in the embodiments of this specification, for each key period, after the first data and the second data corresponding to the key period are stored in the front-end database, the key period can be used as a renderable period, and then the data of the renderable period can be rendered through each visualization component. Of course, for each key period, after the first data or the second data is obtained in the front-end database, the first data or the second data can be directly rendered, without the need to render the data corresponding to the key period through two types of visualization components after both types of data are loaded. The specific rendering process is not limited in the embodiments of this specification.

[0080] based on Figure 1A data rendering method is provided, which divides the visualization components into single-cycle components and multi-cycle components. For single-cycle components, only the data to be rendered corresponding to the key cycle is obtained, rather than the data to be rendered corresponding to all cycles, thereby reducing the loading of invalid data. For multi-cycle components, all the data to be rendered that have not been stored before each key cycle are requested for rendering multiple times, rather than rendering the data after obtaining all the data, thereby reducing the pressure of data request and rendering, thereby achieving efficient rendering of large amounts of data. In addition, after obtaining the first data and the second request data, these data will be stored in the front-end database for persistence processing, further reducing the pressure of data request and improving the efficiency of data rendering at the front end.

[0081] Obtaining all the data to be rendered that have not been stored before the critical period as the second request data, which can be specifically, for each critical period, if the total number of periods corresponding to the data to be rendered that have not been stored before the critical period is greater than the preset maximum number of periods for a single request, then obtaining the data to be rendered that have not been stored corresponding to each period whose number of periods does not exceed the maximum number of periods for a single request, and storing them in the front-end database until all the data to be rendered that have not been stored before the critical period are obtained as the second request data.

[0082] Specifically, when obtaining the second request data from the back end in batches, for each key cycle, if the number of cycles corresponding to the data to be rendered that has not been stored before the key cycle is too large, then obtaining the data to be rendered corresponding to all cycles between two adjacent key cycles as the second request data may result in a single request that is too large in size or too long waiting time for back end calculation due to too many cycles, thereby blocking the front end operation.

[0083] Therefore, a maximum number of cycles for a single request can be set in advance. When the total number of cycles corresponding to the data to be rendered that has not been stored before the critical period is greater than the preset maximum number of cycles for a single request, the second request data required for the request is divided according to the maximum number of cycles for a single request, and the data to be rendered that has not been stored corresponding to each cycle whose single acquisition cycle number does not exceed the maximum number of cycles for a single request is stored in the front-end database until all the data that has not been stored before the critical period is obtained as the second request data.

[0084] For example, if the predetermined key cycle is the first cycle, the one hundredth cycle, and the preset maximum number of cycles for a single request is twenty, then when requesting data, the data to be rendered for the second to twenty-first cycles, the data to be rendered corresponding to the twenty-second to forty-first cycles, the data to be rendered corresponding to the forty-second to sixty-first cycles, and so on, will be obtained in chronological order, until all the data to be rendered corresponding to the second to one hundredth cycles are obtained. Specifically, after determining each subtask for obtaining the second request data, each subtask can be sliced ​​according to the preset maximum number of cycles for a single request. Since each task after slicing is usually large in size and has a sequence, it is not suitable to use a parallel request method. Therefore, a serial request can be used to execute all sliced ​​tasks within a subtask.

[0085] Furthermore, when rendering the first data and the second data through the visualization component, in order to avoid the situation where the periodic playback is stuck due to short-term network fluctuations, the first data and the second request data corresponding to each key period can also be preloaded. The preloading process can be specifically as follows: when rendering the first data and the second data, determine the key period corresponding to the data to be rendered that is currently being rendered as the current playback period, determine the preloading target period corresponding to the current playback period based on the current playback period, determine the key period of the latest first data and second data that has been obtained as the latest loaded period, and if the latest loaded period is not the preloading target period, obtain the first data and the second request data corresponding to the next key period of the latest loaded period, store them in the front-end database, and update the latest loaded period until the latest loaded period is the preloading target period.

[0086] In other words, during the rendering process, the rendering logic of the front-end will continue to track the key cycle corresponding to the data being rendered, that is, the current playback cycle. Then, based on the current playback cycle, the preload target cycle is further determined. The determination of the preload target cycle can be based on a variety of factors, such as the user's set playback speed, data update frequency, pre-configuration, and system processing capabilities.

[0087] Furthermore, based on the current playback cycle, the preloading target cycle corresponding to the current playback cycle is determined. Specifically, based on the current playback speed, the number of key cycles corresponding to the data to be rendered that can be rendered within the preset preloading target duration is determined as the preloading cycle number. The preloading target cycle is determined based on the current playback cycle and the preloading cycle number.

[0088] Specifically, based on the playback speed and the preloading duration, the number of data cycles that can be rendered within the preloading target duration, i.e., the number of preloading cycles, can be determined. This calculation is usually obtained by dividing the preloading duration by the playback speed, and of course it can also be determined by other calculation methods, which are not limited in the embodiments of this specification. Then, the preloading target cycle is determined based on the current playback cycle and the calculated number of preloading cycles, i.e., the number of preloading cycles is added to the current playback cycle.

[0089] For example, in single-step operation mode, the current playback speed is to render the first and second data corresponding to 1 cycle per second, the preset preload target duration is 5 seconds, and the current playback cycle is the 10th cycle. Then, the system will render 5 cycles in 5 seconds, from the 11th cycle to the 15th cycle, so the number of preload cycles is 5. The preload target cycle starts from the current playback cycle, that is, the 10th cycle, and moves forward 5 cycles, that is, the 15th cycle.

[0090] At the same time, the key cycle of the latest first data and second data currently acquired in the front-end database will be determined as the latest loaded cycle. Then, the preloading logic of the front-end will compare the latest loaded cycle with the preloading target cycle. If they are not the same cycle, it means that the data to be rendered corresponding to several cycles before the preloading target cycle have not been loaded in advance, then the data request task will continue to be triggered to obtain the first data and second request data corresponding to the next key cycle of the latest loaded cycle, and store these data in the front-end database until the latest loaded cycle matches the preloading target cycle, that is, all data that needs to be preloaded has been loaded in advance to reduce rendering jams caused by waiting for data to load. After the data is preloaded into the front-end database, even if there is a brief network fluctuation, the front-end can continue to obtain the corresponding data from the front-end database to continue rendering, and play smoothly to the preloading target cycle.

[0091] Specifically, Figure 3As shown, in response to the user's selection of the page operation mode and the component playback speed, the data request logic of the front end will first check the cycle of the latest acquired data, that is, whether the latest loaded cycle has exceeded the preloading target cycle; if not, a data request will be initiated from the task list, and after the asynchronous request is completed, the data request logic will be triggered again; if satisfied, the request will be canceled, and the "cycle update" event will be started at the same time. When the "cycle update" event is listened to, it is judged again whether the cycle of the latest acquired data has exceeded the preloading target cycle; if the condition is not met, the listening is stopped and the data request logic is restarted; if satisfied, the listening continues. When the experiment is started, the data request logic will be executed again immediately after completion to obtain the data to be rendered corresponding to the preloading target cycle as soon as possible. Further, after the preloading requirements are met, it can be executed once per cycle or interval cycle according to the "cycle update" event.

[0092] Specifically, when preloading data, the first data and the second request data corresponding to the next key cycle of the latest loaded cycle are obtained. Specifically, according to the latest loaded cycle, the pre-playback duration that can be supported by the pre-loaded data that has not been rendered and is currently stored in the front-end database is determined, and according to a preset threshold, it is judged whether the pre-playback duration can meet the requirements of merging the requested preloaded data. If so, starting from the latest loaded cycle, the first data and the second request data corresponding to each consecutive key cycle with a cycle number equal to the preset merged cycle number are obtained.

[0093] Furthermore, in single-step operation mode, for example, each data request task only needs to obtain the to-be-rendered data corresponding to one key cycle. When the playback speed of the front-end interface is fast, it may cause too frequent requests. Therefore, data request tasks for multiple key cycles can be merged to reduce the request frequency. However, merging requests is not suitable for the initial stage of data rendering, because at this time the front-end interface urgently needs to render and display the to-be-rendered data through visual components. If the to-be-rendered data corresponding to multiple key cycles is requested at one time when requesting data, it will cause the back-end data to load too long, causing playback jams. Therefore, how to merge requests should be determined by the pre-playback duration that can be supported by the pre-loaded data that has not yet been rendered and is currently stored in the front-end database.

[0094] For example, when rendering the data generated during the training of a large model, it is not suitable to merge the requested data when there is no data at the beginning, because it is necessary to wait for the algorithm model to run all the key cycles that need to be merged before returning the data. The front end will have a relatively long wait, so at the beginning the front end can only request data from the back end through the interface at a high frequency. When a certain number of key cycles corresponding to the data to be rendered are preloaded, it will start to merge the requests for the data to be rendered corresponding to multiple key cycles, so that the visualization component can smoothly render the first data and the second data that have been preloaded in the database.

[0095] Specifically, it is possible to determine whether the pre-play duration can meet the requirements of merging the request for pre-loaded data based on a preset threshold. If the pre-play duration is greater than the preset threshold, it means that the pre-play duration supported by the unrendered pre-loaded data stored in the front-end database exceeds the duration of the next request for data from the back-end. Therefore, starting from the latest loaded cycle, the first data and the second request data corresponding to each consecutive key cycle with a preset merge cycle number can be obtained. It should be noted that when merging the request data, the key cycle number corresponding to the merged request data does not exceed the merge cycle number, and the specific merge cycle number is not limited in this embodiment of the specification.

[0096] For example, a preload merge threshold can be set, such as 20%. At the same time, a minimum merge time needs to be set, such as 1 second. When executing the data request task corresponding to a key cycle, it is determined that the pre-playback time supported by the preloaded data stored in the front-end database that has not yet been rendered is greater than 5 seconds. At this time, 5 seconds * threshold 20% = 1 second>= minimum merge time, and merging is allowed. The maximum cycle range for merging is all key cycles played within the minimum merge time of 1 second at the current cycle playback speed. For example, 3 cycles will be played within 1s, then when requesting data, the 3 cycles will be merged into one request, and the first data and the second request data corresponding to 3 consecutive key cycles will be obtained.

[0097] Then, when executing the data request task, merge the key period data request tasks within the merge range. Starting from the first task, accumulate the period numbers of the same type of subtasks of each task until all accumulations are completed or the next accumulation will exceed the maximum single request range. And according to the merged data request subtasks, from the latest loaded period, obtain the first data and second request data corresponding to each consecutive key period with a period number equal to the preset merged period number.

[0098] Furthermore, rendering the first data and the second data may specifically include determining the key period corresponding to the data to be rendered that is currently being rendered as the current playback period, determining the average data acquisition time for historically acquiring the first data and the second request data corresponding to each key period before the current playback period, if the average data acquisition time is greater than the period playback time corresponding to each current key period, adjusting the period playback time according to a preset step size, determining the latest playback time, and rendering the first data corresponding to each key period in the front-end database through each single-period component according to the latest playback time, and rendering the second data corresponding to each key period through each multi-period component.

[0099] Specifically, when rendering data, if the playback speed is set too fast, or the backend experiment runs slowly, when the next key cycle needs to be rendered, the first data and the second data corresponding to the key cycle may not be obtained, causing the main rendering thread to wait for the data acquisition thread. At this time, the playback speed depends entirely on the backend, which is affected by factors such as the algorithm operation rate, data transmission rate, and network request rate, and fluctuates greatly, which cannot be controlled by the front end.

[0100] To this end, the automatic speed regulation capability can be enabled by setting a flag. Specifically, after determining the key period corresponding to the data to be rendered that is currently being rendered as the current playback period, the automatic speed regulation function will record the duration of each data request and calculate the average request duration of this period of data based on the number of requested periods. The weighted average of the request durations of a recent continuous period is taken to obtain the actual request duration, that is, to determine the average data acquisition duration of the first data and the second request data corresponding to each key period historically obtained before the current playback period.

[0101] When the actual request duration is greater than the periodic playback duration, the playback duration of the key period will be adjusted according to the preset step length to ensure that the periodic playback duration is greater than the actual request duration. For example, the playback duration is increased by 0.1s per period to gradually fit the actual request duration of the acquired data. Then, according to the latest adjusted playback duration, the first data corresponding to each key period in the front-end database is rendered through each single-period component, and the second data corresponding to each key period is rendered through each multi-period component.

[0102] Furthermore, when rendering data, the frame rate of the front-end interface when rendering the first data and the second data can be obtained for each key period. If the frame rate is lower than a preset threshold, the ideal duration required for each visualization component to render the data is determined based on the period playback duration corresponding to the key period and the number of visualization components.

[0103] If the ideal duration is less than the actual duration required for each visualization component to render the data, each first single-cycle component and each first multi-cycle component are determined according to the preset rendering priority of each visualization component, so as to render the first data corresponding to the critical period through the first single-cycle components, and render the second data corresponding to the critical period through the first multi-cycle components.

[0104] Based on whether each visualization component renders data in the critical cycle, the latest rendering priority of each visualization component is re-determined, and based on the latest rendering priority, each first single-cycle component and each first multi-cycle component is re-determined to render the data corresponding to the next critical cycle of the critical cycle until the data to be rendered corresponding to each critical cycle is rendered.

[0105] It should be noted that the data rendering in the embodiments of this specification is based on the data rendering of the front-end page development, such as using the browser environment for data rendering. Although the browser supports multi-threaded computing, considering the cost of thread activation and data transmission between threads, multi-threaded computing is not suitable for such low-complexity, high-data-volume, high-frequency computing tasks.

[0106] Based on this, when rendering data, each visualization component uses a physical thread to process multiple data rendering tasks, and one data rendering task corresponds to one visualization component rendering the corresponding data. The periodic playback time can be divided into a series of time slices, and in each time slice, the browser is assigned to process a data rendering task in the task queue.

[0107] Furthermore, the frame rate (FPS) is an important indicator for measuring rendering performance. The default rendering frame rate of the browser is 60FPS. If a visualization component takes too long to render data, it will block the work of the rendering thread, resulting in a drop in the frame rate. Therefore, the frame rate of the front-end interface can be continuously monitored and compared with the preset threshold. When the frame rate is lower than the threshold, it indicates that the current rendering performance is not enough to support the existing rendering load, and optimization measures need to be taken.

[0108] Specifically, Figure 4 As shown, for each key cycle, the rendering time that should be allocated to each visualization component under ideal circumstances, that is, the ideal time, can be calculated based on the playback time of the cycle and the number of visualization components. The browser needs to complete the data rendering task of each visualization component within a time slice that is less than the ideal time. At the same time, the actual time required for each visualization component to render data can be determined through historical data or real-time detection. If the ideal time is less than the actual time, it means that the browser cannot complete the data rendering task corresponding to each visualization component within the cycle playback time.

[0109] At this point, the time slice for processing the data rendering tasks corresponding to each visualization component can be determined based on the performance of the front-end browser. For example, the playback duration of a critical cycle is 1s, and there are 20 visualization components on the page, including 15 single-cycle components and 5 multi-cycle components. The browser needs to process 15 data rendering tasks in the single-cycle component queue and 5 data rendering tasks in the multi-cycle component queue. Ideally, the rendering time of each visualization component is 0.05 seconds. If there are hardware performance limitations, a component cannot complete rendering within the uniformly allocated time slice. For example, if a component requires 0.1s to render a cycle of data, a time slice greater than or equal to 0.1s is allocated to it. The specific allocation time is determined by the maximum rendering time of the component in the most recent cycle.

[0110] At this time, the front-end rendering logic will sort each visualization component according to the preset visualization component rendering priority, determine the first single-cycle component queues for rendering the first data corresponding to the critical cycle, and the first multi-cycle component queues for rendering the second data corresponding to the critical cycle, so as to render the first data corresponding to the critical cycle through the first single-cycle components, and render the second data corresponding to the critical cycle through the first multi-cycle components.

[0111] Furthermore, when the rendering message of the next cycle is received, if the visualization component queue has not yet completed rendering, the visualization component that has not rendered data is marked, and its rendering priority is increased in the next critical cycle, the latest rendering priority of each visualization component is re-determined, and each visualization component is sorted. The first single-cycle component queue and the first multi-cycle component queue are re-determined, and the data corresponding to the next critical cycle of the critical cycle is rendered until the data to be rendered corresponding to each critical cycle is rendered.

[0112] Continuing with the above example, assuming that all components are allocated a 0.1s time slice in the current cycle, if the priority of the visualization component is that the priority of the single-cycle component is greater than the priority of the multi-cycle component, that is, in a time slice, the single-cycle component will render the data first, but at least one multi-cycle component will render the data, then 9 single-cycle components can render the corresponding first data within 1 second. Then these 9 single-cycle components will be placed at the end of the queue of single-cycle component tasks in the thread, and the next critical cycle will give priority to rendering the corresponding first data through the 6 single-cycle components that were not rendered in the previous cycle. In addition, within this 1 second, there will be 1 multi-cycle component occupying 1 time slice to render the second data, that is, all multi-cycle components will render the data once every 5 seconds (5 cycles).

[0113] The above is a chip control method provided in the embodiments of this specification. Based on the same idea, this specification also provides corresponding devices, storage media and electronic devices.

[0114] Figure 5 A schematic diagram of a data rendering structure provided in an embodiment of this specification, wherein a visualization component includes a plurality of single-period components and a plurality of multi-period components, and the device includes:

[0115] The data determination module 500 is used to determine the to-be-rendered data corresponding to each period according to a preset period;

[0116] A cycle determination module 502, in which a user determines each key cycle in each cycle;

[0117] The request module 504 is used to obtain, for each key period, the to-be-rendered data corresponding to the key period, as first data, and store them in the front-end database, and to obtain all the to-be-rendered data that have not been stored before the key period, as second request data, and store them in the front-end database;

[0118] The rendering module 506 is used to render the first data corresponding to each key period in the front-end database through the single-period components, and, based on the second request data, determine all the data to be rendered before each key period in the front-end database as the second data, and render the second data corresponding to each key period through the multi-period components.

[0119] Optionally, the request module 504 is specifically used to, for each critical cycle, if the total number of cycles corresponding to the data to be rendered that has not been stored before the critical cycle is greater than a preset maximum number of cycles for a single request, then obtain the data to be rendered that has not been stored corresponding to each cycle whose number of cycles does not exceed the maximum number of cycles for a single request, and store them in the front-end database until all the data to be rendered that has not been stored before the critical cycle is obtained as the second request data.

[0120] Optionally, the rendering module 506 is also used to, when rendering the first data and the second data, determine the key cycle corresponding to the data to be rendered that is currently being rendered as the current playback cycle; determine the preloading target cycle corresponding to the current playback cycle based on the current playback cycle; determine the key cycle of the latest first data and second data that have been acquired as the latest loaded cycle, and if the latest loaded cycle is not the preloading target cycle, obtain the first data and the second request data corresponding to the next key cycle of the latest loaded cycle, store them in the front-end database, and update the latest loaded cycle until the latest loaded cycle is the preloading target cycle.

[0121] Optionally, the rendering module 506 is also used to determine, according to the current playback speed, the number of key cycles corresponding to the data to be rendered that can be rendered within a preset preloading target duration as the number of preloading cycles; and determine the preloading target cycle according to the current playback cycle and the number of preloading cycles.

[0122] Optionally, the rendering module 506 is further used to determine, according to the latest loaded cycle, the pre-playing duration that can be supported by the pre-loaded data that has not been rendered and is currently stored in the front-end database;

[0123] According to a preset threshold, determine whether the pre-playback duration can meet the requirements of the merged request preloading data. If so, starting from the latest loaded cycle, obtain the first data and the second request data corresponding to each consecutive key cycle with a cycle number equal to the preset merged cycle number.

[0124] Optionally, the rendering module 506 is specifically used to determine the key period corresponding to the data to be rendered that is currently being rendered as the current playback period; determine the average data acquisition time for historically acquiring the first data and the second request data corresponding to each key period before the current playback period; if the average data acquisition time is greater than the period playback time corresponding to the current key period, adjust the period playback time according to a preset step size to determine the latest playback time; based on the latest playback time, render the first data corresponding to each key period in the front-end database through each single-period component, and render the second data corresponding to each key period through each multi-period component.

[0125] Optionally, the rendering module 506 is also used to obtain, for each key period, a frame rate of the front-end interface when rendering the first data and the second data. If the frame rate is lower than a preset threshold, the ideal duration required for each visualization component to render the data is determined based on the period playback duration corresponding to the key period and the number of visualization components; if the ideal duration is less than the actual duration required for each visualization component to render the data, the first single-cycle components and the first multi-cycle components are determined based on the preset rendering priority of each visualization component, so as to render the first data corresponding to the key period through the first single-cycle components, and render the second data corresponding to the key period through the first multi-cycle components; based on whether each visualization component renders data in the key period, the latest rendering priority of each visualization component is re-determined, and the first single-cycle components and the first multi-cycle components are re-determined based on the latest rendering priority, and the data corresponding to the next key period of the key period is rendered, until the data to be rendered corresponding to each key period is rendered.

[0126] This specification also provides a computer-readable storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, it can be used to perform the above Figure 1 The data rendering method provided.

[0127] based on Figure 1 The data rendering method shown in the present specification also provides Figure 6 The structural diagram of the electronic device shown in FIG. Figure 6 At the hardware level, the electronic device includes a processor, an internal bus, a network interface, a memory, and a non-volatile memory, and may also include other hardware required for the business. The processor reads the corresponding computer program from the non-volatile memory into the memory and then runs it to achieve the above Figure 1 The data rendering method.

[0128] Of course, in addition to software implementation, this specification does not exclude other implementation methods, such as logic devices or a combination of software and hardware, etc., that is to say, the executor of the following processing flow is not limited to each logic unit, but can also be hardware or logic devices.

[0129] In the 1990s, it was very clear whether the improvement of a technology was hardware improvement (for example, improvement of the circuit structure of diodes, transistors, switches, etc.) or software improvement (improvement of the method flow). However, with the development of technology, many improvements of the method flow today can be regarded as direct improvements of the hardware circuit structure. Designers almost always obtain the corresponding hardware circuit structure by programming the improved method flow into the hardware circuit. Therefore, it cannot be said that the improvement of a method flow cannot be implemented with hardware entity modules. For example, a programmable logic device (PLD) (such as a field programmable gate array (FPGA)) is such an integrated circuit whose logical function is determined by the user's programming of the device. Designers can "integrate" a digital system on a PLD by programming it themselves, without having to ask chip manufacturers to design and make dedicated integrated circuit chips. Moreover, nowadays, instead of manually making integrated circuit chips, this kind of programming is mostly implemented by "logic compiler" software, which is similar to the software compiler used when developing and writing programs, and the original code before compilation must also be written in a specific programming language, which is called hardware description language (HDL). There is not only one kind of HDL, but many kinds, such as ABEL (Advanced Boolean Expression Language), AHDL (Altera Hardware Description Language), Confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), Lava, Lola, MyHDL, PALASM, RHDL (Ruby Hardware Description Language), etc. The most commonly used ones are VHDL (Very-High-Speed ​​Integrated Circuit Hardware Description Language) and Verilog. Those skilled in the art should also know that it is only necessary to program the method flow slightly in the above-mentioned hardware description languages ​​and program it into the integrated circuit, and then it is easy to obtain the hardware circuit that implements the logic method flow.

[0130] The controller may be implemented in any suitable manner, for example, the controller may take the form of a microprocessor or processor and a computer-readable medium storing a computer-readable program code (such as software or firmware) executable by the (micro)processor, a logic gate, a switch, an application-specific integrated circuit (ASIC), a programmable logic controller, and an embedded microcontroller. Examples of controllers include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicone Labs C8051F320. The memory controller may also be implemented as part of the control logic of the memory. It is also known to those skilled in the art that, in addition to implementing the controller in a purely computer-readable program code manner, the controller may be implemented in the form of a logic gate, a switch, an application-specific integrated circuit, a programmable logic controller, and an embedded microcontroller by logically programming the method steps. Therefore, such a controller may be considered as a hardware component, and the devices for implementing various functions included therein may also be considered as structures within the hardware component. Or even, the devices for implementing various functions may be considered as both software modules for implementing the method and structures within the hardware component.

[0131] The systems, devices, modules or units described in the above embodiments may be implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer. Specifically, the computer may be, for example, a personal computer, a laptop computer, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

[0132] For the convenience of description, the above device is described in various units according to their functions. Of course, when implementing this specification, the functions of each unit can be implemented in the same or multiple software and / or hardware.

[0133] Those skilled in the art will appreciate that the embodiments of this specification may be provided as methods, systems, or computer program products. Therefore, this specification may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0134] This specification is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of this specification. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0135] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0136] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0137] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0138] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0139] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0140] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0141] It should be understood by those skilled in the art that the embodiments of this specification may be provided as methods, systems or computer program products. Therefore, this specification may take the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware. Moreover, this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0142] This specification may be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. This specification may also be practiced in distributed computing environments where tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules may be located in local and remote computer storage media, including storage devices.

[0143] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0144] The above description is only an embodiment of the present specification and is not intended to limit the present specification. For those skilled in the art, the present specification may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present specification shall be included in the scope of the claims of the present specification.

Claims

1. A data rendering method, characterized in that: The visualization component includes a plurality of single-period components and a plurality of multi-period components, and the method includes: According to the preset cycles, determine the data to be rendered corresponding to each cycle; Determining each key period among the periods; For each key period, the to-be-rendered data corresponding to the key period is obtained, and stored in the front-end database as first data, and all the to-be-rendered data that have not been stored before the key period are obtained, and stored in the front-end database as second request data; The first data corresponding to each key cycle in the front-end database is rendered through each single-cycle component, and, based on the second request data, for the current key cycle, all the data to be rendered before the key cycle are determined as the second data corresponding to the key cycle and rendered, and the above-mentioned data acquisition and rendering processing are performed in batches for each key cycle in turn.

2. The method according to claim 1, characterized in that Obtain all the unstored data to be rendered before the key period as the second request data, specifically including: For each key cycle, if the total number of cycles corresponding to the data to be rendered that has not been stored before the key cycle is greater than the preset maximum number of cycles for a single request, then the data to be rendered that has not been stored corresponding to each cycle whose number of cycles does not exceed the maximum number of cycles for a single request is obtained and stored in the front-end database until all the data to be rendered that has not been stored before the key cycle is obtained as the second request data.

3. The method according to claim 1, characterized in that The method further comprises: When rendering the first data and the second data, determining a key period corresponding to the data to be rendered that is currently being rendered as a current playback period; Determine, according to the current playback cycle, a preloading target cycle corresponding to the current playback cycle; Determine the critical period of the latest first data and second data obtained as the latest loaded period; if the latest loaded period is not the preloading target period, obtain the first data and second request data corresponding to the next critical period of the latest loaded period, store them in the front-end database, and update the latest loaded period until the latest loaded period is the preloading target period.

4. The method according to claim 3, characterized in that Determining, according to the current playback cycle, a preloading target cycle corresponding to the current playback cycle, specifically includes: According to the current playback speed, the number of key cycles corresponding to the to-be-rendered data that can be rendered within the preset preloading target duration is determined as the number of preloading cycles; A preloading target period is determined according to the current playback period and the number of preloading periods.

5. The method according to claim 3, characterized in that Acquiring first data and second request data corresponding to the next critical cycle of the latest loaded cycle specifically includes: Determining, according to the latest loaded cycle, the pre-playing duration that can be supported by the pre-loaded data that has not yet been rendered and is currently stored in the front-end database; According to a preset threshold, determine whether the pre-playback duration can meet the requirements of the merged request preloading data. If so, starting from the latest loaded cycle, obtain the first data and the second request data corresponding to each consecutive key cycle with a cycle number equal to the preset merged cycle number.

6. The method according to claim 1, characterized in that Rendering the first data and the second data specifically includes: Determine the key period corresponding to the data to be rendered that is currently being rendered as the current playback period; Determine the average data acquisition time of the first data and the second request data corresponding to each key period historically acquired before the current playback period; If the average data acquisition duration is greater than the periodic playback duration corresponding to each current key period, the periodic playback duration is adjusted according to a preset step length to determine the latest playback duration; According to the latest playback duration, the first data corresponding to each key period in the front-end database is rendered through each single-period component, and the second data corresponding to each key period is rendered through each multi-period component.

7. The method according to claim 1, characterized in that The method further comprises: For each key period, the frame rate of the front-end interface when rendering the first data and the second data is obtained. If the frame rate is lower than a preset threshold, the ideal time required for each visualization component to render the data is determined according to the period playback time corresponding to the key period and the number of visualization components. If the ideal duration is less than the actual duration required for each visualization component to render the data, each first single-cycle component and each first multi-cycle component are determined according to the preset rendering priority of each visualization component, so as to render the first data corresponding to the key period through each first single-cycle component, and render the second data corresponding to the key period through each first multi-cycle component; Based on whether each visualization component renders data in the critical cycle, the latest rendering priority of each visualization component is re-determined, and based on the latest rendering priority, each first single-cycle component and each first multi-cycle component is re-determined to render the data corresponding to the next critical cycle of the critical cycle until the data to be rendered corresponding to each critical cycle is rendered.

8. A data rendering device, characterized in that: The visualization component includes a plurality of single-period components and a plurality of multi-period components, and the device includes: A data determination module, used to determine the to-be-rendered data corresponding to each period according to a preset period; A cycle determination module, in which a user determines each key cycle among the cycles; The request module is used to obtain, for each key period, the to-be-rendered data corresponding to the key period, as first data, and store them in the front-end database; and obtain all the to-be-rendered data that have not been stored before the key period, as second request data, and store them in the front-end database; A rendering module is used to render the first data corresponding to each key period in the front-end database through the single-period components, and, based on the second request data, for the current key period, determine all the data to be rendered before the key period as the second data corresponding to the key period and render them, and perform the above-mentioned data acquisition and rendering processing in batches for each key period in turn.

9. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method described in any one of claims 1 to 7 is implemented.

Images