Display method of multi-chart synchronous interactive interface, computer equipment, storage medium and program product

Abstract

The invention relates to a display method of a multi-chart synchronous interactive interface, computer equipment, a storage medium and a program product. The method comprises the steps of obtaining original data from a hypertext transfer protocol client library by responding to a triggering operation on a data import control in a display interface on a target application; and in response to a trigger operation on a target multi-chart display control in the display interface, extracting time information and data information from the original data, generating a target chart according to the time information, the data information and coordinate axis information and chart types corresponding to the target multi-chart display control, and displaying the target chart in a display area in the display interface. By means of the method, synchronous display of different data on the same date by multiple charts in the same interface is achieved, operation complexity is reduced, and meanwhile efficiency in a data analysis scene is improved.

Description

Technical Field

[0001] This application relates to the field of data visualization technology, and in particular to a method for displaying a multi-chart synchronous interactive interface, a computer device, a storage medium, and a program product. Background Technology

[0002] With the rapid development of technologies such as the Internet, social networks, and the Internet of Things, the amount of data generated in various fields is exploding. This data often contains multiple dimensions of attributes, such as transaction data in the financial field, patient diagnosis and treatment data in the medical field, or monitoring data in the meteorological field. There are complex relationships and dynamic change patterns among these multi-dimensional data. Traditional single charts are difficult to fully present the overall structure and hidden patterns of multi-dimensional data. However, multi-chart data visualization technology can combine various chart types to present complex data intuitively from different angles and levels, helping users quickly discover the relationships, trends, and anomalies between different data.

[0003] Current multi-chart data visualization techniques primarily present complex data by combining various chart types (such as scatter plot matrices, parallel coordinate plots, and line charts). However, directly combining multiple chart types can result in suboptimal display quality. Summary of the Invention

[0004] Therefore, it is necessary to provide a method for displaying a multi-chart synchronous interactive interface, a computer device, a storage medium, and a program product to address the aforementioned technical problems.

[0005] Firstly, this application provides a method for displaying a multi-chart synchronized interactive interface, including:

[0006] In response to a triggering operation on a data import control displayed on the target application's interface, raw data is retrieved from the Hypertext Transfer Protocol client library;

[0007] In response to a trigger operation on the target multi-chart display control in the display interface, time information and data information are extracted from the raw data, and a target chart is generated based on the time information, data information, coordinate axis information and chart type corresponding to the target multi-chart display control, and the target chart is displayed in the display area of ​​the display interface; the target chart includes at least two charts.

[0008] In one embodiment, generating a target chart based on time information, data information, and the coordinate axis information and chart type corresponding to the target multi-chart display control includes:

[0009] The reference display date is determined based on the coordinate axis information, and multiple matching target display dates are filtered from the time information based on the reference display date, as well as the target data corresponding to each target display date is filtered from the data information.

[0010] The dates of multiple targets are sorted in chronological order to obtain timeline information, and dataline information is obtained based on the data from multiple targets.

[0011] Generate and display the target chart based on the data axis and time axis information, according to the chart type.

[0012] In one embodiment, filtering target data corresponding to the display dates of each target from the data information includes:

[0013] If the data corresponding to multiple target display dates does not meet the display requirements of the chart type, then the data corresponding to multiple target display dates will be interpolated based on the reference display date to obtain multiple data information after interpolation;

[0014] Filter the target data from the data information to find the target data corresponding to the display date of each target, including:

[0015] Filter out the target data corresponding to the display date of each target from the multiple interpolated data;

[0016] The dates of multiple targets are sorted chronologically to obtain timeline information, including:

[0017] The dates of multiple targets are sorted in chronological order to obtain timeline information.

[0018] In one embodiment, a target chart is generated and displayed according to the chart type based on the data axis information and time axis information, including:

[0019] If the chart type is used to indicate the display of different types of charts in the same coordinate system, then the first vertical axis is generated based on the data axis information, and the first horizontal axis is generated based on the time axis information. The chart is then rendered in the display area formed by the first horizontal axis and the first vertical axis to generate the target chart.

[0020] If the chart type is used to indicate the display of the same type of chart in the same coordinate system, the data axis information is processed, and a second vertical axis is generated based on the processed data axis information, and a second horizontal axis is generated based on the time axis information. The chart is then rendered in the display area formed by the second horizontal axis and the second vertical axis to generate the target chart.

[0021] In one embodiment, the data axis information is processed, and a second ordinate axis is generated based on the processed data axis information, including:

[0022] The data axis information is divided into different data types to obtain multiple sets of data axis information.

[0023] A second vertical axis is generated based on the processed data axis information, including:

[0024] A second ordinate axis is generated based on multiple sets of data axis information; the second ordinate axis includes multiple sub-ordinate axes; the multiple sub-ordinate axes correspond to different types of numerical ranges.

[0025] In one embodiment, generating a first horizontal axis based on timeline information includes:

[0026] In response to a trigger action on any point in time on the horizontal axis of the target chart, a marker line is generated and highlighted at the corresponding point in time on all charts contained in the target chart.

[0027] In one embodiment, generating and displaying a target chart according to the chart type includes:

[0028] In response to a zoom operation on the target chart, the target chart is displayed according to the zoom level indicated by the zoom operation, and the zoom ratio is displayed in the display area of ​​the target chart.

[0029] Secondly, this application also provides a display device for a multi-chart synchronous interactive interface, comprising:

[0030] The data module, in response to a triggering operation of the data import control in the display interface of the target application, retrieves raw data from the Hypertext Transfer Protocol client library;

