Self-adaptive data curve dynamic display method

Abstract

The invention relates to the technical field of data visualization, and discloses an adaptive data curve dynamic display method, which comprises the following steps: S1, demand analysis and planning, S2, data preparation and processing, S3, technology type selection and architecture design, S4, responsive layout design, S5, chart component development, S6, performance optimization and test, and S7, deployment and maintenance. The chart can automatically adapt to different equipment and screen sizes, a good display effect and user experience are kept in various environments, data are updated in real time, latest information is obtained, and the timeliness and accuracy of the data are improved; detailed development documents and code annotations are written, so that other developers can quickly understand code logic and function implementation, and the maintenance cost is reduced; security measures are configured in the deployment process, the security in the data transmission process is ensured, the system is prevented from being illegally accessed and attacked, backup and recovery tests are conducted on the data regularly, and the system is prevented from being influenced by data loss or damage.

Description

Technical Field

[0001] The present invention relates to the technical field of data visualization, and in particular to a method for dynamically displaying an adaptive data curve. Background Art

[0002] The adaptive data curve dynamic display method is a technical means that combines front-end technology, visual design and data processing. It aims to automatically adjust the display method of the data curve according to the screen size and orientation of the user's device to provide the best visual effect and user experience.

[0003] After searching, the patent with application number CN202110354839.5 discloses a data dynamic monitoring method, device, computer equipment and storage medium. The method includes: displaying a data change curve of the target data generated during the working process; in response to the triggered dynamic monitoring operation, displaying a dynamic threshold area for monitoring the state of the target data at the display position corresponding to the data change curve; the upper and lower boundary values ​​of the dynamic threshold in the dynamic threshold area are based on the dynamic weight value and the historical target data in the target data, and the dynamic weight value is obtained based on the fitting value of the historical target data and the historical target data; when the data change curve exceeds the dynamic threshold area, and the duration of exceeding the dynamic threshold area reaches a preset time threshold, an abnormal prompt is issued for the target data generated during the working process. This method can realize dynamic monitoring of target data.

[0004] In the current data curve display method based on data visualization, the adaptability of chart data is poor and cannot adapt well to different devices and screens of different sizes, which reduces the user experience; the protection of data needs to be strengthened, and there is a lack of effective data security protection measures. There is a risk of illegal access, loss or damage to the data. Therefore, we need to propose an adaptive data curve dynamic display method. Summary of the invention

[0005] The purpose of the present invention is to provide an adaptive data curve dynamic display method, in which the chart can automatically adapt to different devices and screen sizes, maintain good display effects and user experience in various environments, and update data in real time to obtain the latest information, thereby improving the timeliness and accuracy of the data; the chart component is designed as an independent module to facilitate subsequent maintenance and upgrades, and detailed development documents and code comments are written to help other developers quickly understand the code logic and function implementation, thereby reducing maintenance costs; security measures are configured during the deployment process to ensure the security of the data transmission process and the system from illegal access and attacks, and data is regularly backed up and restored and tested to prevent data loss or damage from affecting the system, thereby solving the problems raised in the above-mentioned background technology.

[0006] To achieve the above object, the present invention provides the following technical solution: a method for dynamically displaying an adaptive data curve, comprising the following steps: S1. Demand analysis and planning: clarify the display objectives, audience, data types, display requirements, and plan the display effects and functions; S2. Data preparation and processing: including data collection, data cleaning, and data processing operations, providing high-quality data sources for data presentation and ensuring the accuracy and effectiveness of presentation results; S3. Technology selection and architecture design: including front-end framework selection, chart library selection, and architecture design, to ensure that the technology stack and architecture used in the project can meet the needs and improve development efficiency and system performance; S4. Responsive layout design: data curves can be displayed on different devices with good visual effects and user experience; S5. Chart component development: including creating chart components, data binding, and interactive function implementation, realizing dynamic display and interactive functions of data curves, and improving user experience and data readability; S6. Performance optimization and testing: including performance optimization and multi-device testing to ensure that the data curve display can maintain good performance and user experience in various environments; S7. Deployment and maintenance: Ensure that the application can run stably and continue to meet user needs.

