Data display method and device, computer device and storage medium
Patent Information
- Application Number
- CN202611100951.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2026-07-23
- Publication Date
- 2026-10-16
AI Technical Summary
传统做法是直接获取全部原始数据并交由前端绘图库渲染,而原始数据包括数万乃至百万级数据点时,绘图库渲染压力大,容易导致渲染卡顿
[0020] In this embodiment, display parameters are received from the front end. These display parameters include at least the pixel width of the drawing display area, the data identifier of the data to be displayed, and the time range. Reference time-series data corresponding to the time range is selected from the time-series data set corresponding to the data identifier to obtain a reference time-series data set. The reference time-series data includes a timestamp and a corresponding numerical value. Based on the pixel width, a target number of data points to be rendered is determined. When the number of data points included in the reference time-series data set is greater than the target number, the target number of time-series data points are extracted from the reference time-series data set to obtain target time-series data. The target time-series data is then sent to the front end so that the front end performs visualization rendering within the drawing display area based on the target time-series data. Therefore, this application only needs to transmit and render target data points matching the pixel width, avoiding the problem of rendering lag caused by high rendering pressure on the drawing library.
Smart Images

Figure CN122924907A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technology, and more specifically, to a data display method, apparatus, computer device, and storage medium. Background Technology
[0002] With the rapid development of fields such as the Internet of Things, industrial monitoring, and financial transactions, the amount of time-series data generated in real time by various sensors is exploding. During data analysis and status monitoring, it is necessary to visualize massive amounts of historical or real-time data on screens with limited pixels (such as desktops, mobile devices, or large screens). The traditional approach is to directly acquire all the raw data and have it rendered by a front-end graphics library. However, when the raw data includes tens of thousands or even millions of data points, the graphics library faces heavy rendering pressure, easily leading to rendering lag. Summary of the Invention
[0003] This application provides a data display method, apparatus, device, and storage medium. The method only needs to transmit and render target data points that match the pixel width, avoiding the problem of rendering lag caused by high rendering pressure on the drawing library.
[0004] A first aspect of the embodiments of this application provides a data display method, the method comprising: Receive display parameters from the front end, the display parameters including at least the pixel width of the drawing display area, the data identifier of the data to be displayed, and the time range; In the time series data set corresponding to the data identifier, reference time series data corresponding to the time range is selected to obtain a reference time series data set, wherein the reference time series data includes timestamps and corresponding values; Based on the pixel width, determine the target amount of data to be rendered; When the number of data included in the reference time series data set is greater than the target number, the target number of time series data are extracted from the reference time series data set to obtain the target time series data; The target time series data is sent to the front end so that the front end can perform visualization rendering based on the target time series data in the drawing display area.
[0005] Optionally, the step of extracting the target number of time series data from the reference time series data set to obtain the target time series data includes: Based on the target quantity and the preset downsampling algorithm, the reference time series data is downsampled to obtain the target sampled data; Determine the extreme points in the reference time series data; The target time series data is determined based on the target sampling data and the extreme points.
[0006] Optionally, the method includes: Determine the data characteristics of the target time series data; Based on the data characteristics and the correspondence between preset data characteristics and downsampling algorithms, the downsampling algorithm to be used is determined.
[0007] Optionally, determining the target amount of data to be rendered based on the pixel width includes: Get the preset scaling factor; Multiply the scaling factor by the pixel width to obtain the target quantity.
[0008] Optionally, the step of downsampling the reference time-series data according to the target quantity and a preset downsampling algorithm to obtain target sampled data includes: Using a first preset window, the reference time series data is grouped, and an aggregation operation is performed on the time series data corresponding to each group to obtain aggregated time series data corresponding to each group. The value corresponding to the aggregated time series data is at least one of the average value, maximum value, and minimum value, and the number of aggregated time series data is greater than the target number. Using a preset downsampling algorithm and the target number, all aggregated time-series data are sampled to obtain target sampled data.
[0009] Optionally, when the values corresponding to the aggregated time-series data include an average value and a maximum value, the method further includes: Determine the difference between the average value and the maximum value; When the difference is greater than the preset difference, the second preset window is used to continue to group the time series data corresponding to the aggregated time series data to obtain new aggregated time series data.
[0010] Optionally, determining the target time series data based on the target sampled data and the extreme points includes: For each extreme point, determine the target sampled data that is closest to the extreme point in time; when the time distance between the target sampled data and the extreme point is less than a preset time distance, delete the target sampled data; Based on the remaining target sampling data and the extreme points, the target time series data is obtained.
[0011] In a second aspect, this application provides a data display device, including: A receiving unit is used to receive display parameters from the front end, the display parameters including at least the pixel width of the drawing display area, the data identifier of the data to be displayed, and the time range; The selection unit is used to select reference time-series data corresponding to the time range from the time-series data set corresponding to the data identifier, thereby obtaining a reference time-series data set, wherein the reference time-series data includes a timestamp and a corresponding value. The first determining unit is used to determine the target quantity of the data to be rendered based on the pixel width. An extraction unit is configured to extract the target number of time series data from the reference time series data set when the number of data included in the reference time series data set is greater than the target number, thereby obtaining target time series data; The sending unit is used to send the target time series data to the front end, so that the front end can perform visualization rendering based on the target time series data in the drawing display area.
[0012] Optionally, the extraction unit is used for: Based on the target quantity and the preset downsampling algorithm, the reference time series data is downsampled to obtain the target sampled data; Determine the extreme points in the reference time series data; The target time series data is determined based on the target sampling data and the extreme points.
[0013] Optionally, the apparatus includes a second determining unit, the second determining unit being configured to: Determine the data characteristics of the target time series data; Based on the data characteristics and the correspondence between preset data characteristics and downsampling algorithms, the downsampling algorithm to be used is determined.
[0014] Optionally, the first determining unit is configured to: Get the preset scaling factor; Multiply the scaling factor by the pixel width to obtain the target quantity.
[0015] Optionally, the extraction unit is used for: Using a first preset window, the reference time series data is grouped, and an aggregation operation is performed on the time series data corresponding to each group to obtain aggregated time series data corresponding to each group. The value corresponding to the aggregated time series data is at least one of the average value, maximum value, and minimum value, and the number of aggregated time series data is greater than the target number. Using a preset downsampling algorithm and the target number, all aggregated time-series data are sampled to obtain target sampled data.
[0016] Optionally, when the values corresponding to the aggregated time-series data include an average value and a maximum value, the device further includes a grouping unit, the grouping unit being used for: Determine the difference between the average value and the maximum value; When the difference is greater than the preset difference, the second preset window is used to continue to group the time series data corresponding to the aggregated time series data to obtain new aggregated time series data.
[0017] Optionally, the extraction unit is used for: For each extreme point, determine the target sampled data that is closest to the extreme point in time; when the time distance between the target sampled data and the extreme point is less than a preset time distance, delete the target sampled data; Based on the remaining target sampling data and the extreme points, the target time series data is obtained.
[0018] A third aspect of this application provides a computer device, including: a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps of any of the above methods.
[0019] A fourth aspect of the present application provides a computer-readable storage medium having a computer program stored thereon, characterized in that the computer program, when executed by a processor, implements the steps of the method as described in any of the above.
[0020] In this embodiment, display parameters are received from the front end. These display parameters include at least the pixel width of the drawing display area, the data identifier of the data to be displayed, and the time range. Reference time-series data corresponding to the time range is selected from the time-series data set corresponding to the data identifier to obtain a reference time-series data set. The reference time-series data includes a timestamp and a corresponding numerical value. Based on the pixel width, a target number of data points to be rendered is determined. When the number of data points included in the reference time-series data set is greater than the target number, the target number of time-series data points are extracted from the reference time-series data set to obtain target time-series data. The target time-series data is then sent to the front end so that the front end performs visualization rendering within the drawing display area based on the target time-series data. Therefore, this application only needs to transmit and render target data points matching the pixel width, avoiding the problem of rendering lag caused by high rendering pressure on the drawing library. Attached Figure Description
[0021] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings: Figure 1 A flowchart illustrating a data display method provided in one embodiment of this application; Figure 2 A flowchart illustrating a method for determining target time-series data according to an embodiment of this application; Figure 3 A flowchart illustrating a downsampling algorithm determination method provided in one embodiment of this application; Figure 4 A flowchart illustrating a method for determining a target quantity according to an embodiment of this application; Figure 5 A flowchart illustrating a method for determining target sampling data according to an embodiment of this application; Figure 6 A flowchart illustrating a method for determining target time-series data according to an embodiment of this application; Figure 7 A schematic diagram of a data display device structure provided in one embodiment of this application; Figure 8 This is a schematic diagram of a computer device structure provided in one embodiment of this application. Detailed Implementation
[0022] With the rapid development of fields such as the Internet of Things, industrial monitoring, and financial transactions, the amount of time-series data generated in real time by various sensors is exploding. During data analysis and status monitoring, it is necessary to visualize massive amounts of historical or real-time data on screens with limited pixels (such as desktops, mobile devices, or large screens). The traditional approach is to directly acquire all the raw data and have it rendered by a front-end graphics library. However, when the raw data includes tens of thousands or even millions of data points, the graphics library faces heavy rendering pressure, easily leading to rendering lag.
[0023] To address the aforementioned issues, this application provides a data display method. The method involves receiving display parameters from a front-end, including at least the pixel width of the drawing display area, a data identifier for the data to be displayed, and a time range. From the time-series data set corresponding to the data identifier, reference time-series data corresponding to the time range is selected to obtain a reference time-series data set, where the reference time-series data includes a timestamp and a corresponding numerical value. Based on the pixel width, a target number of data points to be rendered is determined. When the number of data points in the reference time-series data set exceeds the target number, the target number of time-series data points are extracted from the reference time-series data set to obtain target time-series data. The target time-series data is then sent to the front-end, enabling the front-end to perform visualization rendering within the drawing display area based on the target time-series data. As can be seen, this application only needs to transmit and render target data points matching the pixel width, avoiding the rendering lag problem caused by high rendering pressure on the drawing library.
[0024] To address the aforementioned issues, this application provides a data display method, please refer to [link to relevant documentation]. Figure 1 This includes the following steps 101-105: Step 101: Receive display parameters from the front end.
[0025] The front-end refers to the visualization application or webpage running on the user terminal (desktop, tablet, mobile phone, or TV), typically implemented based on HTML5 / JavaScript. Display parameters include at least the pixel width of the plotting display area, the data identifier of the data to be displayed, and the time range. The plotting display area is the pixel space used by the front-end to render the data visualization graphics; it can be the plotting area within a chart component or other areas, which are not limited here. For example, on a 1920×1080 resolution screen, the chart area might occupy 1000 pixels in width. The data identifier is used to uniquely identify the type of data to be displayed. For example, when displaying vibration acceleration monitoring data for a high-speed train bogie, the corresponding data identifier could be the sensor number or the measurement point name. The time range is used to limit the time interval corresponding to the data to be displayed, such as "2025-01-01 00:00:00 to 2025-01-31 23:59:59".
[0026] In this step, when the front-end initializes the chart and the user performs zoom or pan operations, it obtains the pixel width of the drawing display area, the time range of the data to be displayed, and the data identifier of the data to be displayed, and sends these parameters to the back-end server via HTTP / HTTPS requests so that the back-end server can process them accordingly.
[0027] Step 102: Select reference time series data corresponding to the time range from the time series data set corresponding to the data identifier to obtain the reference time series data set.
[0028] The time-series data set includes time-series data corresponding to data identifiers, with each time-series data containing a timestamp and a corresponding value. The reference time-series data includes a timestamp and a corresponding value.
[0029] In this step, after receiving the display parameters, the backend server finds the corresponding time series data set based on the data identifier, and then filters out the time series data with timestamps within the time range from the time series data set, using them as reference time series data to form a reference time series data set.
[0030] Step 103: Determine the target amount of data to be rendered based on the pixel width.
[0031] The scaling factor is a positive number greater than or equal to 1, used to meet the display requirements of high-resolution screens and avoid visual sparseness caused by excessively high physical pixel density. It can be set according to the user's needs.
[0032] In this step, a preset scaling factor is obtained, and the scaling factor is multiplied by the pixel width to get the target number. For example, if the pixel width is 1000 and k=1.2, the target number is 1200 pixels.
[0033] Step 104: When the number of data included in the reference time series data set is greater than the target number, extract the target number of target time series data that can represent the data characteristics of the reference time series data from the reference time series data.
[0034] In this step, when the amount of reference time-series data exceeds the target amount, downsampling is required. First, the sampling frequency is determined based on the target amount and the total number of points in the reference time-series data. Then, a preset downsampling algorithm and this sampling frequency are used to sample the reference time-series data, obtaining sampled data, which is then designated as the target time-series data. Simultaneously, data points representing the data characteristics can be extracted from the reference time-series data. The sampled data and the extracted feature points are then fused, retaining the target number of data points to determine the final target time-series data.
[0035] Step 105: Send the target time series data to the front end so that the front end can perform visualization rendering in the drawing display area based on the target time series data.
[0036] In this step, the backend encapsulates the target time-series data into a specified data format, such as a two-dimensional array [[timestamp1, value1], [timestamp2, value2], ...] in JSON format, and enables GZIP compression. The data is then returned to the frontend via a RESTful API or WebSocket.
[0037] After receiving the data, the front-end does not need to perform any further simplification; it directly calls the rendering interface of the drawing library to display the data within the drawing display area. Because the number of data points matches the pixel width of the drawing display area, the rendering process is extremely fast, and interactive operations such as zooming and panning are smooth and lag-free. When the user zooms to a smaller time range, the front-end will re-initiate a request carrying the new pixel width and time range, thus achieving dynamic display.
[0038] In this embodiment, display parameters are received from the front end. These display parameters include at least the pixel width of the drawing display area, the data identifier of the data to be displayed, and the time range. Reference time-series data corresponding to the time range is selected from the time-series data set corresponding to the data identifier to obtain a reference time-series data set. The reference time-series data includes a timestamp and a corresponding value. Based on the pixel width, a target number of data points to be rendered is determined. When the number of data points included in the reference time-series data set is greater than the target number, the target number of time-series data points are extracted from the reference time-series data set to obtain target time-series data. The target time-series data is then sent to the front end so that the front end performs visualization rendering within the drawing display area based on the target time-series data. Therefore, this application only needs to transmit and render target data points matching the pixel width, avoiding the problem of rendering lag caused by high rendering pressure on the drawing library.
[0039] In this embodiment, firstly, based on the number of target data points and using a preset downsampling algorithm, the reference time-series data is downsampled to obtain a set of target sampled data that reflects the overall trend of the data. Simultaneously, all extreme points are identified and extracted from the reference time-series data. Finally, the downsampled target sampled data is fused with the extracted extreme points to generate the final target time-series data. Therefore, this embodiment provides a method for determining target time-series data, such as... Figure 2 As shown, the specific steps include Step 201: Based on the target quantity and the preset downsampling algorithm, downsample the reference time series data to obtain the target sampled data.
[0040] The preset downsampling algorithm refers to an algorithm that can select representative data points from a large amount of time series data, including but not limited to the maximum triangle three-bucket algorithm (LTTB), the pattern median bucket algorithm, and the minimum standard error bucket algorithm.
[0041] For example, suppose the reference time series data contains M original data points, and the target number is T (M is greater than T). Taking the LTTB algorithm as an example: First, the reference time series data is divided into T buckets in chronological order, with each bucket containing consecutive data points. Then, a point is selected from each bucket such that the area of the triangle formed by this point, the representative point of the previous bucket, and the representative point of the next bucket is maximized. After traversing all buckets, T representative points are obtained as the target sampling data.
[0042] Step 202: Determine the extreme points in the reference time series data.
[0043] Extreme points include global extreme points and / or local extreme points.
[0044] In this step, all data points of the reference time series data are scanned, the values of each data point are compared, and global and / or local extrema are identified.
[0045] Step 203: Determine the target time series data based on the target sampling data and extreme points.
[0046] The target sampling data obtained in step 201 is merged with the extreme points obtained in step 202 to obtain a candidate data point set. Then, the set is sorted in ascending order of time, and duplicate points with the same or similar timestamps are removed (extreme points are retained first). Finally, the target time series data is obtained, which includes the target number of data points.
[0047] In this embodiment, the data characteristics of the target time-series data are analyzed. Then, based on pre-established mapping rules between data characteristics and downsampling algorithms, the most suitable downsampling algorithm for the current data characteristics is automatically matched and selected. This achieves dynamic optimization of algorithm selection, thereby improving the targeting and fidelity of downsampling. Therefore, this embodiment provides a method for determining a downsampling algorithm, such as... Figure 3 As shown, the specific steps include: Step 301: Determine the data characteristics of the reference time series data.
[0048] Upon receiving the reference time-series data, its data characteristics are first calculated. These characteristics include, but are not limited to, the degree of data fluctuation (such as variance and standard deviation), kurtosis (the ratio of peak value to RMS value), skewness (distribution symmetry), and noise level. For example, for a set of vibration monitoring data, a standard deviation of 5.2, a kurtosis of 4.8, and a skewness of 0.3 indicate that the data has high peak characteristics and a basically symmetrical distribution.
[0049] Step 302: Determine the downsampling algorithm to be used based on the data characteristics and the correspondence between the preset data characteristics and the downsampling algorithm.
[0050] In this step, the correspondence between data features and downsampling algorithms is established in advance, and the downsampling algorithm to be used for the reference time series data is determined based on the data features of the reference time series data.
[0051] When the data features are highly volatile and have multiple peaks, the downsampling algorithm used is the maximum triangle three-bucket algorithm. When the data features contain a large number of outliers and have a high noise level, the downsampling algorithm used is the pattern median bucket algorithm. When the data features are gradually changing and have low noise, the downsampling algorithm used is the minimum standard error bucket algorithm. When the data features are abrupt and frequently change, the downsampling algorithm used is the longest line segment bucket algorithm.
[0052] In this embodiment, a preset scaling factor can also be obtained; the scaling factor is multiplied by the pixel width to obtain the target quantity. Therefore, as... Figure 4 As shown, this application also provides a method for determining the target quantity, specifically including: Step 401: Obtain the preset scaling factor.
[0053] The scaling factor k is a user-configurable positive number, typically ranging from 1 to 2. Physically, it represents the number of data points expected to be displayed per pixel width. When k=1, the number of target data points equals the pixel width of the display area; when k>1, the number of target data points is greater than the pixel width, achieving oversampling, suitable for high-resolution screens (such as Retina displays) or scenarios requiring denser details. For example, for ordinary office monitors, k is set to 1.2 by default; for Apple Retina displays, k can be set to 2.0.
[0054] Step 402: Multiply the scaling factor and the pixel width to obtain the number of target data points.
[0055] In this step, let the width of the display area from the front end be W (in pixels), and the scaling factor be k. Then, the number of target data points T = round(W × k), where round represents rounding to the nearest integer. For example, if the width of the chart area from the front end is 1000 pixels and k = 1.5, then T = 1500. If k = 1.0, then T = 1000. If W = 1920 and k = 2.0, then T = 3840.
[0056] In this embodiment, the original reference time-series data is coarsely aggregated using a first preset window, with each window outputting a representative value to obtain intermediate data. This intermediate data has a larger volume than the target number but is significantly smaller than the reference time-series data. Then, a preset downsampling algorithm, combined with the target number, is used to perform secondary sampling on the intermediate data, compressing it to the target number of sampled data. Therefore, this embodiment provides a method for determining target sampled data, such as... Figure 5 As shown, the specific steps include: Step 501: Using the first preset window, the reference time series data is grouped, and an aggregation operation is performed on the time series data corresponding to each group to obtain the aggregated time series data corresponding to each group.
[0057] Among them, the value corresponding to the aggregated time series data is at least one of the average, maximum and minimum values, and the number of aggregated time series data is greater than the target number.
[0058] In this step, the reference time series data is divided into multiple groups according to the first preset window, with each group containing a fixed number of data points. An aggregation operation is performed on the time series data corresponding to each group. The aggregation operation includes calculating at least one of the average value (AVG), maximum value (MAX), and minimum value (MIN) to obtain the aggregated time series data corresponding to each group.
[0059] Step 502: Using a preset downsampling algorithm and target number, sample all aggregated time series data to obtain target sampled data.
[0060] Furthermore, in scenarios with drastic data fluctuations, using a fixed-size first preset window for coarse-grained aggregation may result in a single window containing both sharp increases and decreases, making the calculated average value unable to accurately reflect the data characteristics within the window, while significantly increasing the difference between the maximum value and the average value. Therefore, to address this situation, further segmentation can be used to obtain new aggregated time-series data. The specific steps are as follows: when the aggregated time-series data includes both an average value and a maximum value, determine the difference between the average value and the maximum value; when the difference exceeds a preset difference, use a second preset window to further group the time-series data corresponding to the aggregated time-series data, thus obtaining new aggregated time-series data.
[0061] The first preset window is a larger window size, used for initial coarse-grained aggregation to quickly reduce the data volume. The second preset window is a smaller window size, used for more refined aggregation of specific areas. The size of the first preset window is larger than the size of the second preset window. In this step, firstly, for each aggregated time-series data obtained after aggregation through the first preset window, the difference between its corresponding average and maximum value is calculated. This difference reflects the degree of fluctuation of the data within the current window. Secondly, in response to the difference being greater than a preset difference, the original time-series data corresponding to the aggregated time-series data is further grouped using a second preset window to obtain time-series data corresponding to multiple groups. Aggregation is then performed on the time-series data corresponding to each group to obtain aggregated time-series data for each group. If the difference between the average and maximum value of the aggregated time-series data is still greater than the preset difference, smaller windows can be recursively used for further subdivision until all aggregated time-series data meet the conditions.
[0062] Similarly, when the values corresponding to the aggregated time series data include combinations such as average and minimum values, or maximum and minimum values, the above-mentioned adaptive window subdivision operation can also be performed based on the corresponding difference comparison results.
[0063] In this embodiment, for each extreme point, its distance to all sampled data points on the time axis is calculated, and the closest sampled point is found. If the distance is less than a preset time threshold, it is determined that the two will fall within the same pixel column during display. In this case, the sampled point is deleted while the extreme point is retained. Finally, all the retained sampled points (with redundant points removed) are merged with all extreme points and sorted by time to obtain the final target time-series data. Figure 6 As shown, this application provides a method for determining target time series data, the method comprising: Step 601: For each extreme point, determine the target sampled data that is closest to that extreme point in time.
[0064] In this step, for each extreme point, the timestamp corresponding to each sampled data is compared with the timestamp corresponding to that extreme point to obtain the target sampled data that is closest to that extreme point in time.
[0065] For example, if the timestamp of the global maximum point is 1000.5 seconds, and there are two points in the target sampling data with timestamps of 1000.2 seconds and 1001.0 seconds, and distances of 0.3 seconds and 0.5 seconds respectively, then the point with timestamp of 1000.2 seconds is selected as the nearest point.
[0066] Step 602: When the time distance between the target sampling data and the extreme point is less than the preset time distance, delete the target sampling data.
[0067] The preset time distance is used to indicate the maximum allowable distance between two data points on the time axis, which can be considered as overlapping. It can be determined based on the ratio of the time range to the number of pixels, that is, the time width corresponding to each pixel.
[0068] In this step, if the time distance between the extreme point and the nearest sampling point is less than a preset time distance, it is assumed that they will fall within the same pixel column in the final display, and retaining both would cause visual overlap and waste resources. In this case, the nearest point in the target sampling data is deleted, and the extreme point is retained.
[0069] Step 603: Based on the remaining target sampling data and extreme points, obtain the target time series data.
[0070] The target sampling data obtained after step 602 is merged with all extreme points and then sorted in ascending order by timestamp to obtain the final target time series data.
[0071] It should be understood that although the steps in the flowchart are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order constraint on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the diagram may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.
[0072] Please see Figure 7 One embodiment of this application provides a data display device 700, comprising: The receiving unit 701 is used to receive display parameters from the front end, the display parameters including at least the pixel width of the drawing display area, the data identifier of the data to be displayed, and the time range; The selection unit 702 is used to select reference time-series data corresponding to the time range from the time-series data set corresponding to the data identifier, and obtain a reference time-series data set, wherein the reference time-series data includes a timestamp and a corresponding value. The first determining unit 703 is used to determine the target quantity of the required rendering data based on the pixel width; Extraction unit 704 is used to extract the target number of time series data from the reference time series data set when the number of data included in the reference time series data set is greater than the target number, to obtain target time series data; The sending unit 705 is used to send the target time series data to the front end, so that the front end can perform visualization rendering based on the target time series data in the drawing display area.
[0073] Optionally, the extraction unit 704 is used for: Based on the target quantity and the preset downsampling algorithm, the reference time series data is downsampled to obtain the target sampled data; Determine the extreme points in the reference time series data; The target time series data is determined based on the target sampling data and the extreme points.
[0074] Optionally, the device includes a second determining unit 706, which is configured to: Determine the data characteristics of the target time series data; Based on the data characteristics and the correspondence between preset data characteristics and downsampling algorithms, the downsampling algorithm to be used is determined.
[0075] Optionally, the first determining unit 703 is used to: Get the preset scaling factor; Multiply the scaling factor by the pixel width to obtain the target quantity.
[0076] Optionally, the extraction unit 704 is used for: Using a first preset window, the reference time series data is grouped, and an aggregation operation is performed on the time series data corresponding to each group to obtain aggregated time series data corresponding to each group. The value corresponding to the aggregated time series data is at least one of the average value, maximum value, and minimum value, and the number of aggregated time series data is greater than the target number. Using a preset downsampling algorithm and the target number, all aggregated time-series data are sampled to obtain target sampled data.
[0077] Optionally, when the values corresponding to the aggregated time-series data include an average value and a maximum value, the device further includes a grouping unit 707, which is used for: Determine the difference between the average value and the maximum value; When the difference is greater than the preset difference, the second preset window is used to continue to group the time series data corresponding to the aggregated time series data to obtain new aggregated time series data.
[0078] Optionally, the extraction unit 704 is used for: For each extreme point, determine the target sampled data that is closest to the extreme point in time; when the time distance between the target sampled data and the extreme point is less than a preset time distance, delete the target sampled data; Based on the remaining target sampling data and the extreme points, the target time series data is obtained.
[0079] For specific limitations regarding the aforementioned data display device, please refer to the limitations on the data display method described above, which will not be repeated here. Each unit in the aforementioned data display device can be implemented entirely or partially through software, hardware, or a combination thereof. Each of these units can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each of the above modules.
[0080] In one embodiment, a computer device is provided, the internal structure of which can be as follows: Figure 8As shown. The computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The database stores data. The network interface communicates with external terminals via a network connection. The computer program, executed by the processor, can implement one of the above-described data display methods. It includes: memory and a processor; the memory stores a computer program; and the processor executes the computer program to implement any step of the above-described data display method.
[0081] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon that, when executed by a processor, can perform any of the steps in the data display method described above.
[0082] Those skilled in the art will understand that embodiments of this application can be provided as data display methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied 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.
[0083] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.
[0084] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1The function specified in one or more boxes.
[0085] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.
[0086] Although preferred embodiments of this application have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of this application.
[0087] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.
Claims
1. A data display method, characterized in that, The method includes: Receive display parameters from the front end, the display parameters including at least the pixel width of the drawing display area, the data identifier of the data to be displayed, and the time range; In the time series data set corresponding to the data identifier, reference time series data corresponding to the time range is selected to obtain a reference time series data set, wherein the reference time series data includes timestamps and corresponding values; Based on the pixel width, determine the target amount of data to be rendered; When the number of data included in the reference time series data set is greater than the target number, the target number of time series data are extracted from the reference time series data set to obtain the target time series data; The target time series data is sent to the front end so that the front end can perform visualization rendering based on the target time series data in the drawing display area.
2. The method according to claim 1, characterized in that, The step of extracting the target number of time series data from the reference time series data set to obtain the target time series data includes: Based on the target quantity and the preset downsampling algorithm, the reference time series data is downsampled to obtain the target sampled data; Determine the extreme points in the reference time series data; The target time series data is determined based on the target sampling data and the extreme points.
3. The method according to claim 2, characterized in that, The method includes: Determine the data characteristics of the target time series data; Based on the data characteristics and the correspondence between preset data characteristics and downsampling algorithms, the downsampling algorithm to be used is determined.
4. The method according to claim 1, characterized in that, Determining the target amount of data to be rendered based on the pixel width includes: Get the preset scaling factor; Multiply the scaling factor by the pixel width to obtain the target quantity.
5. The method according to claim 2, characterized in that, The step of downsampling the reference time-series data according to the target quantity and a preset downsampling algorithm to obtain target sampled data includes: Using a first preset window, the reference time series data is grouped, and an aggregation operation is performed on the time series data corresponding to each group to obtain aggregated time series data corresponding to each group. The value corresponding to the aggregated time series data is at least one of the average value, maximum value, and minimum value, and the number of aggregated time series data is greater than the target number. Using a preset downsampling algorithm and the target number, all aggregated time-series data are sampled to obtain target sampled data.
6. The method according to claim 5, characterized in that, When the values corresponding to the aggregated time-series data include an average value and a maximum value, the method further includes: Determine the difference between the average value and the maximum value; When the difference is greater than the preset difference, the second preset window is used to continue to group the time series data corresponding to the aggregated time series data to obtain new aggregated time series data.
7. The method according to claim 2, characterized in that, The step of determining the target time series data based on the target sampled data and the extreme points includes: For each extreme point, determine the target sampled data that is closest to the extreme point in time; when the time distance between the target sampled data and the extreme point is less than a preset time distance, delete the target sampled data; Based on the remaining target sampling data and the extreme points, the target time series data is obtained.
8. A data display device, characterized in that, The device includes: A receiving unit is used to receive display parameters from the front end, the display parameters including at least the pixel width of the drawing display area, the data identifier of the data to be displayed, and the time range; The selection unit is used to select reference time-series data corresponding to the time range from the time-series data set corresponding to the data identifier, thereby obtaining a reference time-series data set, wherein the reference time-series data includes a timestamp and a corresponding value. The first determining unit is used to determine the target quantity of the data to be rendered based on the pixel width. An extraction unit is configured to extract the target number of time series data from the reference time series data set when the number of data included in the reference time series data set is greater than the target number, thereby obtaining target time series data; The sending unit is used to send the target time series data to the front end, so that the front end can perform visualization rendering based on the target time series data in the drawing display area.
9. A computer device, comprising: The method includes a memory and a processor, the memory storing a computer program, characterized in that the processor executes the computer program to implement the steps of the method according to any one of claims 1 to 7.
10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 7.