Data chart visualization method and system

Abstract

The invention relates to the technical field of digital twinning, and particularly provides a data chart visualization method and system, and the method comprises chart configuration rendering and chart development configuration in an editor. According to chart configuration rendering, a sub html page is embedded in a UI frame through a LibCef library, a front-end chart library is introduced into the html page through JS, then related parameter configuration items are written in JS codes, and finally designed chart content is displayed in an embedded page. In chart development and configuration in the editor, firstly, a chart is created, then the type of the chart is configured, and after the configuration of the chart is completed, targeted debugging is carried out in combination with an overall UI panel so as to optimize the display effect of the chart. Compared with the prior art, the system is convenient to integrate and expand, the complexity of technology integration is reduced, and the usability, maintainability and expandability of the system are improved.

Description

Technical Field

[0001] The present invention relates to the field of digital twin technology, and specifically provides a method and system for visualizing data charts. Background Art

[0002] In the development of digital twin technology, data visualization, as one of the core functions, can transform complex real-time data into easy-to-understand graphics and charts, thereby achieving comprehensive monitoring and analysis of physical entities. The main technical routes can be divided into two types: data visualization based on Web pages and data visualization based on the internal UI framework of the digital twin engine.

[0003] Data visualization based on web pages is a relatively mature solution that takes advantage of the cross-platform characteristics of web technology and rich chart library resources. This method can display data in the form of graphics and charts on web pages, and users can access and interact through browsers. However, this method has certain difficulties when linked with scenes built by digital twin engines. At present, pixel streaming technology is a common way to achieve this linkage, but due to factors such as network bandwidth, it may cause the scene content to freeze or the picture to be blurred, affecting the user experience. During the development process, front-end R&D personnel are also required to participate and collaborate with digital twin engine developers.

[0004] On the other hand, data visualization based on the internal UI framework of the digital twin engine provides a unified technical implementation approach. This approach allows data charts to be rendered directly in the digital twin application, allowing data and scenes to be more naturally integrated. However, there is currently no mature general solution. There is no chart-related content in the UI framework of the digital twin engine. The development process requires familiarity with the development environment of the digital twin engine, and on this basis, the display style and logic of the chart are implemented, and it is necessary to connect to the data source, which increases the complexity of development. For developers, the learning curve of this technical route is steep and not friendly enough.

[0005] In general, Web-based data visualization is insufficient in its linkage with digital twin scenarios. Although data visualization based on digital twin engines is more outstanding in visual presentation, it still needs to be improved in terms of development efficiency and ease of use. Both technical routes have their own unique advantages and limitations, and the most appropriate solution needs to be selected based on specific application scenarios and needs.

[0006] In the actual application of digital twin technology, data visualization and analysis is a core requirement. Digital twin scenarios require applications to not only provide a smooth and stable user experience, but also to ensure high-quality and real-time data visualization. However, in actual application development, existing technologies make it difficult to ensure the consistency of data visualization and high-definition presentation of digital twin scenarios and performance effects. The development methods and technical routes of digital twin applications in visualization are not clear enough, making it difficult for developers to get started. In addition, the overall application deployment architecture lacks compatibility with a variety of hardware and display devices, affecting the universality of the application. Summary of the invention

[0007] The present invention aims at the above-mentioned deficiencies of the prior art and provides a method for visualizing data charts with strong practicability.

[0008] A further technical task of the present invention is to provide a data chart visualization system that is reasonably designed, safe and applicable.

[0009] The technical solution adopted by the present invention to solve the technical problem is:

[0010] A method for visualizing a data chart, including chart configuration rendering and chart development configuration in an editor;

[0011] The chart configuration rendering embeds a sub-html page in the UI framework through the LibCef library. The front-end chart library is introduced into the html page through JS, and then the relevant parameter configuration items are written in the JS code. Finally, the designed chart content is displayed in the embedded page;

[0012] In the chart development configuration in the editor, first create a chart, then configure the chart type, and after completing the chart configuration, perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