[0007] Preferably, in step S1, demand analysis and planning includes the following process: S11. Clarify the main objectives of the dynamic display of data curves; S12. Data source and type analysis: determine the data source of the data curve, analyze the time series and correlation of the data, and ensure that the data is suitable for curve display; S13. Meet functional requirements: Realize real-time or scheduled update of data curves; S14. Meet performance and stability requirements: Achieve data curve loading speed that meets user usage habits and avoids long waiting times.

[0008] Preferably, in step S2, data preparation and processing includes the following process: S21, data acquisition: extracting the required data from the data source; S22, data cleaning: remove invalid data obtained from the data source and unify the data format; S23, data preprocessing: including data conversion, data sorting, and data segmentation; S24, Data Formatting: Allow data to be adaptively adjusted according to different screen sizes and resolutions, and dynamically adjust the coordinate axis range and resolution of the data curve to ensure clear display of data.

[0009] Preferably, in step S3, technology selection and architecture design include the following process: S31. Front-end technology selection: The front-end framework has a rich component library and efficient development mode, which helps to quickly build a responsive and interactive user interface. The chart library provides a variety of chart types and configuration options to achieve dynamic display and adaptive adjustment of data curves. S32. Backend technology selection: Select data processing technology and interface to obtain data, and use WebSocket technology to achieve real-time data push and update; S33, using a layered architecture to divide the system into a front-end display layer, a back-end service layer, and a data processing layer; S34. System modularization: including data acquisition module, data processing module, data display module and real-time data promotion module.

[0010] Preferably, in step S4, the responsive layout design includes the following process: S41. Determine breakpoints: Determine appropriate breakpoints based on the screen size and resolution range of the target device. Breakpoints are used to trigger layout and style changes. S42. Write media queries: Write different style rules for different breakpoints to control the layout and style of the data curve chart on different screen sizes; S43. Apply percentage layout or elastic layout: enable the data curve chart to adjust its size adaptively as the screen size changes; S44. Testing and optimization: Test the display effect of data curves on different devices and screen sizes, and optimize and adjust according to user needs.

[0011] Preferably, in step S5, the chart component development includes the following process: S51. Component structure design: Design the HTML structure of the chart component, which includes the chart container, title, legend, and axis elements; S52, Data binding and dynamic update: implement the binding of chart components to data sources, and write data update logic to automatically update the chart display when the data source changes; S53. Interactive function implementation: implement the zoom and drag functions of the chart, add hover prompts for data points, and show / hide functions for data series to enhance the interactivity of data display; S54. Responsive layout: Use media query, percentage layout, and elastic layout technology to achieve responsive layout of charts, so that charts can maintain good display effects on different devices and screen sizes.

[0012] Preferably, in step S6, performance optimization includes algorithm optimization, resource optimization, responsive layout optimization, and interaction optimization, and multi-device testing includes functional testing, performance testing, compatibility testing, stress testing, and user testing.

[0013] Preferably, in step S7, the deployment content includes environment preparation, code deployment, data interface docking, domain name and access settings, and security configuration; the maintenance content includes monitoring and logging, performance optimization, data update and maintenance, version iteration and upgrade, and user feedback and support.

[0014] Compared with the prior art, the present invention has the following beneficial effects: 1. The chart of the present invention can automatically adapt to different devices and screen sizes, maintain good display effects and user experience in various environments, and update data in real time to obtain the latest information, thereby improving the timeliness and accuracy of data; 2. The present invention designs the chart component as an independent module, which is convenient for subsequent maintenance and upgrade, and writes detailed development documents and code comments to help other developers quickly understand the code logic and function implementation, thereby reducing maintenance costs; 3. The present invention configures security measures during the deployment process to ensure the security of data transmission and the protection of the system from illegal access and attacks, and regularly backs up and restores data to prevent data loss or damage from affecting the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 It is a flowchart of the present invention; Figure 2 A flowchart of the demand analysis and planning process of the present invention; Figure 3 A flowchart of data preparation and processing of the present invention; Figure 4 A flowchart for the technical selection and architecture design of the present invention; Figure 5 A flowchart for the responsive layout design of the present invention; Figure 6 A flowchart of the process developed for the chart component of the present invention. DETAILED DESCRIPTION