[0031] The display module, in response to the trigger operation of the target multi-chart display control in the display interface, extracts time information and data information from the raw data, generates the target chart based on the time information, data information, and the coordinate axis information and chart type corresponding to the target multi-chart display control, and displays the target chart in the display area of ​​the display interface.

[0032] Thirdly, this application also 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 perform the following steps:

[0033] In response to a triggering operation on a data import control displayed on the target application's interface, raw data is retrieved from the Hypertext Transfer Protocol client library;

[0034] In response to a trigger operation on the target multi-chart display control in the display interface, time information and data information are extracted from the raw data, and a target chart is generated based on the time information, data information, coordinate axis information and chart type corresponding to the target multi-chart display control, and the target chart is displayed in the display area of ​​the display interface.

[0035] Fourthly, this application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, performs the following steps:

[0036] In response to a triggering operation on a data import control displayed on the target application's interface, raw data is retrieved from the Hypertext Transfer Protocol client library;

[0037] In response to a trigger operation on the target multi-chart display control in the display interface, time information and data information are extracted from the raw data, and a target chart is generated based on the time information, data information, coordinate axis information and chart type corresponding to the target multi-chart display control, and the target chart is displayed in the display area of ​​the display interface; the target chart includes at least two charts.

[0038] Fifthly, this application also provides a computer program product, including a computer program that, when executed by a processor, performs the following steps:

[0039] In response to a triggering operation on a data import control displayed on the target application's interface, raw data is retrieved from the Hypertext Transfer Protocol client library;

[0040] In response to a trigger operation on the target multi-chart display control in the display interface, time information and data information are extracted from the raw data, and a target chart is generated based on the time information, data information, coordinate axis information and chart type corresponding to the target multi-chart display control, and the target chart is displayed in the display area of ​​the display interface; the target chart includes at least two charts.

[0041] The aforementioned method for displaying a multi-chart synchronous interactive interface, computer equipment, storage medium, and program product, in response to a trigger operation on the data import control in the display interface of the target application, obtains raw data from a Hypertext Transfer Protocol client library; in response to a trigger operation on the target multi-chart display control in the display interface, extracts time and data information from the raw data, and generates a target chart based on the time information, data information, and the coordinate axis information and chart type corresponding to the target multi-chart display control; and displays the target chart within the display area of ​​the display interface; the target chart includes at least two charts. This method, by triggering the target multi-chart display control in the display interface and extracting time and data information from multiple charts, achieves synchronous display of different data on the same date across multiple charts on the same interface, reducing operational complexity while improving efficiency in data analysis scenarios. Attached Figure Description

[0042] To more clearly illustrate the technical solutions in the embodiments of this application or related technologies, the drawings used in the description of the embodiments of this application or related technologies will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0043] Figure 1 This is an application environment diagram of a method for displaying a multi-chart synchronous interactive interface in one embodiment;

[0044] Figure 2 This is one of the flowcharts illustrating a method for displaying a multi-chart synchronized interactive interface in one embodiment;

[0045] Figure 3 This is one of the interface diagrams for a method of displaying a multi-chart synchronous interactive interface in one embodiment;

[0046] Figure 4 This is the second interface diagram of a method for displaying a multi-chart synchronous interactive interface in one embodiment;

[0047] Figure 5 This is the third interface diagram of a method for displaying a multi-chart synchronous interactive interface in one embodiment;

[0048] Figure 6 This is a second flowchart illustrating a method for displaying a multi-chart synchronized interactive interface in one embodiment;

[0049] Figure 7 This is the third flowchart illustrating a method for displaying a multi-chart synchronized interactive interface in one embodiment;

[0050] Figure 8This is the fourth flowchart illustrating a method for displaying a multi-chart synchronized interactive interface in one embodiment;

[0051] Figure 9 The fourth diagram is an example of a method for displaying a multi-chart synchronous interactive interface in one embodiment.

[0052] Figure 10 This is the fifth flowchart illustrating a method for displaying a multi-chart synchronized interactive interface in one embodiment;

[0053] Figure 11 This is a flowchart of a method for displaying a multi-chart synchronized interactive interface in one embodiment;

[0054] Figure 12 This is the seventh flowchart illustrating a method for displaying a multi-chart synchronized interactive interface in one embodiment.

[0055] Figure 13 This is the fifth interface diagram of a method for displaying a multi-chart synchronous interactive interface in one embodiment;

[0056] Figure 14 This is the eighth flowchart illustrating a method for displaying a multi-chart synchronized interactive interface in one embodiment.

[0057] Figure 15 This is a block diagram of the device structure of a display device for a multi-chart synchronous interactive interface in one embodiment. Detailed Implementation

[0058] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0059] It should be noted that the terms "first," "second," etc., used in this application can be used to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish the first element from the second element. The terms "comprising" and "having," and any variations thereof, used in this application, are intended to cover non-exclusive inclusion. The term "multiple" used in this application refers to two or more. The term "and / or" used in this application refers to one of the embodiments, or any combination of multiple embodiments.

[0060] With the rapid development of technologies such as the Internet, social networks, and the Internet of Things, the amount of data generated in various fields is exploding. This data often contains multiple dimensions of attributes, such as transaction data in the financial field, patient diagnosis and treatment data in the medical field, or monitoring data in the meteorological field. There are complex relationships and dynamic change patterns among these multi-dimensional data. Traditional single charts are difficult to fully present the overall structure and hidden patterns of multi-dimensional data. However, multi-chart data visualization technology can combine various chart types to present complex data intuitively from different angles and levels, helping users quickly discover the relationships, trends, and anomalies between different data.

