Data visualization configuration method and cockpit system

Abstract

The invention provides a data visualization configuration method and a cockpit system, and relates to the technical field of visualization charts.The configuration method comprises the following steps that based on an underlying business data table of a target fund management system, business association fields are extracted, a corresponding business data set is generated, and the business data set is in a two-dimensional table form; in response to the configuration operation, generating chart configuration information based on the business data set, and storing the chart configuration information to a chart configuration table; wherein the configuration operation at least comprises the step of selecting a target field from a business data set to define a data mapping relation of the chart; based on the chart configuration information, acquiring data from the corresponding service data set, and dynamically rendering through a front-end renderer to generate a corresponding visual chart; the problems of dependence on developers, low configuration efficiency, poor user autonomy and high cost are solved.

Description

Technical Field

[0001] This invention relates to the field of visualization chart technology, and more specifically, to a data visualization configuration method and a cockpit system. Background Technology

[0002] In enterprise information management, the leadership dashboard is a common data visualization tool that can centrally display key business indicators in chart form to assist decision-making. Currently, implementing this type of visualization usually relies on developers performing customized coding during project delivery. For example, using commercial reporting tools such as FineReport, although they provide some visualization and editing capabilities, their core user group is still developers.

[0003] The drawback of existing technologies is that they cannot fundamentally solve the problem of chart customization. Whenever a customer has a new chart requirement or modifies an existing chart, developers must be involved to write code, test, and redeploy. The entire process is slow and has high development and maintenance costs. In addition, end users cannot directly participate in the definition and adjustment of charts, lacking autonomy and resulting in a poor user experience. Summary of the Invention

[0004] The purpose of this invention is to provide a data visualization configuration method and cockpit system to solve the problems of dependence on developers, low configuration efficiency, poor user autonomy, and high cost.

[0005] To address the aforementioned issues, this invention first provides a data visualization configuration method, comprising the following steps: based on the underlying business data table of the target fund management system, extracting business-related fields and generating corresponding business datasets, wherein the business datasets are in the form of two-dimensional tables; in response to a configuration operation, generating chart configuration information based on the business datasets and storing the chart configuration information in a chart configuration table; wherein the configuration operation at least includes selecting target fields from the business datasets to define the data mapping relationship of the charts; and based on the chart configuration information, obtaining data from the corresponding business datasets and dynamically rendering and generating corresponding visualization charts through a front-end renderer.

[0006] Furthermore, it also includes: defining and embedding multiple types of standard business datasets according to different business scenarios; wherein, the business scenarios include the field of fund management, and the standard business datasets include at least account information datasets and account balance datasets.

[0007] Furthermore, the configuration operation also includes: configuring at least one of the chart type and style attributes; the chart configuration information is recorded in the chart configuration table in a structured manner.

[0008] Furthermore, the front-end renderer, based on the ECharts legend library, reads the chart configuration information and performs chart rendering according to the chart type, data mapping relationship, and style attributes in the chart configuration information.

[0009] A cockpit system is also provided to implement the data visualization configuration method described in the above technical solutions. The system includes: a dataset definition module for constructing a corresponding two-dimensional table-style business dataset based on the underlying business data table of the target fund management; a chart configuration module for generating chart configuration information based on the business dataset in response to user configuration operations, and storing the chart configuration information in a chart configuration table; wherein the configuration operation includes at least selecting a target field from the business dataset to define the data mapping relationship of the chart; and a page rendering module for obtaining data from the corresponding business dataset based on the chart configuration information and dynamically rendering and generating the corresponding visualization chart.

[0010] Furthermore, the dataset definition module is used to: define and build multiple types of standard business datasets according to different business scenarios; wherein, the business scenarios include the field of fund management, and the standard business datasets include at least account information datasets and account balance datasets.

[0011] Furthermore, the configuration operation of the chart configuration module also includes: configuring at least one of the chart type and style attributes; the chart configuration information is recorded in the chart configuration table in a structured manner.

