Chart generation method and apparatus, electronic device, and storage medium

Abstract

The application discloses a chart generation method and device, electronic equipment and a storage medium. The application can perform instantiation processing on a preset chart component to obtain a target chart instance. In response to an opening operation on a code editor control, a code editor interface is displayed, the code editor interface includes a plurality of preset life cycle functions, and different preset life cycle functions correspond to different stages of generating a target chart. In response to an adding operation on a preset life cycle function, a life cycle function is obtained, the life cycle function includes user code added by a user, and in response to an execution operation on a code execution control, corresponding life cycle functions are executed in a stage order to generate a target chart based on a target chart instance. In the application, each stage of generating a target chart is abstracted into a plurality of life cycle functions, user code can be added in the life cycle functions, and thus a chart can be customized and generated. Therefore, the flexibility of chart generation can be improved.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and more specifically to chart generation methods, apparatus, electronic devices, and storage media. Background Technology

[0002] Business Intelligence (BI) systems can consist of multiple parts, including data acquisition, data mining, data analysis, and data visualization. Data acquisition and mining can obtain a large amount of useful data for enterprises; data analysis can transform data into knowledge to assist in business analysis and trend prediction; and data visualization can present this data in the form of reports. Charts, as the smallest unit of reports, play a decisive role in the richness of their functionality and styles, directly impacting the analytical and presentation effectiveness of the reports.

[0003] However, currently, charts are generated by providing users with fixed configuration options. But fixed configuration options are difficult to meet the needs of various application scenarios, and users' configuration options will gradually increase. Therefore, the flexibility of chart generation is currently low. Summary of the Invention

[0004] This invention provides a chart generation method, apparatus, electronic device, and storage medium, which can improve the flexibility of chart generation.

[0005] This invention provides a chart generation method, comprising:

[0006] Instantiate the preset chart component to obtain the target chart instance;

[0007] In response to the opening operation of the code editor control, the code editor interface is displayed. The code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart.

[0008] In response to the addition of a preset lifecycle function, a lifecycle function is obtained, which includes the user code added by the user.

[0009] In response to the execution operation of the code execution control, the corresponding lifecycle functions are executed in the order of the stages to generate the target chart based on the target chart instance.

[0010] The present invention also provides a chart generation device, comprising:

[0011] The instantiation unit is used to instantiate a preset chart component to obtain a target chart instance;

[0012] The display unit is used to respond to the opening operation of the code editor control and display the code editor interface. The code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart.

[0013] The addition unit is used to respond to the addition operation of the preset lifecycle function and obtain the lifecycle function, which includes the user code added by the user;

[0014] The execution unit is used to respond to the execution operation of the code execution control, and execute the corresponding lifecycle functions in the order of the stages to generate the target chart based on the target chart instance.

[0015] In some embodiments, the stages include before data query, after data query, and after data rendering. The lifecycle function corresponding to before data query is the pre-query lifecycle function, the lifecycle function corresponding to after data query is the post-query lifecycle function, and the lifecycle function corresponding to after data rendering is the post-rendering lifecycle function.

[0016] The execution unit is specifically used for:

[0017] Execute the periodic function before querying to obtain the query parameters;

[0018] Query the target data based on the query parameters;

[0019] Execute the query periodic function to update the target data and obtain the updated target data;

[0020] Based on the target chart instance and the updated target data, an initial chart is generated;

[0021] Execute the post-rendering periodic function to update the initial chart and obtain the target chart.

[0022] In some embodiments, the execution unit is specifically used for:

[0023] In response to configuration operations on the filter control, retrieve the data filtering parameters;

[0024] Based on the query parameters, retrieve the target data, including:

[0025] The query parameters and data filtering parameters are combined to obtain the merged query parameters;

[0026] Query the target data based on the merge query parameters.

[0027] In some embodiments, the target data is a table, and the execution unit is specifically used for:

[0028] Calculate the sum of values ​​in the target row and / or target column of the table;

[0029] Based on the target data, the numerical values ​​are calculated to obtain the row percentage and / or column percentage corresponding to the target row and / or target column. The updated target data includes the row percentage and / or column percentage.

[0030] In some embodiments, the execution unit is specifically used for:

[0031] Obtain the data format corresponding to the target chart instance;

[0032] Convert the updated target data into standard data that conforms to the data format;

[0033] Generate the initial chart corresponding to the target chart instance from the standard data.

[0034] In some embodiments, the execution unit is specifically used for:

[0035] Update the chart style of the initial chart to obtain the target chart.

[0036] In some embodiments, the instantiation unit is specifically used for:

[0037] In response to configuration operations on the component configuration control, retrieve the component configuration parameters;

[0038] Based on the component configuration parameters, the preset chart component is instantiated to obtain the target chart instance.

[0039] The present invention also provides an electronic device, including a memory and a processor, wherein the memory stores a plurality of instructions; the processor loads instructions from the memory to execute steps in any of the chart generation methods provided by the present invention.

[0040] The present invention also provides a computer-readable storage medium storing a plurality of instructions adapted for loading by a processor to execute steps in any of the chart generation methods provided by the present invention.

[0041] This invention can display a code editor interface in response to an open operation of a code editor control. The code editor interface includes multiple preset lifecycle functions, each corresponding to a different stage in generating the target chart. In response to an add operation of a preset lifecycle function, a lifecycle function is obtained, which includes user-added code. In response to an execution operation of a code execution control, the corresponding lifecycle functions are executed in the order of the stages to generate the target chart based on the preset chart components.

[0042] In this invention, a code editor can be provided to users, and the various stages of generating the target chart can be abstracted into multiple preset lifecycle functions, which are then displayed in the code editor. Users can then add their own code to these preset lifecycle functions to obtain the final lifecycle functions corresponding to all stages. By executing all lifecycle functions in the order of the stages, charts can be customized according to user needs, achieving rich chart functions and styles applicable to various scenarios. Therefore, this solution improves the flexibility of chart generation. Attached Figure Description

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

[0044] Figure 1 This is a schematic diagram of a scenario for the chart generation method provided by the present invention;

[0045] Figure 2 This is a flowchart illustrating the chart generation method provided by the present invention;

[0046] Figure 3 This is a schematic diagram of a chart generation device provided by the present invention;

[0047] Figure 4 This is a schematic diagram of the structure of the electronic device provided by the present invention. Detailed Implementation

[0048] The technical solutions of this invention will now be clearly and completely described with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this invention, and not all of them. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.

[0049] This invention provides a chart generation method, apparatus, electronic device, and storage medium.

[0050] Specifically, the chart generation device can be integrated into an electronic device, such as a terminal or server. The terminal can be a mobile phone, tablet, smart Bluetooth device, laptop, desktop computer, in-vehicle device, etc.; the server can be a single server or a server cluster consisting of multiple servers. In some embodiments, the server can also be implemented in the form of a terminal.

[0051] In some embodiments, the chart generation device can also be integrated into multiple electronic devices. For example, the chart generation device can be integrated into a terminal and a server, with the terminal and server jointly implementing the chart generation method of the present invention.

[0052] For example, refer to Figure 1 The electronic device can display a code editor interface in response to the opening operation of the code editor control. The code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart. In response to the addition operation of the preset lifecycle function, a lifecycle function is obtained, which includes the user code added by the user. In response to the execution operation of the code execution control, the corresponding lifecycle functions are executed in the order of stages to generate the target chart based on the preset chart components.

[0053] In this embodiment, a code editor can be provided to the user, and the various stages of generating the target chart can be abstracted into multiple preset lifecycle functions, which are then displayed in the code editor. The user can then add their own code to these preset lifecycle functions to obtain the final lifecycle functions corresponding to all stages. By executing all lifecycle functions in the order of the stages, charts can be customized according to user needs, enabling rich chart functions and styles applicable to various scenarios. Therefore, this solution improves the flexibility of chart generation.

[0054] The following sections provide detailed descriptions of each example. It should be noted that the sequence numbers of the following embodiments are not intended to limit the preferred order of the embodiments.

[0055] In this embodiment, a chart generation method is provided, such as... Figure 2 As shown, the specific process of this chart generation method can be as follows:

[0056] 110. Instantiate the preset chart component to obtain the target chart instance.

[0057] The preset chart components can be obtained by abstracting basic charts into code and encapsulating that code. The basic charts can include line charts (area charts), bar charts (column charts), scatter plots (bubble charts), pie charts (donut charts), candlestick charts, chord charts, and force-directed layout charts, etc. They can be predefined chart components, user-defined chart components, or components from the EChart library, etc.

[0058] A target chart instance can refer to an instance created based on a preset chart component. Instantiation can refer to the process of creating an instance based on a preset chart component. For example, the EChart library includes a line chart component, and an instance of the line chart component can be created on an electronic device.

