Chart component generation method and system, electronic equipment and storage medium

Abstract

The invention discloses a chart component generation method and system, electronic equipment and a storage medium, and the method comprises the steps: creating a configuration file of a view layer, the configuration file comprising a style configuration item and a data docking field mapping configuration item; rendering the view layer to obtain a rendered file; obtaining a list file based on the configuration file and the rendering file; selecting the hierarchy and the dimension to which the chart component belongs, and configuring a graphical data query statement; querying based on the data query statement to obtain a business data type; and based on the business data type, selecting a corresponding chart from the list file to display. Complex server database query statements are abstracted into graphic blocks, corresponding function codes are packaged in the graphic blocks, and a user can quickly record basic data query statements only by simply dragging the graphic blocks. Due to the fact that the complex code logic is hidden in the graph block, even if the user does not have related knowledge of computer languages, the user can quickly master after being trained for several hours.

Description

Technical Field

[0001] The present invention relates to the technical field of chart components, and in particular to a chart component generation method, system, electronic device and storage medium. Background Art

[0002] In today's highly information-based society, data has become the cornerstone of a company's layout and decision-making. Therefore, effectively mining the value of data and fully displaying data elements are the responsibilities that a company's technical department must fulfill.

[0003] To realize the needs of data display and analysis, the traditional approach is that front-end technicians develop specific interfaces and cooperate with the specific data query interfaces provided by back-end technicians to complete the conversion from data to view; while modern business intelligence systems (Business Intelligence, hereinafter referred to as BI systems) generally adopt a model in which chart component libraries and data warehouses are independently developed and managed. Through the configuration behavior in the analysis and presentation layer, specific chart components are associated with specific data according to analysis requirements, so as to achieve the purpose of high cohesion, low coupling and reusability of chart components.

[0004] Traditional data analysis pages cannot achieve the reusability of chart components because each step is a targeted development for specific analysis needs, resulting in a linear growth in the relationship between development hours and the amount of required tasks. As the number of analysis pages produced increases, the resources required for later maintenance and modification also increase rapidly. Although the BI system effectively improves the reuse rate of chart components required for the same data type, it cannot achieve multi-level and multi-dimensional business scenario chart customization and templateization. For multi-level analysis, for example, the five-layer architecture of our company's digital human management system: company layer, space layer, execution unit layer, position layer and digital human layer, there are data analysis requirements at each layer; for multi-dimensional analysis, for example, the binding between the execution unit and the space is a many-to-many relationship. After each execution unit is referenced by the space, an independent mirror data will be generated, which is isolated from the original execution unit. When performing data analysis on the execution unit and its subsets (positions, digital humans), data of specific dimensions must be obtained for analysis and display. Therefore, when using the BI system, it is necessary to perform repeated configuration behaviors at the analysis and display layer according to data at different levels and dimensions. When the business volume is large, it is a great waste of time and energy for technical personnel. Summary of the invention

[0005] In view of the shortcomings existing in the above problems, the present invention provides a chart component generation method, system, electronic device and storage medium.

[0006] To achieve the above object, the present invention provides a method for generating a chart component, comprising:

[0007] Create a configuration file for the view layer, which includes style configuration items and field mapping configuration items for data docking;

[0008] Rendering the view layer to obtain a rendering file;

[0009] Obtaining a manifest file based on the configuration file and the rendering file;

[0010] Select the level and dimension to which the chart component belongs, and configure the graphical data query statement;

[0011] Query and obtain the business data type based on the data query statement;

[0012] Based on the business data type, a corresponding chart is selected from the list file for display.

[0013] Preferably, the style configuration items include a pie chart type, a bar chart type, a line chart type and a table type; and the field mapping configuration items for data docking are used to describe the contents of different types of icons.

[0014] Preferably, the view layer is rendered using a rendering engine of a browser.

[0015] Preferably, the manifest file includes a chart name, a chart type, a chart logo, a cover, a storage path of the configuration file, and a storage path of the rendering file.

[0016] Preferably, the chart component includes basic information, the view layer information, the configuration file information, hierarchical information of data query and query statement configuration results.

[0017] The present application also provides a chart component generation system, comprising:

[0018] A creation module is used to create a configuration file for the view layer, wherein the configuration file includes style configuration items and field mapping configuration items for data docking;

[0019] A rendering module, used to render the view layer and obtain a rendering file;

[0020] A manifest module, configured to obtain a manifest file based on the configuration file and the rendering file;