[0016] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0017] See also Figure 1-6The present invention provides a technical solution: a method for dynamically displaying an adaptive data curve, comprising the following steps: S1. Demand analysis and planning: clarify the display objectives, audience, data types, display requirements, and plan the display effects and functions; ensure the project direction is correct and provide guidance for subsequent work.

[0018] In step S1, demand analysis and planning includes the following processes: S11. Clarify the main goals of dynamic display of data curves; the main goals include business trend analysis, real-time monitoring, and improvement of user interaction experience. And determine the audience group for display results so as to better meet their needs during the design and implementation process.

[0019] S12. Data source and type analysis: Determine the data source of the data curve, analyze the time series and correlation of the data, and ensure that the data is suitable for curve display; data sources include databases, API interfaces, real-time data streams, etc.

[0020] S13. Meet functional requirements: Realize real-time or scheduled updates of data curves to reflect the latest changes in data; It also includes interactive function requirements: whether it is necessary to implement interactive functions such as hovering the mouse to display detailed information, clicking to switch data dimensions, etc.

[0021] And responsive design: ensure that the data curve can maintain good display effect on different devices and screen sizes.

[0022] S14. Meet performance and stability requirements: Achieve data curve loading speed that meets user usage habits and avoids long waits. The system needs to run stably to avoid crashes or freezes during data updates or user interactions.

[0023] S2. Data preparation and processing: including data collection, data cleaning, and data processing operations, providing high-quality data sources for data presentation and ensuring the accuracy and effectiveness of presentation results; In step S2, data preparation and processing includes the following process: S21. Data acquisition: Extract the required data from the data source. The selection of the data source should be based on the accuracy, real-time and accessibility of the data. It is necessary to write SQL query statements, call API interfaces or use data crawling tools to crawl web page data.

[0024] S22, data cleaning: remove invalid data obtained from the data source and unify the data format; Among them, remove invalid data: delete or correct invalid data such as missing values, duplicate values, and outliers in the data. These invalid data may affect the accuracy and readability of the data curve.

[0025] Unify data formats: Ensure consistency in data formats, such as date and time formats, number formats, etc. Inconsistent data formats may lead to data parsing errors or confusing displays.

[0026] S23, data preprocessing: including data conversion, data sorting, and data segmentation; Data conversion: convert data according to display requirements, such as converting timestamps into readable date and time formats, converting values ​​into percentages or specific units, etc.; Data sorting: Sort data so that it can be displayed in a chronological or other logical order in a graph; Data segmentation: If the data volume is large, segmentation may be required to reduce data loading time and improve display efficiency.

[0027] S24, Data Formatting: Allow data to be adaptively adjusted according to different screen sizes and resolutions, and dynamically adjust the coordinate axis range and resolution of the data curve to ensure clear display of data.

[0028] S3. Technology selection and architecture design: including front-end framework selection, chart library selection, and architecture design, to ensure that the technology stack and architecture used in the project can meet the needs and improve development efficiency and system performance; In step S3, technology selection and architecture design include the following processes: S31. Front-end technology selection: The front-end framework has a rich component library and efficient development mode, which helps to quickly build a responsive and interactive user interface. The chart library provides a variety of chart types and configuration options to achieve dynamic display and adaptive adjustment of data curves. Chart libraries support dynamic data rendering and adaptive layout, such as ECharts, Chart.js, etc.

[0029] S32. Backend technology selection: Select data processing technology and interface to obtain data, and use WebSocket technology to achieve real-time push and update of data; WebSocket provides a protocol for full-duplex communication on a single TCP connection, which can transmit data in real time and reduce data delay.

[0030] According to the characteristics and requirements of the data source, select the appropriate data processing technology and interface implementation method. For example, if the data source is a database, you can use SQL query statements to extract and convert data; if the data source is an API interface, you can use HTTP requests to obtain data.

[0031] S33. Use a layered architecture to divide the system into a front-end display layer, a back-end service layer, and a data processing layer; each layer is responsible for different functions and tasks, which helps reduce system coupling and improve maintainability.