[0059] In some embodiments, instantiating a preset chart component to obtain a target chart instance may include, but is not limited to, the following steps:

[0060] i. Retrieve component configuration parameters in response to configuration operations on component configuration controls.

[0061] In this embodiment, the control can refer to a UI control, which is a visual graphic "element" that can be placed on a form, such as a button or a file editing box. It can have the function of executing or triggering code execution and completing a response through an "event". In some embodiments, the component configuration control can be a drop-down list, a checkbox, etc.

[0062] Configuration operations can include touch, drag, swipe, long press, short press, double tap, click, and end drag. In some embodiments, configuration operations can be composed of a series of sub-operations, where sub-operations can be touch, drag, swipe, long press, short press, double tap, click, and end drag.

[0063] Component configuration parameters represent the parameters configured by the user when performing configuration operations based on the component configuration controls.

[0064] ii. Based on the component configuration parameters, instantiate the preset chart component to obtain the target chart instance. Using this target chart instance for subsequent customized target chart generation can reduce intrusion into the preset chart component.

[0065] 120. In response to the opening operation of the code editor control, the code editor interface is displayed. The code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart.

[0066] The target chart can be a bar chart, line chart, pie chart, or funnel chart, etc.

[0067] The code editor can be an online code editor (such as CodeMirror) or a code editor installed locally on the electronic device (such as VS Code). In some embodiments, the code editor may support the JavaScript programming language.

[0068] The code editor control can be a button, which can include the code editor's logo, such as an image, a simple drawing, or text.

[0069] The opening operation can include touch, drag, swipe, long press, short press, double-tap, click, and end dragging. In some embodiments, clicking (i.e., an event) the code editor control can trigger code execution, open the code editor, and complete the function of displaying the code editor interface.

[0070] Preset lifecycle functions can be defined based on different stages of generating the target chart. The abstraction of generating the target chart can be divided into multiple stages, each corresponding to a preset lifecycle function. In some embodiments, when generating the target chart on a webpage, the stages can be divided according to the rendering flow of the front-end framework (React, Vue, etc.). For example, the generation of the target chart can be abstracted into three stages: before data query, after data query, and after data rendering. The preset lifecycle functions can then include a preset pre-query lifecycle function (the preset lifecycle function corresponding to before data query), a preset post-query lifecycle function (the preset lifecycle function corresponding to after data query), and a preset post-rendering lifecycle function (the preset lifecycle function corresponding to after data rendering).

[0071] In some embodiments, the code editor interface may also include other preset code and comments; for example, other preset code may be user code execution functions, which can be used to execute lifecycle functions. Comments may be used to prompt the user about the stage corresponding to each preset lifecycle function, or to remind the user of precautions when adding user code.

[0072] 130. In response to the addition operation of the preset lifecycle function, a lifecycle function is obtained, which includes the user code added by the user.

[0073] The add operation can consist of a series of sub-operations. In some embodiments, the add operation includes a code input sub-operation and a code saving sub-operation, and each sub-operation can be multiple, meaning the user can input and save code multiple times. The code saving operation can be done by clicking a save button or using a keyboard shortcut. If the user-added code does not conform to the code editor's syntax rules or contains other errors, error messages can be displayed to inform the user of the errors so that the user can correct the code accordingly. It is important to note that the final lifecycle function is the code from the last save. In some embodiments, the user code can be code written in the JavaScript programming language, and this user code can be a callback function.

[0074] Lifecycle functions can be preset lifecycle functions with user code added, and therefore correspond to stages. In some embodiments, lifecycle functions may include a pre-query lifecycle function (beforeQuery), a post-query lifecycle function (afterQuery), and a post-render lifecycle function (afterRender); the pre-query lifecycle function is a preset pre-query lifecycle function with user code added, the post-query lifecycle function is a preset post-query lifecycle function with user code added, and the post-render lifecycle function is a preset post-render lifecycle function with user code added. In some embodiments, users can add user code to the corresponding preset lifecycle functions according to the actual application situation. For example, if the user only needs to modify the parameters when querying data, the corresponding user code can be added only to the preset pre-query lifecycle function; if the user needs to modify both the parameters when querying data and the chart style, the corresponding user code can be added to both the preset pre-query lifecycle function and the preset post-render lifecycle function.

[0075] 140. In response to the execution operation of the code execution control, execute the corresponding lifecycle functions in the order of the stages to generate the target chart based on the target chart instance.