[0021] Configuration module, used to select the level and dimension to which the chart component belongs, and configure graphical data query statements;

[0022] A query module, used to query and obtain the business data type based on the data query statement;

[0023] A display module is used to select a corresponding chart from the list file for display based on the business data type.

[0024] The present invention also provides an electronic device, comprising at least one processing unit and at least one storage unit, wherein the storage unit stores a computer program, and when the program is executed by the processing unit, the processing unit executes the above method.

[0025] The present invention also provides a storage medium storing a computer program executable by an electronic device, and when the program runs on the electronic device, the electronic device executes the above method.

[0026] Compared with the prior art, the present invention has the following beneficial effects:

[0027] The present invention abstracts complex server-side database query statements into graphic blocks, which encapsulate the corresponding functional codes. Users only need to drag and drop to quickly record basic data query statements. Since the complex code logic is hidden inside the graphic blocks, even if the user has no knowledge of computer language, they can quickly get started after a few hours of training. When data analysis of various scenarios allows operators to record data query statements themselves, while reducing the communication costs of personnel on both ends, technical personnel can focus on optimization work such as accelerating data queries and improving service stability. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] Figure 1 It is a flow chart of the method for generating a chart component of the present invention. DETAILED DESCRIPTION

[0029] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are 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.

[0030] Reference Figure 1 The present invention provides a method for generating a chart component, comprising:

[0031] Create a configuration file for the view layer, which includes style configuration items and field mapping configuration items for data docking;

[0032] Specifically, the configuration file is a file written in JavaScript that describes the dynamic configuration of the view layer. Its content is mainly divided into configuration items for the view layer style and field mapping configuration items for data docking. The specific content varies according to the type of view layer. The style configuration items include pie chart type, bar chart type, line chart type and table type. For example, for the view layer of the pie chart type, the style configuration item content will include configurable content for the sector style, and the sector color, sector rounded corners, sector stroke line, stroke color and other contents can be customized; the field mapping configuration item content will include the field value represented by the pie chart sector ratio and the field value represented by the pie chart sector name. The configuration file is only used to describe the configurable content. The specific value of each configuration item needs to be selected or input by the user, and finally an adjusted configuration item value is output. This user operation process will be introduced in detail in the process of creating a custom chart component later. The values ​​of some custom configuration items are listed as follows:

[0033] itemStyle:{

[0034] borderWidth:2,

[0035] borderColor: "#ffffffff",

[0036] borderType: "sol id",

[0037] shadowBlur:5,

[0038] shadowColor: "#000000e5"

[0039] }

[0040] dataSetConfig:{

[0041] labelField: "taskName",

[0042] valueField: "total"

[0043] }

[0044] In this configuration item value, itemStyle represents the sector style configuration result, borderWidth is the thickness of the sector stroke, which is set to 2px width here; borderColor is the sector stroke color, which is set to white here; borderType is the stroke type, which is set to solid line here; shadowBlur is the sector shadow size, which is set to 5 to represent the shadow diffusion range is 5px, and shadowColor represents the shadow color. dataSetConfig is the data docking field mapping configuration result, which instructs the rendering file to obtain the sector name from the taskName field in the business data, and obtain the quantity value required to calculate the sector ratio from the total field.

[0045] Render the view layer and obtain the rendering file;

[0046] Specifically, a rendering file is a front-end code file written in a mixture of HTML, CSS and JavaScript and running on a browser. It uses the browser's rendering engine to render the view layer. For example, in the rendering file of a pie chart view layer, when the code logic in it starts running, it will receive the values ​​of the custom configuration items configured by the user as described above and the business data to be requested. Examples of the requested business data are as follows:

[0047]

[0048]

[0049] This business data represents the total number of times the statistician has performed tasks A, B, and C. Subsequently, the graphics drawing code in the rendering file will call the browser API in the web page to create a Canvas canvas, calculate the proportion of the center angle of each sector according to the total field in the business data to draw the sector area, and beautify the graphics style according to the result value of the above style configuration, thus completing a data display behavior. In addition, an event listener is registered in the rendering file to listen to the changes in the values ​​of the incoming configuration items and business data. When changes occur, the above behavior is re-executed to respond to the changes. After this step, a rendering file that can be run by the browser is obtained.

[0050] Get the manifest file based on the configuration file and rendering file;