[0061] Current multi-chart data visualization techniques primarily present complex data by combining various chart types (such as scatter plot matrices, parallel coordinate plots, and line charts). However, directly combining multiple chart types can result in suboptimal display quality.

[0062] In view of the above-mentioned technical problems, this application provides a method for displaying a multi-chart synchronous interactive interface. The following embodiments will specifically describe the method for displaying the multi-chart synchronous interactive interface.

[0063] In one exemplary embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 1 As shown, the computer device includes a processor, memory, input / output interface, communication interface, display unit, and input device. The processor, memory, and input / output interface are connected via a system bus, and the communication interface, display unit, and input device are also connected to the system bus via the input / output interface. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The input / output interface is used for exchanging information between the processor and external devices. The communication interface is used for wired or wireless communication with external terminals; wireless communication can be achieved through Wi-Fi, mobile cellular networks, Near Field Communication (NFC), or other technologies. When the computer program is executed by the processor, it implements a method for displaying a multi-graphic synchronous interactive interface. The display unit of the computer device forms a visually visible image and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be an LCD screen or an e-ink screen. The input device of the computer device can be a touch layer covering the display screen, or buttons, trackballs, or touchpads set on the casing of the computer device, or external keyboards, touchpads, or mice, etc.

[0064] Those skilled in the art will understand that Figure 1 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0065] In one exemplary embodiment, a method for displaying a multi-chart synchronized interactive interface is provided, which is applied to... Figure 1 Taking computer equipment as an example, such as Figure 2 As shown, it includes:

[0066] S201, in response to a trigger operation on a data import control displayed on the target application's interface, retrieve raw data from the Hypertext Transfer Protocol client library.

[0067] The target application refers to data visualization application software running on computer devices, which can display and analyze different chart data through front-end technology; the display interface in the application software can display different charts through interaction with the user. Optional, see [link to relevant documentation]. Figure 3 The displayed interface includes various interactive controls, such as data import controls, single chart display controls, multi-chart display controls, and display areas for icons. The data import control is triggered when the user clicks, allowing the user to select the desired chart data. The Hypertext Transfer Protocol (HTTP) client refers to the axios library, a modern Promise-based HTTP client library primarily used for sending HTTP requests in browsers and Node.js environments. The raw data includes data related to one type of chart, or multiple types of charts; the number of chart types in the raw data depends on the display requirements. The raw data includes time data and various monitoring metrics related to the business scenario.

[0068] In this embodiment, when a user runs the target application, clicking the data import control on the display interface triggers the data import control. After receiving the data import instruction, the computer device uses a Hypertext Transfer Protocol client to complete data interaction with the data source, loading and caching the obtained raw data in the background of the computer device. For example, the computer device can use the axios library to complete data interaction with the backend data source. In the initial triggering phase of the data request, the computer device uses a user interface tool library (such as the React library, Vue3 components, or the Angular framework) to initiate a request. Taking Vue3 components as an example, during the framework mounting phase, the computer device initiates the first request based on the lifecycle hook function (onMounted) to ensure that the data can be quickly presented when the interface loads. Then the computer device... Asynchronous requests are initiated through the axios library to call backend interfaces to obtain raw data for line charts and candlestick charts. Specifically, the device vibration application programming interface (e.g., / api / device / vibration) is called to obtain raw data for line charts, and the device current application programming interface (e.g., / api / device / current) is called to obtain raw data for candlestick charts. The raw data for line charts and candlestick charts must contain time fields and indicator value fields. The time field can support two formats: one is a timestamp format, such as a Unix timestamp, and the other is the ISO 8601 format string. The obtained raw data for line charts and candlestick charts can be temporarily stored in the state management library, i.e., the Pinia global state, to avoid redundant data transmission between components.

[0069] S202, in response to the trigger operation of the target multi-chart display control in the display interface, extracts time information and data information from the raw data, generates a target chart based on the time information, data information and the coordinate axis information and chart type corresponding to the target multi-chart display control, and displays the target chart in the display area of ​​the display interface.

[0070] The target multi-chart display control allows for the display of different charts when the user triggers the computer device, with the target chart including at least two charts.

[0071] In this embodiment, after obtaining the raw data using the data import control, the user clicks the target multi-chart display control and selects the desired chart from different chart label controls for display. For example, after clicking the target multi-chart display control, the user selects the desired chart (such as line chart and candlestick chart) from the chart label controls for chart types such as line chart, candlestick chart, curve chart, scatter plot, and bar chart. The system then loads the required data and time information from the computer background, renders different charts using the data and time information, and generates the target chart on the display interface by combining the coordinate axis information corresponding to the target multi-chart display control. For example, when the user triggers the target multi-chart display control and needs to display data information using line chart and candlestick chart, the computer device can construct a line chart component (LineChart.vue) and a candlestick chart component (CandleChart.vue) using a user interface tool library (such as Vue3 components), and initialize an Enterprise Charts (ECharts) instance in onMounted, binding it to the Document Object Model (DocumentObject). The system uses a Model (DOM) container and then initiates an asynchronous request via the axios library to call the backend interface to obtain the raw data for the line chart and candlestick chart. From the raw data, it extracts the time field and indicator value field for all charts and uses a date processing tool (such as dayjs) to convert all time fields to the format "YYYY-MM-DD" (year-month-day hour:minute). The format is "HH:mm". Time information is obtained from the time field, data information from the indicator value field, and the target multi-charts to be displayed are selected based on actual needs. The time information is received using property functions (props) and converted into a two-dimensional array format supported by ECharts. Then, the converted time information, data information, and target multi-charts are combined to generate the target chart based on the corresponding coordinate axis information and chart type in the display control area. For example, taking the multi-chart display control as an example, the time information obtained from the time field is 12:00, the data information (such as ultrasonic partial discharge data) is obtained from the indicator value field, and the target multi-charts to be displayed are selected as gas, ultrasonic partial discharge, ultra-high frequency partial discharge, high frequency partial discharge, vibration, load voltage, core clamp current, oil temperature, and ambient temperature. The computer equipment can then generate the target multi-charts based on the above information and display them in the display area of ​​the display interface. Figure 4As shown, the `series.type` property of the line chart is set to "line", and the candlestick chart is set to "candlestick". The chart containers use a grid layout (CSS Grid) with a fixed number of columns (e.g., 2 columns) and row spacing (16 pixels). Each chart container has a built-in "synchronization control marker area" (located in the upper right corner of the container, 20px x 20px) to display the synchronization status (e.g., green dots indicate synchronization in progress; red dots indicate synchronization is off). Optionally, clicking the marker area will bring up a "synchronization status toggle menu", allowing manual on / off synchronization. Thus, the computer device displays the target chart within the display area of ​​the interface, as shown below. Figure 5 As shown.