[0076] The code execution control can be a button; the execution control can be activated by touch, drag, swipe, long press, short press, double-tap, click, or stop dragging. In some embodiments, clicking the code execution control triggers the execution of the code that generates the target chart, thereby completing the function of generating the target chart.

[0077] In some embodiments, if the lifecycle functions include a beforeQuery lifecycle function, a afterQuery lifecycle function, and a afterRender lifecycle function, the corresponding lifecycle functions are executed in the order of the stages to generate the target chart based on the target chart instance. This may include, but is not limited to, the following steps:

[0078] i. Execute the pre-query periodic function to obtain the query parameters.

[0079] The query parameters are used to retrieve target data, and are the return values ​​of the periodic function executed before the query is performed. In some embodiments, the query parameters can be concatenated with Structured Query Language (SQL) to form an SQL statement.

[0080] ii. Query the target data based on the query parameters.

[0081] In some embodiments, target data can be queried from a database or local storage device based on query data. For example, the query parameters are SQL statements that can access and process data in a database, such as MySQL, SQL Server, Access, Oracle, Sybase, DB2, etc.

[0082] In some embodiments, before querying target data based on query parameters, data filtering parameters can be obtained in response to configuration operations on filter controls. These filter controls can be dropdown lists, checkboxes, etc.; in some embodiments, data filtering parameters can also be concatenated with Structured Query Language (SCL) to form SQL statements. For example, the database may include data corresponding to data fields such as text, date, and number. Filter controls can provide methods for filtering these data fields. The user performs a filtering operation on the filter control, resulting in an SQL statement. This parameter is used to filter the required data from the database, such as filtering data within a preset date range / preset value range, or data containing fixed text. Then, the query parameters and data filtering parameters are merged to obtain merged query parameters; for example, when both the query parameters and data filtering parameters are SQL statements, the merged query parameters can also be SQL statements. Based on the merged query parameters, the target data is queried. Pre-query periodic functions allow users to customize data filtering logic, thereby enabling more granular data queries.

[0083] iii. Execute the periodic function after querying to update the target data and obtain the updated target data.

[0084] The input parameters for the periodic function after querying can be the target data.

[0085] In some embodiments, the target data is a table. Executing a periodic function after a query to update the target data and obtain updated target data may include: calculating the sum of values ​​in the target row and / or target column of the table; and calculating the percentage of the sum of values ​​based on the target data to obtain the row percentage and / or column percentage corresponding to the target row and / or target column. The updated target data includes the row percentage and / or column percentage.

[0086] In some embodiments, the sum of values ​​in multiple rows and / or multiple columns can be calculated, and based on the target data, the proportion of the sum of values ​​is calculated to obtain the proportion of multiple rows and / or multiple columns corresponding to the multiple rows and / or multiple columns. The updated target data includes the proportion of multiple rows and / or multiple columns.

[0087] iv. Generate an initial chart based on the target chart instance and the updated target data.

[0088] In some embodiments, generating an initial chart based on a target chart instance and the updated target data includes: obtaining the data format corresponding to the target chart instance; converting the updated target data into standard data that conforms to the data format; and generating the initial chart corresponding to the target chart instance from the standard data.

[0089] For example, assuming the initial chart is a line chart, the target data can be converted into two-dimensional data on the x / y axes.

[0090] v. Execute the post-rendering periodic function to update the initial chart and obtain the target chart.

[0091] The input parameters for the rendered periodic function can be the initial graph.

[0092] In some embodiments, the chart style of the initial chart is updated to obtain the target chart. For example, text and values ​​in a table chart can be bolded, or the color in a line chart can be changed, and so on. For instance, users can use the setChartOption function to update the configuration parameters of the EChart component.

[0093] In some embodiments, the unit of the updated target data value can be determined and added to the initial chart. By abstracting the generation of the target chart into different stages, each stage corresponds to a preset lifecycle function. Users can add their own user code in the corresponding lifecycle function, and execute the lifecycle functions of all stages in the order of the stages to modify the target component instance, thereby generating a customized chart and improving the flexibility of chart generation.

[0094] In some embodiments, after obtaining the target chart, the target chart can be rendered and displayed on the interface of the BI system.

[0095] In some embodiments, certain security measures can be taken when executing the corresponding lifecycle functions in the order of stages. For example, code security verification of user code can be performed, such as combining regular expression matching, the `eval` function, or JavaScript sandbox plugins when executing lifecycle functions to ensure security.