[0013] Furthermore, after writing the relevant parameter configuration items in the JS code, the relevant parameters are exposed. In the C++ code of the engine, a series of parameters exposed to the editor configuration are packaged in Json, and finally the Json is passed to the JS code through the ExecuteJS method.

[0014] Furthermore, after passing Json to the JS code, JS parses the packaged Json content, maps the parameters, sets the content in Options, and then uploads the chart configuration according to the chart library, and finally displays the designed chart content in the embedded page.

[0015] Furthermore, the chart types include line charts, bar charts, area charts and dashboards, and then enter the specific configuration stage of the chart, including data series configuration management, using dual y-axis charts, and automatic scaling of the y-axis according to actual data values.

[0016] Furthermore, after completing the configuration of the chart, you need to access the data and do preprocessing. According to the display of the data, you can perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

[0017] A data chart visualization system, including chart configuration rendering and chart development configuration in the editor;

[0018] The chart configuration rendering embeds a sub-html page in the UI framework through the LibCef library. The front-end chart library is introduced into the html page through JS, and then the relevant parameter configuration items are written in the JS code. Finally, the designed chart content is displayed in the embedded page;

[0019] In the chart development configuration in the editor, first create a chart, then configure the chart type, and after completing the chart configuration, perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

[0020] Furthermore, after writing the relevant parameter configuration items in the JS code, the relevant parameters are exposed. In the C++ code of the engine, a series of parameters exposed to the editor configuration are packaged in Json, and finally the Json is passed to the JS code through the ExecuteJS method.

[0021] Furthermore, after passing Json to the JS code, JS parses the packaged Json content, maps the parameters, sets the content in Options, and then uploads the chart configuration according to the chart library, and finally displays the designed chart content in the embedded page.

[0022] Furthermore, the chart types include line charts, bar charts, area charts and dashboards, and then enter the specific configuration stage of the chart, including data series configuration management, using dual y-axis charts, and automatic scaling of the y-axis according to actual data values.

[0023] Furthermore, after completing the configuration of the chart, you need to access the data and do preprocessing. According to the display of the data, you can perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

[0024] Compared with the prior art, the data chart visualization method and system of the present invention have the following outstanding beneficial effects:

[0025] (1) Performance optimization: Compared with the traditional pixel streaming method, chart embedded rendering is more efficient, which can reduce the rendering burden of camera capture in the scene, avoid the process of parsing the image captured by the camera and then encoding it into the WebRTC video stream, improve the scene frame rate, and make the project run more smoothly. Compared with the form of video streaming scene screen, the scene seen by the user is also clearer when the single application is deployed and run.

[0026] (2) Highly customizable: Allows developers to adjust the visual details of the chart according to the specific needs of the project, and freely choose the chart's color theme, font style, data display method, etc. to ensure that the chart meets the functional requirements, data access is convenient and flexible enough, and visually consistent with the overall application design style. In addition, customizability also extends to the interactive elements of the chart, such as tooltips, data labels, and animation effects, allowing users to design charts based on the characteristics of the data and the user's interaction habits, thereby improving the user experience.

[0027] (3) Easy to integrate: In order to reduce the technical threshold and upgrade costs of existing digital twin projects, the present invention is specially designed as a plug-in to ensure that it can be seamlessly integrated into various digital twin engines. This easy-to-integrate feature means that developers can enjoy the convenience brought by chart plug-ins without large-scale reconstruction of the existing code base. The plug-in design concept also takes into account compatibility with other components and services of the digital twin engine, ensuring stable operation in different operating systems and development frameworks. In addition, the installation and configuration process of the plug-in is simple and intuitive, and even non-professional engine developers can quickly get started.