[0012] Furthermore, the page rendering module is implemented based on the ECharts legend library, and is used to read the chart configuration information and perform chart rendering according to the chart type, data mapping relationship and style attributes in the chart configuration information.

[0013] According to the data visualization configuration method and cockpit system provided by the present invention, the chart development work is transformed from coding to configuration through a dataset abstraction and configuration scheme, which significantly reduces the amount of secondary development work caused by changes in requirements and lowers development costs. This empowers business personnel or implementation personnel to directly configure charts, enabling them to quickly respond to management needs, greatly improving user experience and system flexibility, and enhancing user autonomy. Furthermore, the dataset-centric design allows for rapid application to different customers or business scenarios by adapting to different datasets, thus improving the product's versatility. Detailed Implementation

[0014] To make the above-mentioned objects, features, and advantages of the present invention more apparent and understandable, specific embodiments of the present invention are described in detail below. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

[0015] Example 1: Data Visualization Configuration Method

[0016] This embodiment describes in detail the entire process of how a user can create a visual chart using this method.

[0017] I. Data Preparation and Dataset Definition

[0018] System administrators or developers first need to prepare a data source for the system. The specific steps are as follows:

[0019] The system connects to the business database of the target funds management system. This database contains multiple underlying business data tables, such as a bank account table, which may contain fields such as account ID, account name, and bank, and an account transaction table, which may contain fields such as transaction ID, account ID, transaction time, transaction amount, and balance.

[0020] You can select the required business fields from the underlying table by checking and dragging to form a two-dimensional table structure for this dataset; the final determined fields include: account name, year and month (which can be converted from transaction time), and month-end balance.

[0021] Based on this definition, the system may generate and execute an SQL query or use other data processing tools to construct this business dataset, named "Account Monthly Balance Trend Analysis," in its backend logic. In this way, the dataset hides the complex multi-table joins and field transformation logic, ultimately presenting it to the end user in a simple two-dimensional table format.

[0022] II. User Configuration Chart

[0023] A business user logs into the system and wants to visualize the above dataset as a line chart. The steps are as follows:

[0024] Users can enter the cockpit configuration or chart library interface, create a new chart, select the corresponding data source for the chart, and select the previously defined account monthly balance trend analysis dataset.

[0025] The system automatically loads the field information of the dataset, and the user begins to configure the chart, including:

[0026] Choose the chart type. In the chart type selection area, you can click to select a line chart from a variety of icons.

[0027] Define the data mapping by dragging or selecting the month and year field to the X-axis or category axis position in the configuration area, dragging or selecting the month-end balance field to the Y-axis or value axis position, and dragging or selecting the account name field to the series or legend position, with the intention of having the system draw a line for each account separately;

[0028] In the Style tab, you can further set the chart title to "Monthly Balance Trend of Each Account," adjust the color and thickness of the lines, and the display position of the legend.

[0029] During the configuration process, the system provides a real-time preview. After confirming that everything is correct, save the settings.

[0030] During this operation, the system does not generate any code. Instead, it converts all of the user's configuration operations, including the selected dataset ID, chart type, mapping relationships of each field, and all style settings, into a structured JSON or other specific format record and stores this record as chart configuration information in the chart configuration table of the database.

[0031] III. Dynamic Rendering and Display

[0032] When a user visits a cockpit page containing the chart, the system performs the following actions to dynamically generate the chart:

[0033] When the page loads, the front-end renderer (e.g., a Vue component that wraps the ECharts library) is initialized;

[0034] The renderer sends a request to the backend, carrying the unique ID of this chart;

[0035] The backend retrieves the corresponding chart configuration information from the chart configuration table based on this ID;

[0036] Parse the configuration information to identify the data that needs to be obtained from the account monthly balance trend analysis dataset;

[0037] Execute the corresponding data query and return the result data to the front-end renderer;

[0038] After receiving the data, the front-end renderer combines the chart type (line chart), data mapping rules (X-axis for year and month, Y-axis for month-end balance, and series for account name) and style attributes recorded in the chart configuration information, calls the underlying ECharts legend library API, and draws and presents the final monthly balance trend line chart for each account in the browser.