[0032] S34. System modularization: including data acquisition module, data processing module, data display module and real-time data promotion module.

[0033] Data acquisition module: responsible for acquiring data from the data source and performing preliminary data cleaning and preprocessing; Data processing module: further process and analyze the acquired data, such as data conversion, sorting, segmentation, etc.; Chart display module: Use the front-end framework and chart library to draw data into dynamic curve charts, and implement adaptive layout and interactive functions; Real-time data push module: responsible for pushing real-time data to the front end for display.

[0034] S4. Responsive layout design: data curves can be displayed on different devices with good visual effects and user experience; In step S4, the responsive layout design includes the following process: S41. Determine breakpoints: Determine appropriate breakpoints based on the screen size and resolution range of the target device. Breakpoints are used to trigger layout and style changes. S42. Write media queries: Write different style rules for different breakpoints to control the layout and style of the data curve chart on different screen sizes; S43. Apply percentage layout or elastic layout: enable the data curve chart to adjust its size adaptively as the screen size changes; S44. Testing and optimization: Test the display effect of data curves on different devices and screen sizes, and optimize and adjust according to user needs.

[0035] Media query is a technique introduced in CSS3 that allows us to apply different style rules based on different media types and conditions. In the dynamic display of adaptive data curves, we can use media queries to detect the screen size of the device and adjust the layout and style of the data curve chart accordingly; We can set different breakpoints to change the layout of the data curve chart when the screen width is less than a certain value, such as changing from horizontal layout to vertical layout, or adjusting the size and spacing of the chart.

[0036] Percentage layout means using percentages to define the width and height of an element, so that the size of the element changes with the size of the parent element or viewport. In the dynamic display of adaptive data curves, we can use percentage layout to ensure that the data curve chart can be adaptively resized as the screen size changes; Flexbox is also a powerful layout method that allows us to more flexibly control the arrangement and alignment of elements. In the layout of data curve charts, we can use flexbox to achieve more complex layout effects, such as dynamically adjusting the position and size of each element in the chart.

[0037] Viewport units (such as vw, vh, vmin, vmax) are units related to viewport size introduced in CSS3. vw represents the percentage of the viewport width, and vh represents the percentage of the viewport height. In the dynamic display of adaptive data curves, we can use viewport units to define the size of chart elements so that their size will automatically adjust as the viewport size changes.

[0038] Flow layout (also known as fluid layout) is a layout method that automatically adjusts the width of page elements according to the screen width. In the display of data curve charts, we can use flow layout to ensure that the chart elements can automatically adjust their width as the screen width changes, thereby maintaining the coordination and aesthetics of the overall layout.

[0039] S5. Chart component development: including creating chart components, data binding, and interactive function implementation, realizing dynamic display and interactive functions of data curves, and improving user experience and data readability; In step S5, the chart component development includes the following process: S51. Component structure design: Design the HTML structure of the chart component, which includes the chart container, title, legend, and axis elements; use CSS for style design to ensure that the chart can maintain good display effects on different screen sizes.

[0040] S52, Data binding and dynamic update: implement the binding of chart components to data sources, and write data update logic to automatically update the chart display when the data source changes; S53. Interactive function implementation: implement the zoom and drag functions of the chart, add hover prompts for data points, and show / hide functions for data series to enhance the interactivity of data display; S54. Responsive layout: Use media query, percentage layout, and elastic layout technology to achieve responsive layout of charts, so that charts can maintain good display effects on different devices and screen sizes.

[0041] S6. Performance optimization and testing: including performance optimization and multi-device testing to ensure that the data curve display can maintain good performance and user experience in various environments; In step S6, performance optimization includes algorithm optimization, resource optimization, responsive layout optimization, and interaction optimization, and multi-device testing includes functional testing, performance testing, compatibility testing, stress testing, and user testing.

[0042] Algorithm optimization: Use efficient rendering algorithms and data processing algorithms to reduce CPU and memory usage, and improve chart rendering speed and responsiveness; for data curve charts with large amounts of data, use methods such as paging loading and data aggregation to reduce the amount of data rendered at a time and improve rendering efficiency.