[0028] (4) Interactivity: By building charts in the UI framework of the digital twin engine, developers can easily add various interactive operations to the charts, such as clicking, hovering, and dragging. These interactive operations can not only trigger dynamic changes in the chart itself, such as data filtering and view switching, but can also be combined with other UI elements or scene content to achieve more complex interactive logic. For example, users can click on a data point in the chart to obtain more detailed information, or trigger corresponding changes in the scene, thereby achieving an integrated experience of data exploration and scene interaction.

[0029] (5) Cross-platform compatibility: In view of the fact that digital twin applications may need to run on multiple devices and platforms, the present invention particularly emphasizes the importance of cross-platform compatibility. The plug-in can support packaging on Windows, Linux, Android, and IOS platforms, so that users can obtain relatively consistent visual effects and interactive experiences no matter what device they view the chart on. The chart plug-in was designed with the characteristics and limitations of different platforms in mind, and adopted a highly universal front-end technology and framework. In addition, the plug-in also provides a variety of preset configuration options to adapt to the display and performance requirements of different platforms, ensuring that the chart can maintain excellent performance in any environment.

[0030] (6) Improve development efficiency: The invention provides a set of intuitive editing and development tools and blueprint APIs that can help developers quickly build and deploy charts, thereby speeding up the development process. A large number of valid parameters are exposed in the configuration list of the blueprint, and a reasonable form can be adjusted through configuration. At the same time, the development process is simplified, and all development content can be completed without the participation of professional front-end developers.

[0031] (7) Maintenance and update: Using plug-ins can make chart maintenance and update easier, without being restricted by the specific project development content. Plug-ins provide an independent and plug-and-play chart development framework that can iterate and maintain versions independently of the project, which reduces the workload of project developers to a certain extent and makes it easier to collaborate. Plug-in developers can expand and modify the functions of plug-ins at any time according to the needs. Under the forward-compatible development method, the update of plug-ins will not affect the development content of the actual project. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0033] Attached Figure 1 It is a method of visualizing data charts and graphs, in which a chart configuration rendering flow chart is used;

[0034] Attached Figure 2 It is a data chart visualization method that develops and configures flowcharts in the chart editor. DETAILED DESCRIPTION

[0035] In order to enable those skilled in the art to better understand the solution of the present invention, the present invention is further described in detail below in conjunction with specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than 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.

[0036] A best embodiment is given below:

[0037] A data chart visualization method in this embodiment includes chart configuration rendering and chart development configuration in an editor.

[0038] like Figure 1 As shown, a sub-html page is embedded in the UI framework through the LibCef library. The front-end chart library is introduced in this page through JS. Then, the relevant parameter configuration items are written in the JS code to expose the relevant parameters. In the C++ code of the engine, a series of configurable parameters exposed to the editor are packaged in Json, and finally the Json is passed to the JS code through the ExecuteJS method. JS parses the packaged Json content, maps the parameters, sets the content in Options, and then executes the configuration upload of the chart according to the chart library, and finally displays the designed chart content in the embedded page.

[0039] like Figure 2 As shown in the figure, first create a chart, then configure the chart type. This step determines the basic type of the chart, such as line chart, bar chart, area chart, dashboard, etc. Next, the flowchart enters the specific configuration stage of the chart, including customizing the chart appearance, configuring interactive content, responsive layout adjustment, etc. These steps are designed to make the chart both beautiful and practical, and able to meet the user's interactive needs.

[0040] In the specific configuration process of the chart, data series configuration management is also involved, that is, how to manage and display the data series in the chart, including the possible use of dual y-axis charts, automatic scaling of the y-axis according to the actual data value, and other configurations. At the same time, various elements of the chart, such as legends, axis labels, colors, tooltips, etc., can also be configured accordingly to achieve accurate communication of chart information. In addition, the design also provides configuration options such as border configuration and axis unit configuration, which can further enhance the professionalism and readability of the chart.

[0041] After completing the configuration of the chart, you need to access the data and do preprocessing to ensure that the chart can correctly access the data to be displayed. Then, depending on the display of the data, you may need to perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