[0072] The above-described method for displaying a multi-chart synchronized interactive interface retrieves raw data from a Hypertext Transfer Protocol client library in response to a trigger operation on the data import control in the target application's display interface; extracts time and data information from the raw data in response to a trigger operation on the target multi-chart display control in the display interface; generates a target chart based on the time and data information, the coordinate axis information and chart type corresponding to the target multi-chart display control; and displays the target chart within the display area of ​​the display interface. The target chart includes at least two charts. This method, by triggering the target multi-chart display control in the display interface and extracting time and data information from multiple charts, achieves synchronized display of different data on the same date across multiple charts on the same interface, reducing operational complexity and improving user efficiency in data analysis scenarios.

[0073] In an exemplary embodiment, the "generating a target chart based on time information, data information, and the coordinate axis information and chart type corresponding to the target multi-chart display control" in S202 above, such as Figure 6 ,include:

[0074] S301, determine the reference display date based on the coordinate axis information, filter out multiple matching target display dates from the time information based on the reference display date, and filter out the target data corresponding to each target display date from the data information.

[0075] In this embodiment, the computer device obtains the raw data array of the X-axis (category type) from the EnterpriseCharts (ECharts) configuration item in the display control area. This raw data array is directly filled with the computer device's date (formatted uniformly as "YYYY-MM-DD HH:mm"), thus determining a reference date. The reference date is then filtered to determine the date range within the visible interval of the coordinate axis. For example, if the filtered dates are from "2025-10-01 00:00" to "2025-10-30 23:59", this date range is the filter boundary for the reference display date, which is from "2025-10-01 00:00" to "2025-10-30". The system retrieves the time information from the reference date list at 23:59 and performs a full character match between the converted time information obtained through a date processing tool and the reference display date list. All overlapping dates are then extracted as target display dates. This process filters out multiple matching target display dates from the time information and sorts them in ascending order of time. Finally, it generates multiple target display dates and filters out the target data corresponding to each target display date from the data information. Simultaneously, the computer device can store the raw data obtained from the Hypertext Transfer Protocol client library and the target data corresponding to each target display date from the data information in a local database (localStorage) or a component cache container (keep-alive) of the user interface tool library for caching. This allows for direct reading of the cache when the page loads, avoiding repeated API calls. The cache expiration time can be set (e.g., 2 hours), and after expiration, the data is automatically re-requested and the cache is updated.

[0076] S302, sort the display dates of multiple targets in chronological order to obtain time axis information, and obtain data axis information based on the data of multiple targets.

[0077] The target display date refers to the date data that the user needs to view.

[0078] In this embodiment, the computer device initiates an asynchronous request through the axios library to call the backend interface to obtain the raw data of the line chart and candlestick chart. It then extracts the time field and indicator value field of all charts from the raw data. The computer device processes the time field using a date processing tool to obtain multiple target display dates, which are then sorted in chronological order (ascending order) to obtain the time axis information. The indicator value field stores the data in key-value pairs, containing a mapping relationship between "date" and "indicator value." For each target display date, the computer device can directly read the corresponding value from the data information, thus obtaining the data axis information based on multiple target data.

[0079] S303 generates and displays the target chart according to the data axis information and time axis information, and in accordance with the chart type.

[0080] In this embodiment, after obtaining the raw data using the data import control, the computer device parses the raw data to obtain time and data information. It then selects the desired date data based on a reference date, generating timeline information. Combining the timeline information with the data information, it filters the corresponding date data to obtain dataline information. Finally, based on the timeline and dataline information, it renders the chart according to the chart type selected by the user in the target multi-chart display control, generating and displaying the target chart. Taking line charts and candlestick charts as examples, the computer device obtains the required dataline and timeline information based on the raw data. For different chart types, the computer device can simultaneously filter different chart data to select... The data in different charts are matched with the target display date to ensure that the data in each chart corresponds one-to-one after the time axis is aligned. For example, the data in the line chart and the data in the candlestick chart share the same target display date. For example, if the computer needs to display ultrasonic partial discharge data and high frequency partial discharge data from October 1, 2025 to October 9, 2025, the computer can extract 100 standardized dates (e.g., 1 data point per hour) from the time axis range, match these 100 dates from the original time information, exclude redundant data outside the range, and extract the corresponding date values ​​from the ultrasonic partial discharge data and high frequency partial discharge data as needed, generating two arrays of length 100, and generating the line chart and candlestick chart. In other words, the target chart is generated and displayed according to the chart type.