[0051] Specifically, the configuration files and view layer rendering files are filled in the view layer manifest file: The view layer manifest file is an index file in JSON format that contains all the basic information of the view layer. When you create a custom chart component in the subsequent steps and select the view layer of the custom chart component, you need to read the available view layers from this manifest file. When filling in the manifest file, you need to fill in the following content:

[0052] title: Chart name, used as the title of the chart.

[0053] type: chart type, with the English name as the type value. This information must be globally unique and not repeated with other charts.

[0054] Chart Logo, when displaying brief information of the chart view layer in other places on the website, it is displayed together with the name to serve as a prompt.

[0055] cover: The view layer cover, which can more intuitively determine the type of chart when performing subsequent selection operations.

[0056] setFile: The storage path of the custom configuration file in the view layer, which can be used to index the configuration file code of the chart.

[0057] renderFile: The storage path of the view layer rendering file, which can be used to index the rendering file code of the chart.

[0058] The following is a partial list of contents that has been configured:

[0059]

[0060] Select the level and dimension to which the chart component belongs, and configure the graphical data query statement;

[0061] Specifically, select the level and dimension to which the custom chart component belongs: for example, if you want to create a custom chart component for use in the space layer, set the level to the space layer, and select an existing space to limit the scope of data query. During the debugging of the component, the actual data used to preview the component effect comes from the selected space. It should be noted that this data is only used for preview scenarios during component debugging. When the component is actually used, business data that meets the actual scenario will be dynamically queried based on the level and dimension information of the component. After this step, the custom chart component obtains the level and dimension information used to limit the scope of data queries when requesting data in preview and development modes.

[0062] In this embodiment, graphical data query statements are recorded according to the level and dimension information selected above. According to the needs of data query, a large number of database operation blocks such as query, sorting, filtering, grouping, paging, etc. are added. After the user completes dragging and splicing the function blocks, he will get the converted database operation code. This code is saved in the custom chart component. When the component is used and runs to the query data logic, this code will be sent to the server with the data query request, and the code logic will be run on the server. After obtaining the query results, it will be returned to the front-end business data. The query statement recording function provides a variety of quick operations, such as filtering, sorting, deconstruction, statistics, etc., and you can also record the logic content yourself to realize the desired data processing function. After this step, the custom chart component has acquired data query capabilities.

[0063] Get the business data type based on the data query statement;

[0064] Based on the business data type, select the corresponding chart from the list file for display.

[0065] Specifically, according to the business data type obtained after querying the data query statement recorded in the previous step, select a suitable view display layer from the view layer list file. For example, a pie chart is suitable for business data that counts the proportion of quantity; a line chart is suitable for business data that counts periodic continuous changes; a table is suitable for comparing various attributes of multiple similar products, etc. The selection process is that after the system reads the view layer list file, it parses the list content, extracts the title (name) and cover (cover) content in each display layer information, and arranges them in the selection box for the user to check. After selecting the display layer, the system continues to read the setFile custom configuration file in the display layer information, parses the file content, and displays each configuration in the user configuration area. First, do the data docking configuration. The system will read the business data and extract all field names. Taking the business data in the previous example as an example, the taskName and total field names will be obtained for drop-down selection. The user needs to select the sector name of the pie chart as the taskName field and the sector value of the pie chart as the total field. Then there is the style configuration. For example, for the pie chart sector stroke configuration, a number input box will be provided with a minimum value of 0 and a maximum value of 10. For example, for the sector color configuration, a color picker will be provided. Users can directly enter the color value in RGBA format or use the included color picker to pick a color. In the process of adjusting the value of the custom configuration, the custom chart component is in preview mode. Every time the user modifies a custom configuration, the chart display layer will dynamically update to respond to the configuration change, and finally obtain a value of the configured configuration item (the content has been exemplified in the previous article). After this step, the custom chart component has acquired the ability to display data.

[0066] In this embodiment, the output of the above three steps is summarized and saved to the server to create a multi-level and multi-dimensional custom chart component. When performing the saving operation, the information that needs to be provided includes the following categories:

[0067] Basic information of chart components, such as name, category, adding time, etc.

[0068] The view layer information selected by the chart component. For example, if a pie chart is selected, the English name of the pie chart's globally unique index type is saved, and this information is used to associate with the pie chart type view layer.

[0069] The chart component configures the parameters of a specific type of view layer, such as data docking field mapping information, chart style adjustment information, etc.

[0070] The chart component is used to limit the hierarchical information of the data query scope when previewing data in development mode.