[0043] Resource optimization: compress and optimize the CSS, JavaScript and other files of chart components to reduce resource loading time; use caching technologies such as browser caching, HTTP caching, etc. to reduce repeated requests and the time to load the same resources.

[0044] Responsive layout optimization: Use percentage layout, elastic layout and media query techniques to achieve adaptive layout of charts, ensuring that charts can maintain good display effects on different devices and screen sizes; Optimize the chart's scaling and layout adjustment logic to reduce the number of redraws and reflows when the layout changes, and improve performance.

[0045] Interaction optimization: Optimize the interaction logic of the chart, reduce unnecessary DOM operations and event listener binding, and improve the interaction response speed; use throttling and debounce technologies to control the frequency of interactive operations and avoid performance problems caused by frequent operations.

[0046] Functional testing: Test the various functions of the chart components to ensure that they can work properly and meet the requirements, and test whether the chart's dynamic data loading, zooming, dragging, interactive prompts and other functions are accurate and smooth; Performance testing: Use performance testing tools (such as Chrome DevTools' Performance panel, Lighthouse, etc.) to perform performance testing on chart components, evaluate performance indicators such as loading speed and rendering efficiency, and test the performance of chart components in different devices and network environments to ensure good performance in various scenarios.

[0047] Compatibility testing: Perform compatibility testing on different browsers (such as Chrome, Firefox, Safari, Edge, etc.) and operating systems (such as Windows, macOS, iOS, Android, etc.) to ensure that chart components can display and work normally. Test mobile devices and low-performance devices to ensure that chart components can maintain good performance and user experience on these devices.

[0048] Stress testing: Simulate the scenario of a large number of users accessing the application at the same time or a large amount of data being loaded at the same time, perform stress testing on the chart components, and evaluate their performance and stability under high load conditions. Stress testing can help identify potential performance bottlenecks and stability issues, and take corresponding optimization measures.

[0049] User testing: Invite target users to conduct actual usage tests, collect user feedback and opinions, understand user satisfaction and needs for chart components, and further optimize and improve chart components based on the results of user testing to improve user experience and satisfaction.

[0050] S7. Deployment and maintenance: Ensure that the application can run stably and continue to meet user needs.

[0051] In step S7, the deployment content includes environment preparation, code deployment, data interface docking, domain name and access settings, and security configuration; the maintenance content includes monitoring and logging, performance optimization, data update and maintenance, version iteration and upgrade, and user feedback and support.

[0052] Environment preparation: Ensure that the hardware resources (such as CPU, memory, and storage space) of the server or cloud platform meet the operating requirements of the chart components. Code deployment: Deploy the developed chart component code (including HTML, CSS, JavaScript and other files) to the server.

[0053] Data interface connection: Configure the connection between the chart component and the backend data interface to ensure that the chart can obtain and display the latest data in real time.

[0054] Domain name and access settings: Configure domain name resolution and point the domain name to the server IP address.

[0055] Security configuration: Configure the HTTPS protocol to ensure the security of data transmission, and set firewall and security group rules to prevent illegal access and attacks.

[0056] Monitoring and logging: Use monitoring tools (such as Prometheus, Grafana, etc.) to monitor the running status of chart components in real time.

[0057] Performance optimization: Regularly evaluate and optimize the performance of chart components, including code optimization, resource optimization, algorithm optimization, etc.

[0058] Data update and maintenance: Ensure the stability and data quality of the back-end data interface, and promptly fix problems and vulnerabilities in the data interface.

[0059] Version iteration and upgrade: According to business needs and technological development, chart components are iterated and upgraded.

[0060] User feedback and support: Establish user feedback channels (such as customer service email, online chat, etc.) to collect and process user feedback in a timely manner.