[0039] Example 2: Cockpit System

[0040] This embodiment describes the various modules of the cockpit system that implement the method in Embodiment 1 and their cooperative relationships.

[0041] The cockpit system mainly consists of three core modules:

[0042] The dataset definition module runs in the system backend and provides a graphical interface for administrators to operate. It is used to connect to the business database and define and generate various business datasets through the aforementioned methods. This module connects the messy underlying data with the clear upper-layer applications.

[0043] The chart configuration module involves both the backend and the frontend. It provides end users with a graphical configuration interface as mentioned in Example 1, receives all user interactions, and transforms these interactions into structured chart configuration information, which is then persisted to the chart configuration table in the database. This module is the core of enabling users to configure their own charts.

[0044] The page rendering module, which mainly runs on the system front end, is a reusable component. It is used to obtain configuration information and real-time data, and drive visualization engines such as ECharts to complete the final drawing of charts. This module ensures that the configuration results can be presented to users accurately and beautifully.

[0045] In the description of this embodiment, it should be noted that those skilled in the art will understand that all or part of the processes in the above-described embodiments can be implemented by a computer program instructing a control device. The program can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes of the above-described method embodiments. The storage medium can be a memory, a disk, an optical disk, etc.

[0046] While the present invention has been disclosed above, it is not limited thereto. Any person skilled in the art can make various modifications and alterations without departing from the spirit and scope of the invention; therefore, the scope of protection of the present invention should be determined by the scope defined in the claims.

[0047] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0048] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0049] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A data visualization configuration method, characterized in that, Includes the following steps: Based on the underlying business data table of the target fund management system, business-related fields are extracted and corresponding business datasets are generated. The business datasets are in the form of two-dimensional tables. In response to a configuration operation, chart configuration information is generated based on the business dataset and stored in a chart configuration table; wherein, the configuration operation includes at least selecting a target field from the business dataset to define the data mapping relationship of the chart; Based on the chart configuration information, data is obtained from the corresponding business dataset and dynamically rendered to generate the corresponding visual chart through the front-end renderer.

2. The data visualization configuration method according to claim 1, characterized in that, Also includes: Based on different business scenarios, various types of standard business datasets are defined and built-in; among them, the business scenarios include the field of fund management, and the standard business datasets include at least account information datasets and account balance datasets.

3. The data visualization configuration method according to claim 1, characterized in that, The configuration operation also includes: configuring at least one of the chart type and style attributes; the chart configuration information is recorded in the chart configuration table in a structured manner.

4. The data visualization configuration method according to claim 1, characterized in that, The front-end renderer is based on the ECharts legend library, reads the chart configuration information, and performs chart rendering according to the chart type, data mapping relationship and style attributes in the chart configuration information.

5. A cockpit system for implementing the data visualization configuration method as described in any one of claims 1-4, characterized in that, The system includes: The dataset definition module is used to construct a corresponding two-dimensional table-style business dataset based on the underlying business data table of the target fund management. The chart configuration module is used to respond to the user's configuration operation, generate chart configuration information based on the business dataset, and store the chart configuration information in the chart configuration table; wherein, the configuration operation includes at least selecting a target field from the business dataset to define the data mapping relationship of the chart; The page rendering module is used to obtain data from the corresponding business dataset based on the chart configuration information and dynamically render and generate the corresponding visual chart.

6. The cockpit system according to claim 5, characterized in that, The dataset definition module is used for: Based on different business scenarios, various types of standard business datasets are defined and built-in; among them, the business scenarios include the field of fund management, and the standard business datasets include at least account information datasets and account balance datasets.

7. The cockpit system according to claim 5, characterized in that, The configuration operations of the chart configuration module also include: Configure at least one of the chart type and style attributes; the chart configuration information is recorded in the chart configuration table in a structured manner.

8. The cockpit system according to claim 5, characterized in that, The page rendering module is implemented based on the ECharts legend library. It is used to read the chart configuration information and perform chart rendering according to the chart type, data mapping relationship and style attributes in the chart configuration information.