[0071] The chart component is used to obtain the query statement recording results required for actual business data.

[0072] After this step, we get a custom chart component that can be used directly.

[0073] In this embodiment, the use of chart components: the application of chart components depends on the data analysis dashboard. In the recording mode, multiple custom chart components can be dragged into the dashboard in the custom chart component selection area. The data in the custom chart component selection area is obtained from the server request, and the custom chart components saved in the server in the above steps will be displayed in this selection area. For the custom chart components that have been dragged into the dashboard, the chart position and size are adjusted, and the dashboard can be saved to the server. The saved dashboard can be displayed on the data analysis page of the five levels of company, space, execution unit, position, and digital person. For example, on the spatial analysis page, select the dashboard saved on the server, the dashboard will enter the display mode, and the current spatial information will be transparently transmitted to all custom chart components in the dashboard. The custom chart component continues to transparently transmit the spatial information of the current environment to the data query module, thereby setting the data query range to the current spatial layer. The data analysis dashboards in different spaces will provide information in different spaces, thereby realizing the isolated display of data in different dimensions. The data display of the execution unit, digital person and other levels and dimensions is the same. The hierarchical and dimensional information transmission in the above process is realized with the help of the parent-child component parameter transmission mechanism of the React framework. The analysis page is the parent of the dashboard, the dashboard is the parent of the custom chart component, and the custom chart component is the parent of the data query module. The data transmitted is as follows:

[0074] {

[0075] usage: "space",

[0076] spaceId: "space_65aeex458adsmbefsq"

[0077] }

[0078] The usage field represents the hierarchical information, which is the spatial value in this case, and spaceId represents the dimensional information, which is the unique ID of a specific space. The data query module sends the hierarchical and dimensional information together with the data query code to the server. After the server runs the query code, it returns the obtained data value to the custom chart component. The custom chart component then passes the value of the custom configuration item adjusted by the user and the data value obtained by the query to the chart display layer for data display. This step has been described in detail above. At this point, the creation and use process of the custom chart component is completed.

[0079] The present invention solves the problem of repeated development of similar chart display layers in traditional data analysis needs. In actual business, different information types or different usage scenarios have different requirements for dashboard page layout and style. For example, some scenarios require the data analysis page to be simple as a whole and highlight the data items, while some scenarios require the data analysis page to be novel in style and personalized, which requires that each chart component be differentiated. In this method, the display layer of each chart component will take various visual needs into consideration during development, so that the modifiable styles can be extracted into configuration files for users to adjust by themselves. For example, the column arrangement direction of a bar chart can be selected as horizontal arrangement or vertical arrangement. If the traditional research and development method is adopted, it is necessary to develop two types of bar charts for users to choose from, while in this method, users only need to choose the arrangement direction.

[0080] The present invention solves the problem that data query has too high requirements for non-professional technicians, and data analysis no longer requires strong R&D investment from database technicians. This method abstracts complex server-side database query statements into graphic blocks, which encapsulate the corresponding functional codes. Users only need to drag and drop to quickly record basic data query statements. Since the complex code logic is hidden inside the graphic blocks, even if the user has no knowledge of computer language, they can quickly get started after a few hours of training. When data analysis of various scenarios allows operators to record data query statements themselves, while reducing the communication costs of personnel on both ends, technicians can focus on optimization work such as accelerating data queries and improving service stability.

[0081] The present invention solves the versatility problem of custom chart components under multi-level and multi-dimensional conditions. The function of dynamically rendering styles according to parameter input provided by the chart display layer in this method solves the problem of repeated development of the chart display layer. In order to achieve one-time recording and multiple uses of custom chart components under multi-level and multi-dimensional conditions, innovative improvements need to be made in the data query part. This method pioneered the introduction of a context mechanism in the data layer of custom chart components. The query statements of all data support the environmental information of the data analysis dashboard passed in from the outer layer. The environmental information includes the hierarchical information (for company-level data, space-level data, execution unit-level data, position-level data, and digital human-level data) and dimensional information displayed on the current dashboard (if it is space-level data, then which space it is specifically mounted in, and so on for other dimensions). When the query statement is combined with the hierarchical dimensional information, the data query scope is limited, and the effect of dynamically adjusting the displayed data according to the context is achieved. In traditional BI systems, after the view layer and the data layer are separated, if you want to process the company's business data, you need to prepare a large number of data warehouses of different levels and dimensions in the data layer management operation, and then perform one-to-many binding with the view layer (that is, the view layer remains unchanged, and the data layer changes frequently). This will also generate a lot of duplication of work and waste development resources. With this method, the query statement for the same business data only needs to be recorded once to meet the analysis and display of all levels and dimensions.