[0061] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. The adaptive data curve dynamic display method is characterized by: The following steps are involved: S1. Demand analysis and planning: clarify the display objectives, audience, data types, display requirements, and plan the display effects and functions; S2. Data preparation and processing: including data collection, data cleaning, and data processing operations, providing high-quality data sources for data presentation and ensuring the accuracy and effectiveness of presentation results; S3. Technology selection and architecture design: including front-end framework selection, chart library selection, and architecture design, to ensure that the technology stack and architecture used in the project can meet the needs and improve development efficiency and system performance; S4. Responsive layout design: data curves can be displayed on different devices to maintain good visual effects and user experience; S5. Chart component development: including creating chart components, data binding, and interactive function implementation, realizing dynamic display and interactive functions of data curves, and improving user experience and data readability; S6. Performance optimization and testing: including performance optimization and multi-device testing to ensure that the data curve display can maintain good performance and user experience in various environments; S7. Deployment and maintenance: Ensure that the application can run stably and continue to meet user needs.

2. The adaptive data curve dynamic display method according to claim 1, characterized in that: In step S1, demand analysis and planning includes the following processes: S11. Clarify the main objectives of the dynamic display of data curves; S12. Data source and type analysis: determine the data source of the data curve, analyze the time series and correlation of the data, and ensure that the data is suitable for curve display; S13. Meet functional requirements: Realize real-time or scheduled update of data curves; S14. Meet performance and stability requirements: Achieve data curve loading speed that meets user usage habits and avoids long waiting times.

3. The adaptive data curve dynamic display method according to claim 1, characterized in that: In step S2, data preparation and processing includes the following process: S21, data acquisition: extracting the required data from the data source; S22, data cleaning: remove invalid data obtained from the data source and unify the data format; S23, data preprocessing: including data conversion, data sorting, and data segmentation; S24, Data Formatting: Allow data to be adaptively adjusted according to different screen sizes and resolutions, and dynamically adjust the coordinate axis range and resolution of the data curve to ensure clear display of data.

4. The adaptive data curve dynamic display method according to claim 1, characterized in that: In step S3, technology selection and architecture design include the following processes: S31. Front-end technology selection: The front-end framework has a rich component library and efficient development mode, which helps to quickly build a responsive and interactive user interface. The chart library provides a variety of chart types and configuration options to achieve dynamic display and adaptive adjustment of data curves. S32. Backend technology selection: Select data processing technology and interface to obtain data, and use WebSocket technology to achieve real-time data push and update; S33, using a layered architecture to divide the system into a front-end display layer, a back-end service layer, and a data processing layer; S34. System modularization: including data acquisition module, data processing module, data display module and real-time data promotion module.

5. The adaptive data curve dynamic display method according to claim 1, characterized in that: In step S4, the responsive layout design includes the following process: S41. Determine breakpoints: Determine appropriate breakpoints based on the screen size and resolution range of the target device. Breakpoints are used to trigger layout and style changes. S42. Write media queries: Write different style rules for different breakpoints to control the layout and style of the data curve chart under different screen sizes; S43. Apply percentage layout or elastic layout: enable the data curve chart to adjust its size adaptively as the screen size changes; S44. Testing and optimization: Test the display effect of data curves on different devices and screen sizes, and optimize and adjust according to user needs.

6. The adaptive data curve dynamic display method according to claim 1, characterized in that: In step S5, the chart component development includes the following process: S51. Component structure design: Design the HTML structure of the chart component, which includes the chart container, title, legend, and axis elements; S52, Data binding and dynamic update: implement the binding of chart components to data sources, and write data update logic to automatically update the chart display when the data source changes; S53. Interactive function implementation: implement the zoom and drag functions of the chart, add hover prompts for data points, and show / hide functions for data series to enhance the interactivity of data display; S54. Responsive layout: Use media query, percentage layout, and elastic layout technology to achieve responsive layout of charts, so that charts can maintain good display effects on different devices and screen sizes.

7. The adaptive data curve dynamic display method according to claim 1, characterized in that: In step S6, performance optimization includes algorithm optimization, resource optimization, responsive layout optimization, and interaction optimization, and multi-device testing includes functional testing, performance testing, compatibility testing, stress testing, and user testing.

8. The adaptive data curve dynamic display method according to claim 1, characterized in that: In step S7, the deployment content includes environment preparation, code deployment, data interface docking, domain name and access settings, and security configuration; the maintenance content includes monitoring and logging, performance optimization, data update and maintenance, version iteration and upgrade, and user feedback and support.

Images