[0096] As shown above, this embodiment provides users with a code editor and abstracts the target chart generation into multiple stages, displaying the corresponding preset lifecycle functions for each stage. Users can then add their own code to these preset lifecycle functions to obtain the final lifecycle function. By executing the lifecycle functions according to the stage order, charts can be customized to meet user needs and are applicable to various scenarios. Therefore, this solution improves the flexibility of chart generation. Furthermore, lifecycle functions can be executed using regular expressions, the `eval` function, and JavaScript sandbox plugins, ensuring security while satisfying customization requirements.

[0097] The chart generation solution provided by this invention can be applied to various customized chart generation scenarios. For example, taking a BI system as an example, electronic devices are equipped with browsers, and users can access the BI system through the browser. An online code editor can be embedded in the BI system, or other online code editors can be called to implement the chart generation solution of this embodiment.

[0098] Based on the method described in the above embodiments, the chart generation scheme in BI system scenarios will be further described in detail below. A specific process of a chart generation method is as follows:

[0099] 210. Instantiate the preset chart component to obtain the target chart instance.

[0100] When users log in to the BI system in a browser to perform data analysis, they can configure component configuration parameters through the component configuration control. The BI system responds to the configuration operation of the component configuration control and obtains the component configuration parameters. Based on the component configuration parameters, the system instantiates the preset chart component to obtain the target chart instance.

[0101] Users can also configure data filtering parameters through filtering controls (filters); the BI system responds to the configuration operation of the filtering controls and obtains the data filtering parameters.

[0102] 220. In response to the opening operation of the online code editor control, the online code editor interface is displayed. The online code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart.

[0103] The stages of generating the target chart can be abstractly divided into three phases: before data query, after data query, and after data rendering.

[0104] 230. In response to the addition operation of the preset lifecycle function, a lifecycle function is obtained, which includes the user code added by the user.

[0105] Users can add user code to preset lifecycle functions to obtain these lifecycle functions. These lifecycle functions include: the beforeQuery lifecycle function, the afterQuery lifecycle function, and the afterRender lifecycle function.

[0106] 240. In response to the execution operation of the code execution control, execute the corresponding lifecycle functions in the order of the stages to generate the target chart based on the target chart instance.

[0107] Execute the periodic function before querying to obtain the query parameters.

[0108] The query parameters and data filtering parameters are combined to obtain the merged query parameters; based on the merged query parameters, the data query interface is called to retrieve the target data. The chart data filtering logic can be customized, such as more granular time-based filtering.

[0109] The target data is input into a query function, which is then executed to update the target data, resulting in the updated target data. The target data returned by the interface can be further processed to perform complex calculations, such as calculating the percentage of a single column's total in a table or chart.

[0110] An initial chart is generated based on the target chart instance and the updated target data.

[0111] The initial chart is input into the post-render lifecycle function, which is then executed to update the initial chart and obtain the target chart. The chart style can be adjusted, and the rendering unit can be customized based on the target data values. This solution has low intrusion into preset chart components; the target chart can be customized and generated as needed simply by executing the lifecycle function at the specified time. It can adapt to various scenarios and offers high flexibility.

[0112] As shown above, the BI system can provide users with an online code editor and abstractly divide the generation of target charts into multiple stages. The code editor displays the preset lifecycle functions corresponding to each stage. Users can then add their own code to these preset lifecycle functions to obtain the final lifecycle functions. By executing the lifecycle functions according to the order of the stages, charts can be customized to meet user needs and are applicable to various scenarios. Therefore, this solution can improve the flexibility of chart generation.

[0113] To better implement the above methods, the present invention also provides a chart generation device. For example, in this embodiment, the method of the present invention will be described in detail by taking the chart generation device as specifically integrated into an electronic device.

[0114] For example, such as Figure 3As shown, the chart generation device may include an instantiation unit 301, a display unit 302, an addition unit 303, and an execution unit 304, as follows:

[0115] (a) Instantiation Unit 301

[0116] Instantiation unit 301 is used to instantiate a preset chart component to obtain a target chart instance.

[0117] (ii) Display unit 302

[0118] Display unit 302 is used to display the code editor interface in response to the opening operation of the code editor control. The code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart.

[0119] (III) Adding Unit 303

[0120] Add unit 303 is used to obtain a lifecycle function in response to an operation to add a preset lifecycle function. The lifecycle function includes the user code added by the user.

[0121] (iv) Execution Unit 304

[0122] Execution unit 304 is used to respond to the execution operation of the code execution control, execute the corresponding lifecycle functions in the order of stages, and generate the target chart based on the target chart instance.