[0082] The present invention solves the problem of excessive pressure on the server by data query under high access volume. A large number of businesses generate huge data groups. When the data cardinality is very large, even the simplest query plus sorting function will consume a lot of server resources. First, although the dynamic limitation of the query range according to the context in this method has excluded a large amount of non-business target data, it is inevitable that there is a business demand for querying the full range of data. Second, when some complex businesses are analyzing data, there are multiple data groups associated in the query statement, and data filtering is required based on the association between each other. This query statement consumes more performance and time than the data query of the ordinary structure. Some data analysis dashboards are displayed on the homepage of the website. Every time a user opens the website and enters the page, a data request will be initiated. When the business promotion reaches a certain scale, the amount of data query requests that need to be processed per unit time will be very large. After enabling cache control and setting the cache validity period, all queries with the same MD5 calculated value within the time range, only the first query needs to actually run the query statement, and all subsequent queries are directly read from the memory, which is very fast. The MD5 calculation value here is calculated by the front-end web page based on the hierarchical information, dimensional information and query statements. Placing this operation on the front end of the web page can, on the one hand, further reduce the computing pressure on the server. On the other hand, the front end is closer to the user, and the information related to the MD5 calculation operation but not to the data query operation does not need to be transmitted to the server.

[0083] The present application also provides a chart component generation system, comprising:

[0084] Create a module to create a configuration file for the view layer. The configuration file includes style configuration items and field mapping configuration items for data docking.

[0085] The rendering module is used to render the view layer and obtain the rendering file;

[0086] Manifest module, used to obtain manifest files based on configuration files and rendering files;

[0087] Configuration module, used to select the level and dimension to which the chart component belongs, and configure graphical data query statements;

[0088] A query module, used to obtain business data types based on data query statements;

[0089] The display module is used to select corresponding charts from the list file for display based on business data types.

[0090] The present invention also provides an electronic device, comprising at least one processing unit and at least one storage unit, wherein the storage unit stores a computer program, and when the program is executed by the processing unit, the processing unit executes the above method.

[0091] The present invention also provides a storage medium storing a computer program executable by an electronic device. When the program runs on the electronic device, the electronic device executes the above method.

[0092] The above are only preferred embodiments of the present invention and are not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for generating a chart component, characterized in that: include: Create a configuration file for the view layer, which includes style configuration items and field mapping configuration items for data docking; Rendering the view layer to obtain a rendering file; Obtaining a manifest file based on the configuration file and the rendering file; Select the level and dimension to which the chart component belongs, and configure the graphical data query statement; Query and obtain the business data type based on the data query statement; Based on the business data type, a corresponding chart is selected from the list file for display.

2. The method for generating a chart component according to claim 1, characterized in that: The style configuration items include a pie chart type, a bar chart type, a line chart type, and a table type; the field mapping configuration items for data docking are used to describe the content of different types of icons.

3. The method for generating a chart component according to claim 2, characterized in that: The view layer is rendered using the rendering engine of the browser.

4. The method for generating a chart component according to claim 3, characterized in that: The list file includes the chart name, chart type, chart logo, cover, the configuration file storage path and the rendering file storage path.

5. The method for generating a chart component according to claim 4, characterized in that: The chart component includes basic information, the view layer information, the configuration file information, the hierarchical information of data query and the query statement configuration result.

6. A chart component generation system, characterized in that: include: A creation module is used to create a configuration file for the view layer, wherein the configuration file includes style configuration items and field mapping configuration items for data docking; A rendering module, used to render the view layer and obtain a rendering file; A manifest module, configured to obtain a manifest file based on the configuration file and the rendering file; Configuration module, used to select the level and dimension to which the chart component belongs, and configure graphical data query statements; A query module, used to query and obtain the business data type based on the data query statement; A display module is used to select a corresponding chart from the list file for display based on the business data type.

7. An electronic device, characterized in that: The method comprises at least one processing unit and at least one storage unit, wherein the storage unit stores a computer program, and when the program is executed by the processing unit, the processing unit executes the method according to any one of claims 1 to 5.

8. A storage medium, characterized in that: It stores a computer program executable by an electronic device. When the program runs on the electronic device, the electronic device executes the method according to any one of claims 1 to 5.

Images