[0081] In an exemplary embodiment, the "filtering out target data corresponding to the display date of each target from the data information" in S301 above, such as Figure 7 ,include:

[0082] S401, if the data corresponding to multiple target display dates does not meet the display requirements of the chart type, then the data corresponding to multiple target display dates are interpolated according to the reference display date to obtain multiple data information after interpolation.

[0083] In this embodiment, when the computer device filters target data corresponding to each target display date from the data information, it finds that the data corresponding to multiple target display dates does not meet the display requirements of the chart type (e.g., line charts require continuous values, candlestick charts require complete quadruple data). The computer device can complete the data using linear interpolation (e.g., the average value of adjacent dates). The computer device iterates through the time field of the original data of each chart, compares multiple target display dates with the reference display date, marks the null data points corresponding to the missing dates (e.g., missing values ​​in line charts), and completes the data using linear interpolation. The completed data needs to meet the display requirements of each chart; for example, line charts should not have null values, and candlestick charts should not have null values. Figure 4 The tuple has complete parameters, and the trend of the completed data is consistent with the trend of the original data, thus obtaining multiple data information after interpolation.

[0084] S402, filter out the target data corresponding to the display date of each target from the data information, including: filter out the target data corresponding to the display date of each target from multiple interpolated data information.

[0085] In this embodiment of the application, after obtaining multiple data information after interpolation through linear interpolation (such as the average value of adjacent dates), the computer device uses each display date in each target display date as an index to traverse the interpolated data information of each chart and extract the numerical information of the corresponding timestamp. For example, line chart data is used to filter single-dimensional data, and candlestick chart data is used to filter quadruple parameters.

[0086] S403, sort the display dates of multiple targets in chronological order to obtain timeline information, including: sorting the display dates of multiple targets in chronological order to obtain timeline information.

[0087] In this embodiment, the computer device initiates an asynchronous request through the axios library to call the backend interface to obtain raw data information. From the raw data, the time field and indicator value field of all charts are extracted. The computer device processes the time field using a date processing tool to obtain multiple target display dates, and sorts the multiple target display dates in chronological order, i.e., in ascending order of time, to obtain time axis information. The data information contained in the indicator value field is stored in key-value pair form, i.e., it contains a corresponding mapping relationship of "date-indicator value". For each target display date, the computer device can directly read the corresponding value from the data information, i.e., obtain data axis information based on multiple target data.

[0088] In an exemplary embodiment, the above-described S303, "generating and displaying the target chart according to the chart type based on the data axis information and time axis information," is as follows: Figure 8 ,include:

[0089] S501, if the chart type is used to indicate the display of different types of charts in the same coordinate system, then a first vertical axis is generated based on the data axis information, and a first horizontal axis is generated based on the time axis information, and the chart is rendered in the display area formed by the first horizontal axis and the first vertical axis to generate the target chart.

[0090] In this embodiment, when displaying multiple charts, the computer device can select the type of chart to display. One type is displaying different types of charts in the same coordinate system, and the other type is displaying the same type of charts in the same coordinate system. If different types of charts are displayed in the same coordinate system, for example, if line charts and candlestick charts of the same type of data need to be displayed simultaneously in the same coordinate system, the computer device iterates through the index data of all charts to be rendered (such as gas, ultrasonic partial discharge, ultra-high frequency partial discharge, high frequency partial discharge, vibration, load voltage, core clamp current, and oil temperature), i.e., the data axis information, and extracts the numerical range (maximum and minimum values) and units of measurement to generate a first vertical axis. The computer device uses the target date as the first horizontal axis data and combines the first horizontal axis and the first vertical axis to render the chart in the formed display area to generate the target chart. For example, such as... Figure 9 As shown, a line chart and a candlestick chart are displayed on the same interface, with the date data on the first horizontal axis perfectly aligned.

[0091] S502, if the chart type is used to indicate the display of the same type of chart in the same coordinate system, the data axis information is processed, and a second vertical axis is generated based on the processed data axis information, and a second horizontal axis is generated based on the time axis information. The chart is then rendered in the display area formed by the second horizontal axis and the second vertical axis to generate the target chart.

[0092] In this embodiment, when displaying multiple charts, the computer device can select the type of chart to display. One type is to display different types of charts in the same coordinate system, and the other type is to display the same type of charts in the same coordinate system. If the same type of charts are displayed in the same coordinate system, for example, multiple sets of line charts are compared, the computer device will traverse all the indicator data (such as gas, ultrasonic partial discharge, ultra-high frequency partial discharge, high frequency partial discharge, vibration, load voltage, core clamp current, and oil temperature) of the charts to be rendered, i.e., the data axis information, and group the data axis information according to the indicator type. The grouped data axis information is used to generate a second vertical axis. The computer device uses the target date as the second horizontal axis data, and combines the second vertical axis and the second horizontal axis data to render the chart in the formed display area to generate the target chart.

[0093] In an exemplary embodiment, the "processing of data axis information and generation of a second ordinate axis based on the processed data axis information" in S502 above, such as Figure 10 ,include:

[0094] S601 divides the data axis information into different data types to obtain multiple sets of data axis information.

[0095] In this embodiment of the application, the computer device traverses all the indicator data (such as gas, ultrasonic partial discharge, ultra-high frequency partial discharge, high frequency partial discharge, vibration, load voltage, core clamp current and oil temperature) of all the charts to be rendered, i.e. data axis information, and groups the data axis information according to the indicator type to obtain multiple groups of data axis information.