[0042] The present invention completes the process of sending requests to the RESTful API interface to obtain data based on the Http protocol. The process allows the digital twin application to efficiently obtain the required data from the REST data source without integrating data open systems with different protocols. The Http request of the entire process is scheduled by the engine task system and the thread pool to achieve task disassembly and concurrent execution of multiple threads. At the same time, it also monitors the failure and timeout callback of the request. When the request is deleted by the thread pool due to timeout failure, the corresponding processing logic will be executed to execute the process of resending the request in the shortest possible time. Overall, dynamic scheduling of large batch requests is achieved, the performance of network requests is optimized, and the problem that native digital twin applications are not good at network request scheduling is solved to a certain extent.

[0043] Data chart integration and interaction: Based on the characteristics of the data and user needs, this solution designs chart display logic to ensure intuitive expression of data. Select appropriate chart types, such as bar charts, line charts, pie charts, scatter charts, etc., and design the layout, color, and label of the charts according to the connected front-end library to improve the readability and comprehensibility of the data.

[0044] The configuration contents related to the chart provide an intuitive development interaction interface, allowing developers to interact with the chart at the editor level through operations such as clicking and dragging, and also provide callback interfaces for events such as clicking and dragging the chart, so that the user's interaction logic with the chart in the scene can be realized through simple configuration. In addition, it also includes data source configuration, design tool tips, data axis form settings, data chart layout, etc., so that developers can explore the data presentation according to their own needs when using the solution of the present invention.

[0045] In addition to static configuration, the solution also provides corresponding code and blueprint function libraries, which can dynamically adjust the configuration at runtime and combine it with the logic in the scene to achieve dynamic changes in the form of charts. Data can also be dynamically parsed and configured at runtime, and set to the chart according to the request results for real-time data display.

[0046] Customization and extensibility design: Provide customization options, allowing users to adjust the appearance and functions of the chart according to their needs. At the same time, the basic code framework of the design supports future expansion, and new chart types can be added based on the base class. Different chart types may receive slightly different data formats and configuration settings. Under this framework, by rewriting a small part of the key methods of data access and configuration encapsulation, the existing functions can be covered by the new chart.

[0047] In general, the chart plug-in of the present invention supports multiple chart types and can create bar charts, line charts, pie charts, scatter charts, etc. to meet different data display requirements. It can bind charts to data sources, realize dynamic data updates, and ensure that charts can automatically refresh to reflect the latest information. The plug-in provides a wealth of customization options, including color, font, chart size, legend style, etc., to meet different visual design requirements. At the same time, it supports adding interactivity, such as tooltips, click events, etc., to enhance the user experience. Charts can contain animation effects to make data changes more vivid and intuitive. Responsive layout ensures that charts can adapt to different screen sizes and resolutions, ensuring good display on different devices. Multiple data series can be created and managed, each of which can have its own color, label, and data point. Supports displaying legends to help users understand the data represented by different colors or styles in the chart. The labels, scales, and ranges of the axes can be customized to better control the display of the chart. Allows formatting of the display of data points, for example, the value of the data point can be set to be displayed as an integer, decimal, or a specific format. Provides event and callback mechanisms to perform specific operations when users interact with the chart. Tight integration with the Digital Twins Engine’s UI framework makes it simple to build diagrams in the editor.

[0048] Through the above steps and features, the present invention aims to provide an efficient, accurate and user-friendly data visualization analysis and presentation toolkit, which is particularly suitable for digital twin application scenarios and corresponding development processes that require high performance and high image quality.

[0049] Based on the above method, a data chart visualization system in this embodiment includes chart configuration rendering and chart development configuration in an editor;

[0050] The chart configuration rendering embeds a sub-html page in the UI framework through the LibCef library. The front-end chart library is introduced into the html page through JS, and then the relevant parameter configuration items are written in the JS code. Finally, the designed chart content is displayed in the embedded page;

[0051] In the chart development configuration in the editor, first create a chart, then configure the chart type. After completing the chart configuration, perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