[0123] In some embodiments, the stages include before data query, after data query, and after data rendering. The lifecycle function corresponding to before data query is the pre-query lifecycle function, the lifecycle function corresponding to after data query is the post-query lifecycle function, and the lifecycle function corresponding to after data rendering is the post-rendering lifecycle function.

[0124] Execution unit 304 is specifically used for:

[0125] Execute the periodic function before querying to obtain the query parameters;

[0126] Query the target data based on the query parameters;

[0127] Execute the query periodic function to update the target data and obtain the updated target data;

[0128] Based on the target chart instance and the updated target data, an initial chart is generated;

[0129] Execute the post-rendering periodic function to update the initial chart and obtain the target chart.

[0130] In some embodiments, the execution unit 304 is specifically used for:

[0131] In response to configuration operations on the filter control, retrieve the data filtering parameters;

[0132] Based on the query parameters, retrieve the target data, including:

[0133] The query parameters and data filtering parameters are combined to obtain the merged query parameters;

[0134] Query the target data based on the merge query parameters.

[0135] In some embodiments, the target data is a table, and the execution unit 304 is specifically used for:

[0136] Calculate the sum of values ​​in the target row and / or target column of the table;

[0137] Based on the target data, the numerical values ​​are calculated to obtain the row percentage and / or column percentage corresponding to the target row and / or target column. The updated target data includes the row percentage and / or column percentage.

[0138] In some embodiments, the execution unit 304 is specifically used for:

[0139] Obtain the data format corresponding to the target chart instance;

[0140] Convert the updated target data into standard data that conforms to the data format;

[0141] Generate the initial chart corresponding to the target chart instance from the standard data.

[0142] In some embodiments, the execution unit 304 is specifically used for:

[0143] Update the chart style of the initial chart to obtain the target chart.

[0144] In some embodiments, the instantiation unit 301 is specifically used for:

[0145] In response to configuration operations on the component configuration control, retrieve the component configuration parameters;

[0146] Based on the component configuration parameters, the preset chart component is instantiated to obtain the target chart instance.

[0147] In practice, each of the above units can be implemented as an independent entity or can be arbitrarily combined to be implemented as the same or several entities. For the specific implementation of each of the above units, please refer to the previous method embodiments, which will not be repeated here.

[0148] As can be seen from the above, the chart generation device in this embodiment can provide users with a code editor and abstract each stage of generating the target chart into multiple preset lifecycle functions, displaying these preset lifecycle functions in the code editor. Users can then add user code to these preset lifecycle functions to obtain the final lifecycle functions corresponding to all stages. By executing all lifecycle functions in the order of the stages, charts can be customized according to user needs, making it applicable to various scenarios. Therefore, this solution can improve the flexibility of chart generation.

[0149] Accordingly, this application also provides an electronic device. For example, in this embodiment, an electronic device will be used as a terminal for detailed explanation. Figure 4 As shown, Figure 4 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device 400 includes a processor 401 with one or more processing cores, a memory 402 with one or more computer-readable storage media, and a computer program stored in the memory 402 and executable on the processor. The processor 401 and the memory 402 are electrically connected. Those skilled in the art will understand that the electronic device structure shown in the figure does not constitute a limitation on the electronic device, and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0150] The processor 401 is the control center of the electronic device 400. It connects various parts of the electronic device 400 through various interfaces and lines. By running or loading software programs and / or modules stored in the memory 402, and calling data stored in the memory 402, it performs various functions of the electronic device 400 and processes data, thereby monitoring the electronic device 400 as a whole.

[0151] In this embodiment, the processor 401 in the electronic device 400 loads the instructions corresponding to the processes of one or more applications into the memory 402 according to the following steps, and the processor 401 runs the applications stored in the memory 402 to realize various functions:

[0152] Instantiate the preset chart component to obtain the target chart instance;

[0153] In response to the opening operation of the code editor control, the code editor interface is displayed. The code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart.

[0154] In response to the addition of a preset lifecycle function, a lifecycle function is obtained, which includes the user code added by the user.

[0155] In response to the execution operation of the code execution control, the corresponding lifecycle functions are executed in the order of the stages to generate the target chart based on the target chart instance.