[0096] S602, generating a second ordinate axis based on the processed data axis information, including: generating a second ordinate axis based on multiple sets of data axis information.

[0097] The second vertical axis includes multiple sub-vertical axes; each sub-vertical axis corresponds to a different type of numerical range.

[0098] In this embodiment, the computer device groups the data axis information according to the index type, and independently calculates the numerical range for each group of data. By traversing all data points within the group, the maximum and minimum values ​​are obtained, and the index type (such as temperature, current) and unit of measurement (such as temperature) are extracted. By analyzing the current (A), multiple vertical axes can be obtained, with each vertical axis corresponding to a different type of numerical range.

[0099] In one exemplary embodiment, Figure 8The specific implementation of S501 "generating the first horizontal axis based on time axis information" in the scheme described in the embodiment is as follows: Figure 11 As shown, it includes: in response to a trigger operation on any time point of the horizontal axis in the target chart, generating a marker line, and highlighting the marker line at the position corresponding to any time point on all charts contained in the target chart.

[0100] In this embodiment, when a user clicks on the horizontal axis of the target chart, the computer device begins parsing the corresponding time point information on the horizontal axis. A "click" event is bound to the ECharts instance of each chart component. The event callback function accepts the coordinate parameters of the Document Object Model (DOM) of the clicked location and converts the DOM pixel coordinates of the clicked location into the chart's data coordinates using the `convertFromPixel` method. The time data information corresponding to the horizontal axis (format: YYYY-MM-DD HH:mm) is extracted. The parsed target time point data information, i.e., the time data information corresponding to the horizontal axis, is stored in the Pinia global state as a reference signal for multi-chart time point linkage. After determining the target time point data information, the computer device synchronously generates and displays marker lines in all associated charts. The marker lines are blue vertical lines with a width of 2 pixels (px), running vertically through the chart display area, with both ends aligned with the axis scale. A date prompt box is overlaid on top of the marker lines, and the background color is set to semi-transparent (rgba). (0,0,0,0.7)), the text is white, and the display format is consistent with the horizontal axis time (format is YYYY-MM-DD HH:mm). In addition, each chart listens to the global state through an event listener function. When the time point changes, the marker line of the previous time point is removed during automatic update to avoid redundant elements left on the interface. When the marker line is triggered, the "synchronization control marker area" (20 pixels × 20 pixels) in the upper right corner of each chart will flash green dots 3 times (interval of 300ms) to indicate to the user that the current multi-chart linkage state is active.

[0101] In one exemplary embodiment, Figure 6 The specific implementation of S303 "generating and displaying the target chart according to the chart type" in the embodiment is as follows: Figure 12 As shown, it includes: in response to a zoom operation on a target chart, displaying the target chart according to the zoom size indicated by the zoom operation, and displaying the zoom ratio in the display area of ​​the target chart.

[0102] In this embodiment, when a user zooms in on the target chart displayed in the display area, the computer device sets mousewheel zoom and dataZoom on the target chart, calls the ECharts instance to trigger the zoom and scroll control configurator (dataZoom), and calls the core parameters, namely the start time point (startValue) and end time point (endValue) of the zoomed X-axis. The zoom ratio is (original time range / current time range) × 100%, and the zoom parameters of the target chart are synchronized to all related charts through the Pinia global state. Each chart component listens for state changes, calls the ECharts instance's settings configuration item (setOption) to dynamically update the zoom and scroll control configurator (dataZoom), and adds a "global zoom control bar" (40px high, light gray background color (#f5f5f5)) to the right of the X-axis, including the zoom ratio display (e.g., "100%)" and a reset button, uniformly triggering the zoom reset of multiple charts, such as... Figure 13 As shown, the "Global Zoom Control Bar" has a built-in "Zoom Ratio Slider" (200px wide). When the slider is dragged, the zoom ratio of all charts is updated synchronously, and the current zoom percentage is displayed on the right side of the slider.

[0103] In summary, based on all the above embodiments, a method for displaying a multi-chart synchronized interactive interface is also provided, such as... Figure 14 As shown, the method includes:

[0104] S701, in response to a trigger operation on a data import control in the display interface of the target application, retrieves raw data from the Hypertext Transfer Protocol client library;

[0105] S702, in response to a trigger operation on a target multi-chart display control in the display interface, extracts time information and data information from the raw data;

[0106] S703, If multiple target dates meet the display requirements of the chart type, proceed to steps S704-S706; if multiple target dates do not meet the display requirements of the chart type, proceed to steps S707-S709.

[0107] S704, determine the reference display date based on the coordinate axis information, filter out multiple matching target display dates from the time information based on the reference display date, and filter out the target data corresponding to each target display date from the data information;

[0108] S705 sorts the display dates of multiple targets in chronological order to obtain time axis information, and obtains data axis information based on the data of multiple targets;

[0109] S706 generates and displays the target chart according to the chart type based on the data axis information and time axis information;

[0110] S707, If the data corresponding to multiple target display dates does not meet the display requirements of the chart type, then the data corresponding to multiple target display dates are interpolated based on the reference display date to obtain multiple data information after interpolation;

[0111] S708, Filtering out target data corresponding to the display date of each target from the data information, including: filtering out target data corresponding to the display date of each target from multiple interpolated data information;

[0112] S709, sort the display dates of multiple targets in chronological order to obtain timeline information, including: sorting the display dates of multiple targets in chronological order to obtain timeline information;