[0052] After writing the relevant parameter configuration items in the JS code, the relevant parameters are exposed. In the C++ code of the engine, a series of parameters exposed to the editor configuration are packaged in Json, and finally the Json is passed to the JS code through the ExecuteJS method.

[0053] After passing Json to the JS code, JS parses the packaged Json content, maps the parameters, sets the content in Options, and then uploads the chart configuration according to the chart library, and finally displays the designed chart content in the embedded page.

[0054] Chart types include line charts, bar charts, area charts, and dashboards, and then enter the specific configuration stage of the chart, including data series configuration management, using dual y-axis charts, and automatic scaling of the y-axis based on actual data values.

[0055] After completing the configuration of the chart, you need to access the data and do preprocessing. According to the display of the data, you can perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

[0056] The above-mentioned specific implementations are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above-mentioned specific implementations. Any technical solutions that conform to the above-mentioned specific implementations of the present invention and any appropriate changes or substitutions made by ordinary technicians in the relevant technical field shall fall within the patent protection scope of the present invention.

[0057] 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. A method for visualizing a data chart, characterized in that: Including chart configuration rendering and chart development configuration in the editor; The chart configuration rendering embeds a sub-html page in the UI framework through the LibCef library. The front-end chart library is introduced into the html page through JS, and then the relevant parameter configuration items are written in the JS code. Finally, the designed chart content is displayed in the embedded page; In the chart development configuration in the editor, first create a chart, then configure the chart type, and after completing the chart configuration, perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

2. A method for visualizing a data chart according to claim 1, characterized in that: After writing the relevant parameter configuration items in the JS code, the relevant parameters are exposed. In the C++ code of the engine, a series of parameters exposed to the editor configuration are packaged in Json, and finally the Json is passed to the JS code through the ExecuteJS method.

3. A method for visualizing a data chart according to claim 2, characterized in that: After passing Json to the JS code, JS parses the packaged Json content, maps the parameters, sets the content in Options, and then uploads the chart configuration according to the chart library, and finally displays the designed chart content in the embedded page.

4. A method for visualizing a data chart according to claim 3, characterized in that: The chart types include line charts, bar charts, area charts and dashboards, and then enter the specific configuration stage of the chart, including data series configuration management, using dual y-axis charts, and automatic scaling of the y-axis according to actual data values.

5. A method for visualizing a data chart according to claim 4, characterized in that: After completing the configuration of the chart, you need to access the data and do preprocessing. According to the display of the data, you can perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

6. A system for visualizing data charts, characterized in that: Including chart configuration rendering and chart development configuration in the editor; The chart configuration rendering embeds a sub-html page in the UI framework through the LibCef library. The front-end chart library is introduced into the html page through JS, and then the relevant parameter configuration items are written in the JS code. Finally, the designed chart content is displayed in the embedded page; In the chart development configuration in the editor, first create a chart, then configure the chart type, and after completing the chart configuration, perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

7. A data chart visualization system according to claim 6, characterized in that: After writing the relevant parameter configuration items in the JS code, the relevant parameters are exposed. In the C++ code of the engine, a series of parameters exposed to the editor configuration are packaged in Json, and finally the Json is passed to the JS code through the ExecuteJS method.

8. A method for visualizing a data chart according to claim 7, characterized in that: After passing Json to the JS code, JS parses the packaged Json content, maps the parameters, sets the content in Options, and then uploads the chart configuration according to the chart library, and finally displays the designed chart content in the embedded page.

9. A method for visualizing a data chart according to claim 8, characterized in that: The chart types include line charts, bar charts, area charts and dashboards, and then enter the specific configuration stage of the chart, including data series configuration management, using dual y-axis charts, and automatic scaling of the y-axis according to actual data values.

10. A method for visualizing a data chart according to claim 9, characterized in that: After completing the configuration of the chart, you need to access the data and do preprocessing. According to the display of the data, you can perform targeted debugging in combination with the overall UI panel to optimize the display effect of the chart.

Images