[0156] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0157] Optional, such as Figure 4 As shown, the electronic device 400 also includes: a touch display screen 403, a radio frequency circuit 404, an audio circuit 405, an input unit 406, and a power supply 407. The processor 401 is electrically connected to the touch display screen 403, the radio frequency circuit 404, the audio circuit 405, the input unit 406, and the power supply 407. Those skilled in the art will understand that... Figure 4 The electronic device structure shown does not constitute a limitation on the electronic device and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0158] The touch display screen 403 can be used to display a graphical user interface (GUI) and receive operation commands generated by the user interacting with the GUI. The touch display screen 403 may include a display panel and a touch panel. The display panel can be used to display information input by the user or information provided to the user, as well as various graphical user interfaces of the electronic device. These graphical user interfaces can be composed of graphics, text, icons, video, and any combination thereof. Optionally, the display panel can be configured using a liquid crystal display (LCD), organic light-emitting diode (OLED), or other similar technologies. The touch panel can be used to collect touch operations performed by the user on or near it (such as operations performed by the user using a finger, stylus, or any suitable object or accessory on or near the touch panel), generate corresponding operation commands, and execute the corresponding program according to the operation commands. Optionally, the touch panel may include two parts: a touch detection device and a touch controller. The touch detection device detects the user's touch location and the signal generated by the touch operation, transmitting the signal to the touch controller. The touch controller receives touch information from the touch detection device, converts it into touch point coordinates, and sends it to the processor 401. It can also receive and execute commands from the processor 401. The touch panel can cover the display panel. When the touch panel detects a touch operation on or near it, it transmits the information to the processor 401 to determine the type of touch event. Subsequently, the processor 401 provides corresponding visual output on the display panel based on the type of touch event. In this embodiment, the touch panel and the display panel can be integrated into the touch display screen 403 to achieve input and output functions. However, in some embodiments, the touch panel and the touch display screen 403 can be implemented as two independent components to achieve input and output functions. That is, the touch display screen 403 can also be used as part of the input unit 406 to achieve input functions.

[0159] In this embodiment, the processor 401 executes the BI system to generate a graphical user interface (GUI) on the touch display screen 403. The GUI can display the code editor interface and various controls (such as component configuration controls, filter controls, code editor controls, code execution controls, etc.), and finally, the target chart can be displayed on the GUI. The touch display screen 403 is used to present the GUI and receive operation commands generated by the user interacting with it.

[0160] The radio frequency circuit 404 can be used to transmit and receive radio frequency signals to establish wireless communication with network devices or other electronic devices, and to transmit and receive signals with network devices or other electronic devices.

[0161] Audio circuit 405 can be used to provide an audio interface between a user and an electronic device via a speaker and a microphone. Audio circuit 405 can convert received audio data into electrical signals and transmit them to the speaker, where the speaker converts them into sound signals for output. Conversely, the microphone converts collected sound signals into electrical signals, which are then received by audio circuit 405, converted back into audio data, and then processed by processor 401 before being transmitted via radio frequency circuit 404 to, for example, another electronic device, or output to memory 402 for further processing. Audio circuit 405 may also include an earphone jack to provide communication between peripheral headphones and electronic devices.

[0162] The input unit 406 can be used to receive input numbers, characters, or user characteristic information (such as fingerprints, iris, facial information, etc.), and to generate keyboard, mouse, joystick, optical, or trackball signal inputs related to user settings and function control.

[0163] Power supply 407 is used to supply power to various components of electronic device 400. Optionally, power supply 407 can be logically connected to processor 401 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system. Power supply 407 may also include one or more DC or AC power supplies, recharging systems, power fault detection circuits, power converters or inverters, power status indicators, and other arbitrary components.

[0164] although Figure 4 As not shown in the diagram, the electronic device 400 may also include a camera, sensor, wireless fidelity module, Bluetooth module, etc., which will not be described in detail here.

[0165] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions in other embodiments.

[0166] As can be seen from the above, the electronic device provided in this embodiment can provide users with a code editor and abstract the various stages of generating the target chart into multiple preset lifecycle functions, displaying these preset lifecycle functions in the code editor. Users can then add user code to these preset lifecycle functions to obtain the final lifecycle functions corresponding to all stages. By executing all lifecycle functions in the order of the stages, charts can be customized according to user needs, making it applicable to various scenarios. Therefore, this solution can improve the flexibility of chart generation.

[0167] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be performed by instructions, or by instructions controlling related hardware. These instructions can be stored in a computer-readable storage medium and loaded and executed by a processor.

[0168] Therefore, embodiments of this application provide a computer-readable storage medium storing a plurality of computer programs that can be loaded by a processor to execute the steps in any of the chart generation methods provided in embodiments of this application. For example, the computer program can execute the following steps:

[0169] Instantiate the preset chart component to obtain the target chart instance;

[0170] In response to the opening operation of the code editor control, the code editor interface is displayed. The code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart.

[0171] In response to the addition of a preset lifecycle function, a lifecycle function is obtained, which includes the user code added by the user.

[0172] In response to the execution operation of the code execution control, the corresponding lifecycle functions are executed in the order of the stages to generate the target chart based on the target chart instance.

[0173] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0174] The storage medium may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0175] Since the computer program stored in the storage medium can execute the steps in any of the chart generation methods provided in the embodiments of this application, the beneficial effects that any of the chart generation methods provided in the embodiments of this application can achieve can be realized. For details, please refer to the previous embodiments, which will not be repeated here.

[0176] The above provides a detailed description of a chart generation method, apparatus, storage medium, and electronic device provided in the embodiments of this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A chart generation method, characterized in that, include: Instantiate the preset chart component to obtain the target chart instance; In response to the opening operation of the code editor control, the code editor interface is displayed. The code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart. In response to the addition operation of the preset lifecycle function, a lifecycle function is obtained, wherein the lifecycle function includes the user code added by the user; In response to the execution operation of the code execution control, the corresponding lifecycle functions are executed in the order of the stages, including: executing the pre-query lifecycle function to obtain query parameters; Execute the query post-cycle function to update the target data retrieved based on the query parameters, obtaining the updated target data; execute the rendering post-cycle function. The initial chart generated based on the target chart instance and the updated target data is updated to obtain the target chart.

2. The chart generation method as described in claim 1, characterized in that, The stages include before data query, after data query, and after data rendering. The lifecycle function corresponding to before data query is the pre-query lifecycle function, the lifecycle function corresponding to after data query is the post-query lifecycle function, and the lifecycle function corresponding to after data rendering is the post-rendering lifecycle function.

3. The chart generation method as described in claim 2, characterized in that, Before querying the target data based on the query parameters, the process also includes: In response to configuration operations on the filter control, retrieve the data filtering parameters; The process of querying target data based on the query parameters includes: The query parameters are combined with the data filtering parameters to obtain the merged query parameters; Based on the merge query parameters, query the target data.

4. The chart generation method as described in claim 2, characterized in that, The target data is a table. The execution of the query and subsequent periodic function updates the target data to obtain the updated target data, including: Calculate the sum of the values ​​in the target row and / or target column of the table; Based on the target data, the percentages of the values ​​are calculated to obtain the row percentage and / or column percentage corresponding to the target row and / or the target column. The updated target data includes the row percentage and / or the column percentage.

5. The chart generation method as described in claim 2, characterized in that, The process of generating an initial chart based on the target chart instance and the updated target data includes: Obtain the data format corresponding to the target chart instance; The updated target data is converted into standard data that conforms to the data format. The standard data is used to generate the initial chart corresponding to the target chart instance.

6. The chart generation method as described in claim 2, characterized in that, The step of executing the post-rendering periodic function to update the initial chart and obtain the target chart includes: The chart style of the initial chart is updated to obtain the target chart.

7. The chart generation method as described in claim 1, characterized in that, The instantiation of the preset chart component to obtain the target chart instance includes: In response to configuration operations on the component configuration control, retrieve the component configuration parameters; Based on the component configuration parameters, the preset chart component is instantiated to obtain the target chart instance.

8. A chart generation device, characterized in that, include: The instantiation unit is used to instantiate a preset chart component to obtain a target chart instance; The display unit is used to display the code editor interface in response to the opening operation of the code editor control. The code editor interface includes multiple preset lifecycle functions, and different preset lifecycle functions correspond to different stages of generating the target chart. An adding unit is used to obtain a lifecycle function in response to an adding operation on the preset lifecycle function, wherein the lifecycle function includes user code added by the user; An execution unit is configured to respond to the execution operation of the code execution control and execute the corresponding lifecycle functions in the order of the stages, including: executing a pre-query lifecycle function to obtain query parameters; executing a post-query lifecycle function to update the target data queried based on the query parameters to obtain updated target data; and executing a post-rendering lifecycle function to update the initial chart generated based on the target chart instance and the updated target data to obtain the target chart.

9. An electronic device, characterized in that, The method includes a processor and a memory, the memory storing multiple instructions; the processor loads instructions from the memory to perform the steps in the chart generation method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a plurality of instructions adapted for loading by a processor to perform the steps of the chart generation method according to any one of claims 1 to 7.

Images