[0113] S710, if the chart type is used to indicate the display of different types of charts in the same coordinate system, then the first vertical axis is generated according to the data axis information and the first horizontal axis is generated according to the time axis information, and the chart is rendered in the display area formed by the first horizontal axis and the first vertical axis to generate the target chart;

[0114] S711, if the chart type is used to indicate the display of the same type of chart under the same coordinate system, then the data axis information is processed, and a second vertical axis is generated based on the processed data axis information, and a second horizontal axis is generated based on the time axis information. The chart is then rendered in the display area formed by the second horizontal axis and the second vertical axis to generate the target chart.

[0115] S712, divides the data axis information into different types of data to obtain multiple sets of data axis information;

[0116] S713, generating a second vertical axis based on the processed data axis information, including: generating a second vertical axis based on multiple sets of data axis information; the second vertical axis includes multiple sub-vertical axes; the multiple sub-vertical axes correspond to different types of numerical ranges;

[0117] S714, in response to a trigger operation on any time point of the horizontal axis in the target chart, generates a marker line and highlights the marker line at the position corresponding to any time point on all charts contained in the target chart;

[0118] S715, in response to a zoom operation on a target chart, displays the target chart according to the zoom size indicated by the zoom operation, and displays the zoom ratio in the display area of ​​the target chart.

[0119] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages in other steps. It is understood that the steps in different embodiments can be freely combined as needed, and all non-contradictory solutions formed by such combinations are within the scope of protection of this application.

[0120] Based on the same inventive concept, embodiments of this application also provide a display device for a multi-chart synchronous interactive interface used to implement the above-mentioned display method for a multi-chart synchronous interactive interface, such as... Figure 15 As shown. The solution provided by this device is similar to the solution described in the above method. Therefore, the specific limitations of the embodiments of the display device for one or more multi-chart synchronous interactive interfaces provided below can be found in the limitations of the display method for multi-chart synchronous interactive interfaces above, and will not be repeated here.

[0121] In one exemplary embodiment, such as Figure 15 As shown, a display device for a multi-chart synchronous interactive interface is provided, comprising:

[0122] Data module 801 is used to retrieve raw data from the Hypertext Transfer Protocol client library in response to a trigger operation on the data import control in the display interface of the target application.

[0123] Display module 802 is used to respond to the trigger operation of the target multi-chart display control in the display interface, extract time information and data information from the raw data, generate a target chart according to the time information, data information and the coordinate axis information and chart type corresponding to the target multi-chart display control, and display the target chart in the display area of ​​the display interface; the target chart includes at least two charts.

[0124] In one embodiment, the display module 802 includes:

[0125] The filtering unit is used to determine the reference display date based on the coordinate axis information, filter out multiple matching target display dates from the time information based on the reference display date, and filter out the target data corresponding to each target display date from the data information.

[0126] The sorting unit is used to sort multiple target display dates in chronological order to obtain time axis information, and to obtain data axis information based on multiple target data.

[0127] Chart unit, used to generate and display target charts according to chart type based on data axis and time axis information.

[0128] In one embodiment, the above-mentioned filtering unit includes:

[0129] The first filtering sub-unit is used to interpolate the data corresponding to multiple target display dates based on the reference display date if the data corresponding to multiple target display dates does not meet the display requirements of the chart type, so as to obtain multiple data information after interpolation.

[0130] The second filtering subunit is used to filter out target data corresponding to each target display date from the data information, including: filtering out target data corresponding to each target display date from multiple interpolated data information;

[0131] The third filtering sub-unit is used to sort multiple target display dates in chronological order to obtain timeline information, including: sorting multiple target display dates in chronological order to obtain timeline information.

[0132] In one embodiment, the above-mentioned chart unit includes:

[0133] The first chart subunit is used to generate a first vertical axis based on the data axis information and a first horizontal axis based on the time axis information if the chart type is used to indicate the display of different types of charts in the same coordinate system, and to perform chart rendering in the display area formed by the first horizontal axis and the first vertical axis to generate the target chart.

[0134] The second chart sub-unit is used to process the data axis information if the chart type is used to indicate the display of the same type of chart in the same coordinate system, and to generate a second vertical axis based on the processed data axis information and a second horizontal axis based on the time axis information, and to render the chart in the display area formed by the second horizontal axis and the second vertical axis to generate the target chart.

[0135] In one embodiment, the second chart subunit is specifically used for: dividing the data axis information into different types of data to obtain multiple sets of data axis information; generating a second vertical axis based on the processed data axis information, including: generating a second vertical axis based on multiple sets of data axis information; the second vertical axis includes multiple sub-vertical axes; the multiple sub-vertical axes correspond to different types of numerical ranges.

[0136] In one embodiment, the first chart subunit is specifically configured to: generate a marker line in response to a trigger operation on any time point of the horizontal axis in the target chart, and highlight the marker line at the position corresponding to any time point on all charts included in the target chart.

[0137] In one embodiment, the first chart subunit is specifically configured to: generate a marker line in response to a trigger operation on any time point of the horizontal axis in the target chart, and highlight the marker line at the position corresponding to any time point on all charts included in the target chart.

[0138] In one embodiment, the above-mentioned chart unit is specifically used to: in response to a scaling operation on a target chart, display the target chart according to the scaling or shrinking size indicated by the scaling operation, and display the scaling ratio in the display area of ​​the target chart.

[0139] The various modules in the aforementioned multi-chart synchronous interactive interface display device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the operations corresponding to each module.

[0140] In one exemplary embodiment, a computer device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to perform the following steps:

[0141] In response to a triggering operation on a data import control displayed on the target application's interface, raw data is retrieved from the Hypertext Transfer Protocol client library;

[0142] In response to a trigger operation on the target multi-chart display control in the display interface, time information and data information are extracted from the raw data, and a target chart is generated based on the time information, data information, coordinate axis information and chart type corresponding to the target multi-chart display control, and the target chart is displayed in the display area of ​​the display interface.

[0143] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon, the computer program performing the following steps when executed by a processor:

[0144] In response to a triggering operation on a data import control displayed on the target application's interface, raw data is retrieved from the Hypertext Transfer Protocol client library;

[0145] In response to a trigger operation on the target multi-chart display control in the display interface, time information and data information are extracted from the raw data, and a target chart is generated based on the time information, data information, coordinate axis information and chart type corresponding to the target multi-chart display control, and the target chart is displayed in the display area of ​​the display interface.

[0146] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, performs the following steps:

[0147] In response to a triggering operation on a data import control displayed on the target application's interface, raw data is retrieved from the Hypertext Transfer Protocol client library;

[0148] In response to a trigger operation on the target multi-chart display control in the display interface, time information and data information are extracted from the raw data, and a target chart is generated based on the time information, data information, coordinate axis information and chart type corresponding to the target multi-chart display control, and the target chart is displayed in the display area of ​​the display interface.

[0149] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the methods described above. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, artificial intelligence (AI) processors, etc., and are not limited to these.

[0150] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0151] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A display method of a multi-chart synchronous interaction interface, characterized by, The method comprises: in response to a triggering operation on a data import control in a display interface on a target application, obtaining original data from a hypertext transfer protocol client library; in response to a triggering operation on a target multi-chart display control in the display interface, extracting time information and data information from the original data, and generating a target chart according to the time information, the data information, and coordinate axis information and a chart type corresponding to the target multi-chart display control, and displaying the target chart in a display region in the display interface; the target chart comprises at least two charts.

2. The method of claim 1, wherein, The generating of the target chart according to the time information, the data information, and the coordinate axis information and the chart type corresponding to the target multi-chart display control comprises: determining a reference display date according to the coordinate axis information, and screening a plurality of target display dates matched from the time information according to the reference display date, and screening target data corresponding to each target display date from the data information; sorting the plurality of target display dates according to time sequence to obtain time axis information, and obtaining data axis information according to a plurality of target data; generating and displaying the target chart according to the data axis information and the time axis information according to the chart type.

3. The method of claim 2, wherein, The method further comprises: if the data corresponding to the plurality of target display dates does not meet the display requirement of the chart type, interpolating the data corresponding to the plurality of target display dates according to the reference display date to obtain a plurality of interpolated data information; The screening of the target data corresponding to each target display date from the data information comprises: screening the target data corresponding to each target display date from the plurality of interpolated data information; The sorting of the plurality of target display dates according to time sequence to obtain time axis information comprises: sorting the plurality of target display dates according to time sequence to obtain time axis information.

4. The method of claim 2, wherein, The generating and displaying of the target chart according to the data axis information and the time axis information according to the chart type comprises: if the chart type is used to indicate that different types of charts are displayed in the same coordinate system, a first vertical coordinate axis is generated according to the data axis information, a first horizontal coordinate axis is generated according to the time axis information, and chart rendering is performed in a display region formed by the first horizontal coordinate axis and the first vertical coordinate axis to generate the target chart; if the chart type is used to indicate that the same type of chart is displayed in the same coordinate system, the data axis information is processed, a second vertical coordinate axis is generated according to the processed data axis information, a second horizontal coordinate axis is generated according to the time axis information, and chart rendering is performed in a display region formed by the second horizontal coordinate axis and the second vertical coordinate axis to generate the target chart.

5. The method of claim 4, wherein, The processing of the data axis information and the generating of the second vertical coordinate axis according to the processed data axis information comprise: dividing the data axis information into a plurality of groups of type data axis information; The second vertical coordinate axis is generated according to the processed data axis information, and the method comprises the steps of: According to the plurality of groups of type data axis information to generate a second vertical coordinate axis; the second vertical coordinate axis comprises a plurality of sub-vertical coordinate axes; the plurality of sub-vertical coordinate axes correspond to different types of numerical ranges.

6. The method according to any one of claims 1 to 5, characterized in that, The method further comprises: In response to a trigger operation on any time point of the horizontal coordinate axis in the target chart, a mark line is generated, and the mark line is highlighted on the positions corresponding to the any time point on all charts contained in the target chart.

7. The method according to any one of claims 1 to 5, characterized in that, The method further comprises: In response to a zoom operation on the target chart, the target chart is displayed according to the magnification or reduction size indicated by the zoom operation, and a zoom scale is displayed in the display area of the target chart.

8. A display apparatus of a multi-chart synchronous interaction interface, characterized by, The device comprises: A data module, in response to a trigger operation on a data import control in a display interface on a target application, obtains original data from a hypertext transfer protocol client library; A display module, in response to a trigger operation on a target multi-chart display control in the display interface, extracts time information and data information from the original data, and generates a target chart according to the time information, the data information, and coordinate axis information and chart types corresponding to the target multi-chart display control, and displays the target chart in a display area in the display interface; the target chart comprises at least two charts. 9.A computer device, comprising a memory and a processor, wherein the memory stores a computer program, and the computer device is configured to perform the method according to any one of claims 1-8 when the computer program is executed by the processor. The processor executes the computer program to realize the steps of the method of any one of claims 1 to 7.

10. A computer-readable storage medium having stored thereon a computer program, characterized in that, The computer program is executed by the processor to realize the steps of the method of any one of claims 1 to 7.

Images