Chart drawing method, device, equipment, and computer readable storage medium

Abstract

The application discloses a chart drawing method, device and equipment and a computer readable storage medium. The method comprises the following steps: after a chart drawing display module obtains a chart drawing request triggered by a user for target data, the chart drawing display module generates chart description information of the target data; the chart drawing display module sends the chart description information to a chart library using module; the chart drawing display module analyzes and processes first drawing process description data fed back by the chart library using module to obtain a first analysis result, so that the first analysis result can represent a chart drawing process for the target data; and finally, the chart drawing display module draws and displays a to-be-displayed chart of the target data according to the first analysis result, so that the user can draw a chart by using the chart drawing display module, and different types of APPs can call the same chart library.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, and particularly relates to a chart drawing method and device, equipment and computer readable storage medium. BACKGROUND

[0002] With the development of computer technology, the popularity of electronic devices (such as mobile phones, notebooks, etc.) is getting higher and higher.

[0003] In addition, with the increasing demand of users, the functions that can be realized by electronic devices are also more and more. For example, a user can draw a chart by means of an application program (Application, APP) in an electronic device, so that the chart can present some data (such as the daily sales trend of some products, the annual borrowing amount of some books, etc.) that the user is interested in in a more intuitive way.

[0004] In fact, some users may want to draw charts by means of different kinds of APPs (such as web, APP based on Android technology stack, APP based on IOS technology stack, APP based on Flutter technology stack, etc.) to meet their chart drawing needs in different application scenarios (such as using a computer for office work, using a mobile phone for entertainment, etc.).

[0005] However, since different kinds of APPs are usually implemented by using different technology stacks, how to realize the calling of the same chart library (such as a chart library based on JS syntax, etc.) by using different kinds of APPs becomes a technical problem to be solved. SUMMARY

[0006] In order to solve the above technical problem, the present application provides a chart drawing method, device, equipment and computer readable storage medium, which can realize the purpose of calling the same chart library (such as a chart library based on JS syntax, etc.) by using different kinds of APPs.

[0007] In order to achieve the above purpose, the technical scheme provided by the embodiments of the present application is as follows:

[0008] The present application provides a chart drawing method, applied to a chart drawing display module, and the method comprises:

[0009] After obtaining a chart drawing request triggered by a user for target data, generating chart description information of the target data;

[0010] Sending the chart description information to a chart library using module;

[0011] After the chart library using module feeds back first drawing process description data for the chart description information, the first drawing process description data is parsed to obtain a first parsing result, where the first parsing result is used to indicate a chart drawing process for the target data.

[0012] According to the first parsing result, a to-be-displayed chart of the target data is drawn and displayed.

[0013] In a possible implementation, the chart library using module is configured to draw a chart for the target data on a simulation canvas by using a to-be-used chart library, to obtain the first drawing process description data.

[0014] In a possible implementation, the chart drawing and display module includes a real canvas, and an implementation technology stack of the real canvas is different from an implementation technology stack of the simulation canvas.

[0015] In a possible implementation, the chart drawing and display module includes a real canvas, and the first parsing result is used to describe a chart drawing process for the target data on the real canvas.

[0016] In a possible implementation, after the to-be-displayed chart of the target data is displayed, the method further includes:

[0017] After the user triggers an operation for the to-be-displayed chart, event description information of the triggered operation is obtained.

[0018] The event description information and a chart identifier of the to-be-displayed chart are sent to the chart library using module.

[0019] After the chart library using module feeds back second drawing process description data for the event description information and the chart identifier of the to-be-displayed chart, the second drawing process description data is parsed to obtain a second parsing result.

[0020] According to the second parsing result, a response chart of the triggered operation is drawn and displayed.

[0021] Embodiments of the present application further provide a chart drawing device, which includes:

[0022] An information generation unit is configured to generate chart description information of target data after a chart drawing request triggered by a user for the target data is obtained.

[0023] A first sending unit is configured to send the chart description information to a chart library using module.

[0024] The first analysis unit is configured to, after obtaining the first drawing process description data fed back by the chart library using module for the chart description information, analyze and process the first drawing process description data to obtain a first analysis result, wherein the first analysis result is used to represent a chart drawing process for the target data.

[0025] The first display unit is configured to draw and display the to-be-displayed chart of the target data according to the first analysis result.

[0026] Embodiments of the present application further provide a chart drawing system, comprising a chart drawing display module and a chart library using module; wherein the chart drawing display module is configured to execute any of the embodiments of the chart drawing method provided by the embodiments of the present application;

[0027] The chart library using module is configured to use a to-be-used chart library to draw a chart for chart demand information provided by the chart drawing display module, obtain chart drawing process data corresponding to the chart demand information, and feed back the chart drawing process data to the chart drawing display module.

[0028] Embodiments of the present application further provide a device, comprising a processor and a memory:

[0029] The memory is configured to store a computer program;

[0030] The processor is configured to execute any of the embodiments of the chart drawing method provided by the embodiments of the present application according to the computer program.

[0031] Embodiments of the present application further provide a computer readable storage medium, configured to store a computer program, wherein the computer program is configured to execute any of the embodiments of the chart drawing method provided by the embodiments of the present application.

[0032] Embodiments of the present application further provide a computer program product, which, when running on a terminal device, causes the terminal device to execute any of the embodiments of the chart drawing method provided by the embodiments of the present application.

[0033] Compared with the prior art, the embodiments of the present application have at least the following advantages:

[0034] In the technical scheme provided by the embodiments of the present application, for a chart drawing display module (for example, an APP based on an Android technology stack, an APP based on an IOS technology stack, or an APP based on a Flutter technology stack, etc.), after the chart drawing display module obtains a chart drawing request triggered by a user for target data (for example, daily sales of a product in each day in 2021, etc.), the chart drawing display module first generates chart description information of the target data, so that the chart description information can describe the chart drawing requirement for the target data (for example, represent the target data in the form of a line chart, etc.); then the chart drawing display module sends the chart description information to a chart library using module, so that the chart library using module can simulate a chart drawing process for the target data by means of a chart library (for example, a chart library based on JS syntax) that can be called by the chart library using module and the chart description information, obtain first drawing process description data, and send the first drawing process description data to the chart drawing display module; then, the chart drawing display module analyzes and processes the first drawing process description data to obtain a first analysis result, so that the first analysis result can represent the chart drawing process for the target data (especially, the first analysis result can represent the chart drawing process for the target data in a manner that can be understood by the chart drawing display module); finally, the chart drawing display module draws and displays a to-be-displayed chart of the target data according to the first analysis result, so that the to-be-displayed chart can meet the chart drawing requirement of the user for the target data, thereby achieving the purpose of chart drawing by the user using the chart drawing display module.

[0035] It can be seen that, since the chart drawing display module draws a chart based on the chart drawing process described by the first drawing process description data, rather than directly calling a chart library to draw a chart, the chart drawing display module does not need to consider whether the technology stack used by the chart drawing display module is consistent with the technology stack that can call the chart library when drawing a chart, so that the chart drawing display module can implement a chart drawing process through a data interaction process between the chart drawing display module and the chart library using module regardless of the technology stack used by the chart drawing display module. Thus, the problem that the chart drawing display module cannot directly call the chart library due to the difference between the technology stack used by the chart drawing display module (for example, a Flutter technology stack) and the technology stack that can call the chart library (for example, a web development technology stack, etc.) can be effectively solved, thereby achieving the purpose that different types of APPs (for example, a web, an APP based on an Android technology stack, an APP based on an IOS technology stack, or an APP based on a Flutter technology stack, etc.) can call the same chart library. BRIEF DESCRIPTION OF DRAWINGS

[0036] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the accompanying drawings required by the embodiments or prior art description will be briefly introduced as follows. Obviously, the accompanying drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained from these drawings without creative labor.

[0037] Figure 1 A flow chart of a chart drawing method provided by an embodiment of the present application;

[0038] Figure 2 A working principle schematic diagram of a chart drawing process provided by an embodiment of the present application;

[0039] Figure 3 A schematic diagram of a rendering process provided by an embodiment of the present application;

[0040] Figure 4 A schematic diagram of an event flow provided by an embodiment of the present application;

[0041] Figure 5 A schematic diagram of a native API provided by an embodiment of the present application;

[0042] Figure 6 A structural schematic diagram of a chart drawing device provided by an embodiment of the present application;

[0043] Figure 7 A structural schematic diagram of a chart drawing system provided by an embodiment of the present application. DETAILED DESCRIPTION

[0044] In order to facilitate the understanding of the present application, some technical terms related to the present application will be introduced as follows.

[0045] Android is a free and open-source operating system; and Android is mainly used in mobile devices (for example, smart phones and tablet computers).

[0046] IOS is a mobile operating system developed by Apple Inc.; and IOS is mainly used in mobile devices (for example, Apple mobile phones, etc.) under the Apple Inc. flag.

[0047] Flutter is a user interface toolkit open-sourced by Google, which helps developers efficiently build multi-platform beautiful applications through a code library, supporting mobile, browser, desktop and embedded platforms.

[0048] A chart library based on JavaScript (JS) syntax is designed for a browser (web) to provide intuitive, vivid, interactive, and customizable data charts (e.g., line charts, column charts, scatter charts, K-line charts, pie charts), radar charts, maps, chord diagrams, force-directed layout diagrams, etc.) when rendering on a web canvas.

[0049] An application programming interface (API) is a convention for connecting different components of a software system.

[0050] Based on the above technical terms, the related content of the present application will be introduced below.

[0051] The inventor found in the research of the chart library that for a chart library (e.g., a chart library based on JS syntax), the chart library can usually be directly called by only one kind of application (e.g., a chart library based on JS syntax can only be directly called by web), which limits the application range of the chart library and leads to poor user chart drawing experience. For ease of understanding, examples will be used for illustration below.

[0052] As an example, for a chart library based on JS syntax built for web, the technology stack that can call the chart library is the web page development technology stack, so that the chart library can be directly called by web based on the web page development technology stack. However, the technology stacks used by other types of APPs (e.g., Android technology stack, IOS technology stack, Flutter technology stack, etc.) are completely different from the web page development technology stack, so these APPs cannot directly call the chart library, which leads to the fact that users can only use web to draw charts, and thus cannot meet the user demand of using other types of APPs to draw charts, which leads to poor user chart drawing experience.

[0053] The inventor also found that, in order to solve the above-mentioned problem of "limited application range of chart library", for other types of APPs except web, a web view can be embedded in these APPs to enable these APPs to realize chart drawing through the web view; however, this way has the defects of high memory occupation and slow loading speed when multiple graphics coexist, and the graphics rendering effect is deteriorated for APPs based on Flutter technology stack. It can be seen that, for the technical solution based on web view, although the technical solution can solve the above-mentioned problem of "limited application range of chart library", the chart drawing effect of the technical solution is not good due to some defects of the technical solution, thereby leading to poor chart drawing experience of users.

[0054] The inventor also found that, in order to solve the above-mentioned problem of "limited application range of chart library", for other types of APPs except web, a web view can be embedded in these APPs to enable these APPs to realize chart drawing through the web view; however, this way has the defects of high memory occupation and slow loading speed when multiple graphics coexist, and the graphics rendering effect is deteriorated for APPs based on Flutter technology stack. It can be seen that, for the technical solution based on web view, although the technical solution can solve the above-mentioned problem of "limited application range of chart library", the chart drawing effect of the technical solution is not good due to some defects of the technical solution, thereby leading to poor chart drawing experience of users.

[0055] Based on the above findings, in order to solve the technical problems shown in the background section, the embodiments of the present application provide a chart drawing method, which comprises: after the chart drawing display module (for example, an APP based on the Flutter technology stack) obtains a chart drawing request triggered by a user for target data, first generating chart description information of the target data by the chart drawing display module, so that the chart description information can describe the chart drawing requirements for the target data (for example, representing the target data in the form of a line chart); then sending the chart description information to the chart library using module by the chart drawing display module, so that the chart library using module can simulate the chart drawing process for the target data by means of the chart library (for example, a chart library based on JS syntax) it can call and the chart description information, obtain first drawing process description data, and send the first drawing process description data to the chart drawing display module by the chart library using module; then, the chart drawing display module analyzes and processes the first drawing process description data to obtain a first analysis result, so that the first analysis result can represent the chart drawing process for the target data (especially, the first analysis result can represent the chart drawing process for the target data in a way that the chart drawing display module can understand); finally, the chart drawing display module draws and displays the to-be-displayed chart of the target data according to the first analysis result, so that the to-be-displayed chart can meet the chart drawing requirements of the user for the target data, thus achieving the purpose of chart drawing by the user using the chart drawing display module.

[0056] It can be seen that, since the chart drawing display module draws charts based on the chart drawing process described by the first drawing process description data, rather than directly calling the chart library to draw charts, the chart drawing display module does not need to consider whether the technology stack used by the chart drawing display module is consistent with the technology stack that can call the chart library when drawing charts, so that the chart drawing display module can realize the chart drawing process through the data interaction process between the chart drawing display module and the chart library using module regardless of the technology stack used by the chart drawing display module. This can effectively solve the problem that the chart drawing display module cannot directly call the chart library due to the difference between the technology stack used by the chart drawing display module (for example, the Flutter technology stack) and the technology stack that can call the chart library (for example, the web development technology stack), thereby achieving the purpose that different types of APPs (for example, web, APP based on the Android technology stack, APP based on the IOS technology stack, or APP based on the Flutter technology stack) can call the same chart library, thereby achieving cross-end consistency.

[0057] In addition, the chart drawing display module is capable of drawing a chart based on some data information (e.g., a script, etc.) capable of describing a chart drawing process fed back by the chart library use module, so that the chart drawing display module does not need to directly invoke the chart library, thereby making the chart drawing display module not need to embed a webview, and further making the chart drawing display module capable of effectively overcoming the defects caused by embedding a webview, thus being beneficial to improving the chart drawing experience of the user.

[0058] In addition, no matter what technology stack is used to implement the chart drawing display module, the chart drawing display module is capable of implementing a chart drawing process with the aid of the chart library use module; and because the chart library use module only needs to implement chart drawing with the aid of one chart library, the chart drawing display module implemented with various technology stacks can all indirectly implement chart drawing with the aid of the same chart library, thus being capable of effectively avoiding the high-cost operation of redeveloping a same chart library using the technology stack used by the chart drawing display module to implement the chart drawing display module, thereby being capable of effectively overcoming the defects caused by redeveloping a same chart library using the native technology of various APPs, and thereby being capable of effectively reducing the development cost and the maintenance cost.

[0059] In order for those skilled in the art to better understand the technical solutions of the present application, the technical solutions in the embodiments of the present application will be described clearly and completely below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, not all. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor fall within the scope of protection of the present application.

[0060] In order to facilitate the understanding of the technical solutions of the present application, the following will introduce the chart drawing method applied to the chart drawing display module provided by the embodiments of the present application in conjunction with some method embodiments (e.g., S1-S4) and some drawings (e.g., FIG. 1). Method embodiment one to Method embodiment three ). Figures 1-5

[0061] Method embodiment one

[0062] Referring to Figure 1 , the figure is a flowchart of a chart drawing method provided by the embodiments of the present application.

[0063] The chart drawing method provided by the embodiments of the present application includes S1-S4:

[0064] S1: After the chart drawing display module acquires a chart drawing request triggered by the user for target data, the chart drawing display module generates chart description information of the target data.​

[0065] The chart drawing and display module is used to provide users with chart drawing services; and the embodiments of this application do not limit the implementation of the chart drawing and display module. For example, it can be an electronic device or an application that can run on an electronic device (e.g., an APP based on the Flutter technology stack).

[0066] Furthermore, the embodiments of this application are not limited to electronic devices; for example, they can be data processing devices such as terminal devices or servers. The terminal device can be a smartphone, computer, personal digital assistant (PDA), or tablet computer, etc. The server can be a standalone server, a cluster server, or a cloud server.

[0067] Target data refers to data information that needs to be represented using charts; and the embodiments of this application do not limit the target data. For example, it may include the daily sales volume of a product in 2021.

[0068] A chart drawing request is used to request chart drawing processing for target data; however, this application embodiment does not limit the chart drawing request. For example, the chart drawing request may carry target data and chart request information for the target data, so that the chart drawing request can describe the user's chart requirements for the target data. The chart request information indicates how the user wants the target data to be represented in a chart (e.g., the user wants the target data to be represented as a line chart, etc.).

[0069] Furthermore, this application embodiment does not limit the triggering method of the chart drawing request. For example, it can be triggered by the user performing a certain triggering operation (e.g., clicking a specific button, performing a specific gesture, etc.) on the user interface of the chart drawing and display module, so that the chart drawing and display module can subsequently use its predefined API (e.g., ... Figure 5 The native API shown is used to call the chart drawing task.

[0070] The “chart description information of the target data” mentioned above refers to the information related to the chart drawing task of the target data, so that the “chart description information of the target data” can describe the chart drawing requirements for the target data.

[0071] Furthermore, the embodiments of this application do not limit the above-mentioned "graphic description information of the target data", for example, such as Figure 3As shown, it can include: an identity (Identity document, ID) of a first object instance created by the chart drawing display module for the target data, and a chart configuration of the first object instance. Wherein, the first object instance is used to represent a chart drawing task of the target data in the chart drawing display module.

[0072] In addition, the embodiments of the present application do not limit the generation process of the "chart description information of the target data", for example, when the chart drawing display module is implemented by using the Flutter technology stack, the generation process can be implemented by using any one of the existing or future methods suitable for generating the chart description information of the target data by using the Flutter technology stack.

[0073] Based on the above related content of S1, for a user, if the user wants to draw a chart for the target data by using the chart drawing display module (for example, an APP based on the Flutter technology stack, etc.), the user can upload the target data through the user interface in the chart drawing display module and trigger a chart drawing request, so that the chart drawing request can represent the chart drawing requirement of the user for the target data (for example, using a line chart, etc.), so that the chart drawing display module can subsequently determine the chart description information of the target data based on the chart drawing request (for example, the chart drawing display module can create a first object instance for the target data, and the ID of the first object instance and the chart configuration of the first object instance are used as the chart description information of the target data, etc.), so that the chart description information can describe the chart drawing requirement of the target data.

[0074] S2: The chart drawing display module sends the chart description information to the chart library using module.

[0075] Wherein, the chart library using module is used to draw a chart by using a to-be-used chart library; and the chart library using module is implemented by using a technology stack that can call the to-be-used chart library. For example, when the to-be-used chart library is a chart library based on JS syntax, the technology stack used by the chart library using module is a web development technology stack, so that the technology stack used by the chart library using module is consistent with the technology stack that can call the to-be-used chart library, so that the chart library using module can directly call the chart library based on JS syntax to draw a chart.

[0076] In fact, the chart drawn by the chart library using module usually does not need to be directly presented to the user, so that the chart library using module does not need to draw a chart on a real canvas. Based on this, the embodiments of the present application provide a possible implementation of the chart library using module, in which the chart library using module is used to draw a chart on a simulated canvas by using the to-be-used chart library.

[0077] The simulation canvas is used to simulate a real canvas that can directly draw a chart using the chart library to be used, so that the simulation canvas can simulate the chart drawing function of the real canvas as much as possible. For example, if the chart library to be used is a chart library based on JS syntax, the real canvas of the chart library to be used can be a web canvas, and the simulation canvas can be a "simulated canvas object" as shown in the figure, so that the simulation canvas is used to simulate the web canvas, so that the simulation canvas can simulate the chart drawing function that can be implemented by the web canvas. Figure 2

[0078] In addition, the technology stack used to build the simulation canvas is consistent with the technology stack that can call the chart library to be used. For example, if the chart library to be used is a chart library based on JS syntax, the technology stack used to build the simulation canvas can be a web development technology stack.

[0079] In addition, in order to further improve the chart drawing effect, the simulation canvas can be built according to the World Wide Web Consortium (W3C) standard. For example, if the chart library to be used is a chart library based on JS syntax, the simulation canvas can be built on the web development technology stack according to the W3C standard.

[0080] In addition, the embodiment of the present application does not limit the working principle of the chart library use module, for example, it can be specifically: using the chart library to be used to draw a chart according to the chart requirement information provided by the chart drawing display module, obtaining the chart drawing process data corresponding to the chart requirement information, and feeding back the chart drawing process data to the chart drawing display module.

[0081] The chart requirement information is used to describe the chart requirement of the user; and the embodiment of the present application does not limit the chart requirement information, for example, it can be the "chart description information of the target data" described above.

[0082] The "chart drawing process data corresponding to the chart requirement information" described above is used to describe the chart drawing process implemented with reference to the chart requirement information; and the embodiment of the present application does not limit the "chart drawing process data corresponding to the chart requirement information", for example, it can be the "first drawing process description data" described below.

[0083] In order to facilitate understanding of the working principle of the chart library use module, the following will be described in conjunction with an example.

[0084] As an example, as shown in the figure, the chart library use module can be a chart drawing process data feedback module. Figure 3 ​As shown, the working principle of the chart library using module can be specifically as follows: after the chart library using module receives the chart description information (for example, the ID of the first object instance and the chart configuration, etc.) of the target data from the chart drawing display module, the chart library using module can create a second object instance to enable the second object instance to represent the task of chart drawing for the target data in the chart library using module, and bind the ID of the second object instance with the ID of the first object instance (for example, establish the mapping relationship between the ID of the second object instance and the ID of the first object instance) by the chart library using module, so that the chart drawing process data obtained by the chart library using module by executing the second object instance can be known to be used to provide the first object instance created in the chart drawing display module based on the binding relationship in the subsequent; then, the chart library using module performs chart drawing for the target data on the simulated canvas (that is, Figure 3 the simulated canvas object) using the chart library to be used to obtain first drawing process description data, so that the first drawing process description data can represent the chart drawing process for the target data on the simulated canvas; finally, the chart library using module sends the first drawing process description data to the chart drawing display module, so that the chart drawing display module can execute the first object instance based on the first drawing process description data in the subsequent to implement the chart drawing process for the target data.

[0085] In addition, the present embodiment does not limit the first drawing process description data, for example, which can be implemented in the form of a script (for example, Figure 3 the chart drawing script as shown).

[0086] It should be noted that for the chart drawing script as shown in Figure 3 in order to better express the serialization process, the data structure of the chart drawing script recorded on the simulated canvas can be preset (for example, the attribute name, method name, string and other enumeration values involved in the chart drawing script are compressed into digital codes, etc.), so that the first drawing process description data recorded on the simulated canvas in the subsequent can better express the chart drawing process for the target data according to the data structure.

[0087] In addition, the embodiment of the present application does not limit the obtaining process of the first drawing process description data. For example, when the chart library to be used is a JS syntax-based chart library, the obtaining process of the first drawing process description data can specifically be: the chart library using module records a chart drawing script for the target data by constructing Canvas, CanvasRenderingContext, LinearCanvasGradient, RadialCanvasGradient, Pattern and other objects, and determines the chart drawing script as the first drawing process description data.

[0088] Based on the related content of S2, after the chart drawing display module determines the chart description information of the target data, the chart drawing display module sends the chart description information to the chart library using module, so that the chart library using module can refer to the chart description information and use the chart library to be used to draw a chart for the target data on the simulation canvas to obtain the first drawing process description data, so that the first drawing process description data can represent the chart drawing process for the target data on the simulation canvas. Then, the chart library using module feeds back the first drawing process description data to the chart drawing display module, so that the chart drawing display module can extract the chart drawing process for the target data from the first drawing process description data.

[0089] It should be noted that the embodiment of the present application does not limit the communication mode between the chart drawing display module and the chart library using module. For example, it can be implemented by using the cross-technology stack communication mode as shown in Figures 2-5 .

[0090] S3: After the chart drawing display module obtains the first drawing process description data fed back by the chart library using module for the chart description information, the chart drawing display module performs analysis processing on the first drawing process description data to obtain a first analysis result.

[0091] The first analysis result is used to represent the chart drawing process for the target data, so that the first analysis result can describe the chart drawing process for the target data on the real canvas (for example, the "Flutter-side canvas object" as shown in Figure 2 ) of the chart drawing display module.

[0092] The "real canvas of the chart drawing display module" refers to the canvas used when the chart drawing display module draws a chart, and the technology stack used to implement the "real canvas of the chart drawing display module" is the same as the technology stack used to implement the chart drawing display module.

[0093] In addition, the implementation technology stack of the "real canvas of the chart drawing display module" can be different from the implementation technology stack of the "simulated canvas" (that is, the technology stack used to implement the "real canvas of the chart drawing display module" is different from the technology stack used to implement the "simulated canvas"). For example, when the chart drawing display module is implemented using the Flutter technology stack, and the chart library to be used is a chart library based on the JS syntax, the real canvas in the chart drawing display module can be implemented using the Flutter technology stack, and the simulated canvas in the chart library use module can be implemented using the web development technology stack.

[0094] In addition, in some application scenarios, the implementation technology stack of the "real canvas of the chart drawing display module" can also be consistent with the implementation technology stack of the "simulated canvas". For example, when the chart drawing display module is a web, and the chart library to be used is a chart library based on the JS syntax, the real canvas in the chart drawing display module can be implemented using the web development technology stack, and the simulated canvas in the chart library use module can also be implemented using the web development technology stack.

[0095] In addition, in some application scenarios, the implementation technology stack of the "real canvas of the chart drawing display module" can also be consistent with the implementation technology stack of the "simulated canvas". For example, when the chart drawing display module is a web, and the chart library to be used is a chart library based on the JS syntax, the real canvas in the chart drawing display module can be implemented using the web development technology stack, and the simulated canvas in the chart library use module can also be implemented using the web development technology stack.

[0096] In addition, the present application embodiment does not limit the determination process of the first analysis result, and the following will be described in combination with examples.

[0097] As an example, when the chart library use module is implemented using the web development technology stack, the web development technology stack describes the chart drawing process for the target data through a first expression method, the chart drawing display module is implemented using the Flutter technology stack, and the Flutter technology stack describes the chart drawing process for the target data through a second expression method, the "determination process of the first analysis result" can be specifically: converting the first drawing process description data from the first expression method to the second expression method to obtain the first analysis result, so that the first analysis result can express how to draw a chart for the target data in a manner that the chart drawing display module can understand, so that the chart drawing display module can subsequently refer to the first analysis result to implement chart drawing for the target data. Wherein, the first expression method refers to the expression method used when the chart library use module describes the chart drawing process for the target data. The second expression method refers to the expression method used when the chart drawing display module describes the chart drawing process for the target data.

[0098] Based on the related content of S3, after the chart drawing display module obtains the first drawing process description data fed back by the chart library using module for the chart description information, the chart drawing display module can analyze the first drawing process description data to obtain a first analysis result, so that the first analysis result can describe the chart drawing process for the target data on the real canvas of the chart drawing display module, so that the chart drawing display module can understand how to draw a chart for the target data from the first analysis result, so that the chart drawing display module can refer to the first analysis result to realize chart drawing for the target data subsequently.

[0099] S4: The chart drawing display module draws and displays the to-be-displayed chart of the target data according to the first analysis result. The to-be-displayed chart is used to display the target data in a chart manner.

[0100] In the embodiment of the present application, because the first analysis result can express how to draw a chart for the target data in a manner that can be understood by the chart drawing display module, after the chart drawing display module obtains the first analysis result, the chart drawing display module can draw and display the to-be-displayed chart of the target data on the real canvas of the chart drawing display module according to the first analysis result, so that the user can see the to-be-displayed chart from the user interface of the chart drawing display module, and thus the user can more intuitively understand the target data and related content (for example, development trend, etc.) of the target data from the to-be-displayed chart.

[0101] Based on the above related content of S1 to S4, it can be seen that for the chart drawing method provided by the embodiments of the present application, when the chart drawing display module (for example, an APP based on the Flutter technology stack) obtains a chart drawing request triggered by a user for target data, the chart drawing display module first generates chart description information of the target data, so that the chart description information can describe the chart drawing requirement for the target data (for example, represent the target data in the form of a line chart); then the chart drawing display module sends the chart description information to the chart library using module, so that the chart library using module can simulate the chart drawing process for the target data by means of the chart library (for example, a chart library based on JS syntax) that can be called by the chart library using module and the chart description information, obtain first drawing process description data, and send the first drawing process description data to the chart drawing display module by the chart library using module; then, the chart drawing display module analyzes and processes the first drawing process description data to obtain a first analysis result, so that the first analysis result can represent the chart drawing process for the target data (especially, the first analysis result can represent the chart drawing process for the target data in a way that can be understood by the chart drawing display module); finally, the chart drawing display module draws and displays the to-be-displayed chart of the target data according to the first analysis result, so that the to-be-displayed chart can meet the chart drawing requirement of the user for the target data, thereby achieving the purpose of chart drawing by the user using the chart drawing display module.

[0102] It can be seen that since the chart drawing display module draws the chart based on the chart drawing process described by the first drawing process description data, rather than directly calling the chart library to draw the chart, the chart drawing display module does not need to consider whether the technology stack used by the chart drawing display module is consistent with the technology stack that can call the chart library when drawing the chart, so that the chart drawing display module can realize the chart drawing process through the data interaction process between the chart drawing display module and the chart library using module regardless of the technology stack used by the chart drawing display module. This can effectively solve the problem that the chart drawing display module cannot directly call the chart library due to the difference between the technology stack used by the chart drawing display module (for example, the Flutter technology stack) and the technology stack that can call the chart library (for example, the web development technology stack), thereby achieving the purpose that different types of APPs (for example, web, APP based on the Android technology stack, APP based on the IOS technology stack, or APP based on the Flutter technology stack) can call the same chart library.

[0103] It should be noted that for Figure 5 , in order to better understand Figure 5 , the following is givenFigure 5 Some of the Chinese words shown in the English, and these Chinese and English content is specific for: request chart (call render); controller (controller); drawing module (Painter); draw description information (ToolTip Painter); draw chart shape (Render Painter); Flutter side of the canvas object (flutter canvas); touch event (touch enevt); Flutter side of the communication object (Flutter Bridge); contain JS execution container (containjs runtime); web development technology stack communication object (JS Bridge); create JS chart (create); event manager (Event Manager); trigger event (trigger event); call canvas object (call canvas); simulation canvas (CanvasRenderdingContext); record chart drawing script (Record Canvas scripts); through the simulation canvas draw method trigger (trigger by context.draw).

[0104] Method embodiment two

[0105] In fact, the chart rendering display module sometimes needs to provide chart rendering feedback for a lot of user-provided data, so in order to further improve the accuracy of chart feedback, the embodiment of the present application also provides another possible implementation of the chart rendering method, in which the chart rendering method can include steps 11-14:

[0106] Step 11: After the chart rendering display module obtains the chart rendering request triggered by the user for the target data, the chart rendering display module generates chart description information of the target data, so that the chart description information includes the ID of the first object instance created for the target data and chart configuration information. Wherein, the first object instance is used to indicate the task created by the chart rendering display module for the chart rendering process of the target data.

[0107] It should be noted that the related content of step 11 can be referred to the above S1.

[0108] Step 12: The chart rendering display module sends the chart description information to the chart library usage module.

[0109] It should be noted that the related content of step 12 can be referred to the above S2.

[0110] To better understand step 12, the working principle of the chart library usage module is introduced below in combination with an example.

[0111] As an example, for the chart library usage module, after the chart library usage module receives the chart description information sent by the chart drawing display module, the chart library usage module can perform steps 21-25:

[0112] Step 21: The chart library usage module creates a second object instance according to the chart configuration information of the first object instance, so that the second object instance can represent the task created by the chart library usage module for the chart drawing process of the target data.

[0113] Step 22: The chart library usage module establishes a corresponding relationship between the ID of the second object instance and the ID of the first object instance, so that the ID of the second object instance and the ID of the first object instance are in a binding state.

[0114] Step 23: The chart library usage module executes the second object instance by calling the chart library to be used, to obtain first drawing process description data, so that the first drawing process description data can describe how to draw a chart on the simulation canvas of the chart library usage module for the target data.

[0115] Step 24: The chart library usage module determines the instance ID description information of the first drawing process description data.

[0116] The instance ID description information is used to describe the instance ID information related to the first drawing process description data, so that the instance ID description information can represent that the first drawing process description data is feedback for the target data (or the first object instance).

[0117] In addition, the present application embodiment does not limit the instance ID description information, for example, it can specifically include the ID of the first object instance, so that after the chart drawing display module obtains the instance ID description information, the chart drawing display module can know that the first drawing process description data is feedback for the first object instance (or the target data, etc.) by the chart library usage module based on the ID of the first object instance.

[0118] For example, when the chart drawing display module is able to read the correspondence between the ID of the second object instance and the ID of the first object instance from the preset storage space, the "instance ID description information of the first drawing process description data" can include the ID of the second object instance, so that after the chart drawing display module obtains the instance ID description information, the chart drawing display module can first query from the correspondence stored in the preset storage space that the ID of the second object instance corresponds to the ID of the first object instance, so that the chart drawing display module can determine that the first drawing process description data is feedback by the chart library using module for the first object instance (or target data, etc.) based on the ID of the first object instance.

[0119] For example, when the chart drawing display module is able to read the correspondence between the ID of the second object instance and the ID of the first object instance from the preset storage space, the "instance ID description information of the first drawing process description data" can include the ID of the second object instance, so that after the chart drawing display module obtains the instance ID description information, the chart drawing display module can first query from the correspondence stored in the preset storage space that the ID of the second object instance corresponds to the ID of the first object instance, so that the chart drawing display module can determine that the first drawing process description data is feedback by the chart library using module for the first object instance (or target data, etc.) based on the ID of the first object instance.

[0120] Step 25: The chart library using module feeds back the first drawing process description data and the instance ID description information of the first drawing process description data to the chart drawing display module.

[0121] Based on the related content of the above step 12, after the chart drawing display module determines the chart description information of the target data, the chart drawing display module sends the chart description information to the chart library using module, so that the chart library using module can determine the first drawing process description data and the instance ID description information of the first drawing process description data based on the chart description information, so that the first drawing process description data can represent the chart drawing process on the simulation canvas for the target data, and the instance ID description information of the first drawing process description data can represent that the first drawing process description data is feedback by the chart library using module for the target data (or the first object instance). Subsequently, the chart library using module feeds back the first drawing process description data and the instance ID description information of the first drawing process description data to the chart drawing display module, so that the chart drawing display module can learn from the instance ID description information that the first drawing process description data is feedback for the target data (or the first object instance), and extract the chart drawing process for the target data from the first drawing process description data.

[0122] In step 13, after the chart drawing display module obtains the first drawing process description data and the instance ID description information of the first drawing process description data fed back by the chart library using module for the chart description information, the chart drawing display module determines the associated object of the first drawing process description data according to the instance ID description information of the first drawing process description data, and analyzes the first drawing process description data to obtain a first analysis result.

[0123] The associated object of the first drawing process description data is used to represent an object related to the first drawing process description data in the chart drawing display module.

[0124] In addition, the present embodiment is not limited to the above-mentioned "associated object of the first drawing process description data", which can be a first object instance, for example, so that the chart drawing display module can learn from the associated object that the first drawing process description data is fed back by the chart library using module for the first object instance, so that the chart drawing display module can use the first drawing process description data to participate in the execution process of the first object instance, so as to realize the image drawing process for the target data.

[0125] For another example, the above-mentioned "associated object of the first drawing process description data" can also be the target data, so that the chart drawing display module can learn from the associated object that the first drawing process description data is fed back by the chart library using module for the target data, so that the chart drawing display module can use the first drawing process description data to participate in the execution process of the first object instance created for the target data, so as to realize the image drawing process for the target data.

[0126] It should be noted that the related content of the action "analyzing the first drawing process description data to obtain a first analysis result" in step 13 is described above in S13.

[0127] Based on the related content of the above step 13, when the chart drawing display module obtains the first drawing process description data fed back by the chart library using module for the chart description information and the instance ID description information of the first drawing process description data, the chart drawing display module can not only analyze the first drawing process description data to obtain a first analysis result, so that the first analysis result can describe the chart drawing process for the target data on the real canvas of the chart drawing display module, but also determine from the instance ID description information that the first drawing process description data is fed back for the first object instance (or target data), so that the chart drawing display module can determine that the first analysis result should participate in the execution process of the first object instance created for the target data, so that the chart drawing display module can execute the first object instance based on the first analysis result to realize the icon drawing for the target data.

[0128] Step 14: The chart drawing display module draws and displays the to-be-displayed chart of the target data according to the first analysis result and the associated object of the first drawing process description data. The to-be-displayed chart is used to display the target data in a chart manner.

[0129] In the embodiment of the present application, after the chart drawing display module obtains the first analysis result and the associated object of the first drawing process description data, the chart drawing display module can know from the associated object that the first analysis result should participate in the execution process of the first object instance created for the target data, so the chart drawing display module can execute the first object instance according to the first analysis result to realize the purpose of drawing and displaying the to-be-displayed chart of the target data, which can effectively avoid the adverse effects caused by the chart drawing display module confusing the large amount of feedback data of the chart library using module, and thus can effectively improve the icon drawing effect.

[0130] Based on the related content of the above steps 11 to 14, in some application scenarios, the chart drawing display module and the chart library using module not only need to transmit information related to chart drawing (for example, chart requirement information, chart drawing process data, etc.), but also need to transmit information used to ensure that chart feedback does not occur confusion (for example, object instance ID, etc.), which can effectively avoid the adverse effects caused by the chart drawing display module confusing the large amount of feedback data of the chart library using module, and thus can effectively improve the icon drawing effect.

[0131] Method embodiment three

[0132] In fact, after the user sees the to-be-presented chart on the user interface of the chart drawing presentation module, the user can want to make some additional requirements (e.g., special display of a data point, special display of a data interval, marking of detailed information of a data point, etc.) for the to-be-presented chart.

[0133] To achieve the above user requirement, the embodiment of the present application further provides another possible implementation of the chart drawing method, in which the chart drawing method can further include S5-S8 in addition to the above S1-S4 (or step 11-step 14):

[0134] S5: After the chart drawing presentation module obtains the trigger operation of the user for the to-be-presented chart, the chart drawing presentation module obtains event description information of the trigger operation.

[0135] The trigger operation refers to an operation triggered by the user on the user interface of the chart drawing presentation module for the to-be-presented chart, and the embodiment of the present application does not limit the trigger operation. For example, when the chart drawing presentation module is an application program capable of running on an electronic device, and the electronic device includes a touch screen, the trigger operation for the to-be-presented chart can include a touch operation (i.e., touch).

[0136] The above "event description information of the trigger operation" is used to describe the event corresponding to the trigger operation. For example, if the trigger operation for the to-be-presented chart is a touch operation, the event corresponding to the trigger operation is a touch event (e.g., Figure 5 The "touch event" shown in the figure), so that the event description information of the trigger operation can indicate some information related to the touch event (e.g., key information extracted from the touch event), so that the event description information can indicate the event corresponding to the trigger operation.

[0137] In addition, the embodiment of the present application does not limit the obtaining process of the above "event description information of the trigger operation". For example, it can be that: after the chart drawing presentation module obtains the trigger operation of the user for the to-be-presented chart, the chart drawing presentation module first queries the event corresponding to the trigger operation from a pre-constructed preset mapping relationship; and then the chart drawing presentation module extracts key information from the event corresponding to the trigger operation as the event description information of the trigger operation, so that the event description information can indicate the event corresponding to the trigger operation. The preset mapping relationship is used to record events corresponding to a large number of candidate operations.

[0138] Based on the related content of S5, when the user sees the to-be-presented chart on the user interface of the chart presentation module, if the user wants to make some new requirements for the to-be-presented chart (for example, detailed introduction of the related content of a data point, highlighting of a data point or a data area, presentation of target data in another chart type, etc.), the user can perform some trigger operations on the to-be-presented chart to express the new requirements, so that the chart presentation module can learn the user requirements from the trigger operations, and determine the event description information of the trigger operations from the events corresponding to the trigger operations, so that the chart presentation module can subsequently convey the user requirements to the chart library using module by means of the event description information.

[0139] S6: The chart presentation module sends the event description information and the chart identifier of the to-be-presented chart to the chart library using module.

[0140] The chart identifier of the to-be-presented chart is used to uniquely represent the to-be-presented chart, and the chart identifier of the to-be-presented chart is not limited in the embodiment of the application.

[0141] It can be seen that in the embodiment of the application, after the chart presentation module obtains the event description information, the chart presentation module can send the event description information to the chart library using module, so that the chart library using module can learn the user requirements from the event description information, so that the chart library using module can implement chart drawing processing based on the event description information.

[0142] In addition, the embodiment of the application does not limit the implementation mode of "the chart library using module can implement chart drawing processing based on the event description information", for example, it can specifically include steps 31-33 (as shown in Figure 4

[0143] Step 31: The chart library using module determines an event object according to the event description information and the chart identifier of the to-be-presented chart, so that the event object can describe the task created by the chart library using module for the user requirements represented by the "trigger operation" above.

[0144] ​In the embodiment of the present application, after the chart library using module obtains the event description information and the chart identifier of the to-be-displayed chart, the chart library using module can learn from the chart identifier that the to-be-displayed chart needs to be adjusted, and can learn from the event description information which adjustments (for example, adding some chart information, replacing some chart information, etc.) need to be made to the to-be-displayed chart, so that the chart library using module can reassemble an event object based on the event description information and the chart identifier, so that the event object can describe the task created by the chart library using module for the user demand represented by the above-mentioned “trigger operation”, so that the event object can express in a way that the chart library using module can understand which adjustment work the chart library using module should make to the to-be-displayed chart, and then the chart library using module can learn from the event object which adjustment operations it should perform on the to-be-displayed chart.

[0145] Step 32: The chart library using module executes the event object by calling the to-be-used chart library, to obtain second drawing process description data, so that the second drawing process description data can describe the adjustment process of the to-be-displayed chart in the chart library using module.

[0146] In the embodiment of the present application, after the chart library using module obtains the event object, the chart library using module can execute the event object based on the to-be-used chart library to obtain second drawing process description data, so that the second drawing process description data can describe the adjustment process of the to-be-displayed chart in the chart library using module, so that the second drawing process description data can describe which adjustment operations should be performed on the to-be-displayed chart in order to achieve the user demand represented by the above-mentioned “trigger operation”, so that the chart library using module can subsequently convey the adjustment process required for the to-be-displayed chart to the chart drawing display module with the help of the second drawing process description data.

[0147] S7: After the chart drawing display module obtains the second drawing process description data fed back by the chart library using module for the event description information and the chart identifier of the to-be-displayed chart, the chart drawing display module performs analysis processing on the second drawing process description data to obtain a second analysis result.

[0148] The second analysis result is used to describe the adjustment process of the to-be-displayed chart on the real canvas, and the present application does not limit the determination process of the second analysis result, for example, the determination process of the second analysis result is similar to the above-mentioned “determination process of the second analysis result”, and for the sake of brevity, it will not be described here.

[0149] Based on the related content of S3, after the chart drawing display module obtains the second drawing process description data fed back by the chart library using module for the chart description information, the chart drawing display module can analyze the second drawing process description data to obtain a second analysis result, so that the first analysis result can describe the adjustment process for the to-be-displayed chart on the real canvas of the chart drawing display module, thereby enabling the chart drawing display module to understand from the second analysis result how to adjust and draw the to-be-displayed chart, so that the chart drawing display module can subsequently adjust and draw the target data by referring to the second analysis result.

[0150] S8: The chart drawing display module draws and displays a response chart of the trigger operation according to the second analysis result. The response chart is used to meet the adjustment demand of the user for the to-be-displayed chart in the form of a chart.

[0151] In the embodiment of the present application, because the second analysis result can express how to adjust and draw the to-be-displayed chart in a manner that can be understood by the chart drawing display module, after the chart drawing display module obtains the second analysis result, the chart drawing display module can adjust and draw the to-be-displayed chart on the real canvas of the chart drawing display module according to the second analysis result, and display the to-be-displayed chart after adjustment and drawing to the user, so that the user can see the to-be-displayed chart after adjustment and drawing from the user interface of the chart drawing display module, thereby enabling the to-be-displayed chart after adjustment and drawing to meet the adjustment demand of the user for the to-be-displayed chart before adjustment and drawing, and further enabling the to-be-displayed chart to be more in line with the user demand, which is beneficial to improve the chart drawing experience of the user.

[0152] Based on the related content of S5 to S8, for the chart drawing display module, the chart drawing display module can not only respond to the icon drawing request of the user for the target data, but also respond to the chart adjustment request of the user for the to-be-displayed chart being displayed, so that the chart drawing display module can meet the chart drawing demand of the user as much as possible, which is beneficial to further improve the chart drawing experience of the user.

[0153] Based on the chart drawing method provided in the above method embodiment, the present application further provides a chart drawing device, which is explained and described below with reference to the accompanying drawings.

[0154] Device embodiment

[0155] The technical details of the chart drawing device provided by the device embodiment are described above in the method embodiment.

[0156] Referring to Figure 6Fig. 1 is a structural schematic diagram of a chart drawing device according to an embodiment of the present application.

[0157] The chart drawing device 600 provided by the embodiment of the present application comprises:

[0158] An information generation unit 601 is configured to generate chart description information of target data after obtaining a chart drawing request triggered by a user for the target data;

[0159] A first sending unit 602 is configured to send the chart description information to a chart library using module;

[0160] A first analysis unit 603 is configured to perform analysis processing on first drawing process description data fed back by the chart library using module for the chart description information, to obtain a first analysis result, wherein the first analysis result is used to represent a chart drawing process for the target data.

[0161] A first display unit 604 is configured to draw and display a to-be-displayed chart of the target data according to the first analysis result.

[0162] In a possible implementation, the chart library using module is configured to draw a chart for the target data on a simulation canvas by using a to-be-used chart library, to obtain the first drawing process description data.

[0163] In a possible implementation, the chart drawing display module comprises a real canvas, and an implementation technology stack of the real canvas is different from an implementation technology stack of the simulation canvas.

[0164] In a possible implementation, the chart drawing display module comprises a real canvas, and the first analysis result is used to describe a chart drawing process for the target data on the real canvas.

[0165] In a possible implementation, the chart drawing device 600 further comprises:

[0166] An information obtaining unit is configured to obtain event description information of a trigger operation after obtaining the trigger operation of the to-be-displayed chart by the user;

[0167] A second sending unit is configured to send the event description information and a chart identifier of the to-be-displayed chart to the chart library using module;

[0168] A second analysis unit is configured to perform analysis processing on second drawing process description data fed back by the chart library using module for the event description information and the chart identifier of the to-be-displayed chart, to obtain a second analysis result.

[0169] a second display unit, configured to draw and display a response chart of the trigger operation according to the second parsing result.

[0170] Based on the above related content of the chart drawing apparatus 600, for the chart drawing apparatus 600 provided by the embodiments of the present application, when the chart drawing apparatus 600 obtains a chart drawing request triggered by a user for target data (for example, daily sales of a certain product in each day in 2021, etc.), the chart drawing apparatus 600 first generates chart description information of the target data, so that the chart description information can describe the chart drawing requirement for the target data (for example, represent the target data in the form of a line chart, etc.); then the chart drawing apparatus 600 sends the chart description information to the chart library using module, so that the chart library using module can simulate the chart drawing process for the target data by means of the chart library (for example, a chart library based on JS syntax) that it can call and the chart description information, obtain first drawing process description data, and send the first drawing process description data to the chart drawing apparatus 600 by the chart library using module; then the chart drawing apparatus 600 performs parsing processing on the first drawing process description data to obtain a first parsing result, so that the first parsing result can represent the chart drawing process for the target data (especially, the first parsing result can represent the chart drawing process for the target data in a way that the chart drawing apparatus 600 can understand); finally, the chart drawing apparatus 600 draws and displays the to-be-displayed chart of the target data according to the first parsing result, so that the to-be-displayed chart can meet the chart drawing requirement of the user for the target data, so as to achieve the purpose of chart drawing by the user using the chart drawing apparatus 600.

[0171] It can be seen that, since the chart drawing device 600 draws charts based on the chart drawing process described by the first drawing process description data, rather than drawing charts by directly invoking a chart library, the chart drawing device 600 does not need to consider whether the technology stack used by the chart drawing device 600 is consistent with the technology stack that can invoke the chart library when drawing charts, so that the chart drawing device 600 can implement the chart drawing process through the data interaction process between the chart library use module, regardless of the technology stack used by the chart drawing device 600. Thus, the problem that the chart drawing device 600 cannot directly invoke the chart library due to the technology stack (for example, the Flutter technology stack) used by the chart drawing device 600 being different from the technology stack (for example, the web development technology stack) that can invoke the chart library can be effectively solved, so that the purpose that different kinds of APPs (for example, web, APP based on the Android technology stack, APP based on the IOS technology stack, or APP based on the Flutter technology stack, etc.) can invoke the same chart library can be achieved.

[0172] It should be noted that the association relationship between the chart drawing device 600 and the chart drawing display module described above is not limited by the embodiments of the present application. For example, the chart drawing display module can be the chart drawing device 600. For another example, the chart drawing device 600 is deployed in the chart drawing display module.

[0173] Based on the chart drawing method provided by the above method embodiment, the embodiments of the present application further provide a chart drawing system, which will be explained and described below with reference to the accompanying drawings.

[0174] System embodiment

[0175] For technical details of the chart drawing system provided by the system embodiment, please refer to the above method embodiment.

[0176] Referring to Figure 7 The figure is a structural schematic diagram of a chart drawing system provided by the embodiments of the present application.

[0177] The chart drawing system 700 provided by the embodiments of the present application comprises a chart drawing display module 701 and a chart library use module 702. The chart drawing display module 701 is configured to execute any of the embodiments of the chart drawing method provided by the embodiments of the present application. The chart library use module 702 is configured to perform chart drawing on the chart description information provided by the chart drawing display module 701 by using a to-be-used chart library, to obtain chart drawing process data corresponding to the chart description information, and to feed back the chart drawing process data to the chart drawing display module 701.

[0178] For the convenience of understanding, the following describes some possible embodiments.

[0179] In a possible embodiment, the chart drawing display module 701 is configured to generate chart description information of target data after obtaining a chart drawing request triggered by a user for the target data.

[0180] The chart drawing display module 701 is further configured to send the chart description information to the chart library use module 702.

[0181] The chart library use module 702 is configured to perform chart drawing on the chart description information provided by the chart drawing display module 701 by using a to-be-used chart library, to obtain first drawing process description data, and to feed back the first drawing process description data to the chart drawing display module 701.

[0182] The chart drawing display module 701 is further configured to perform analysis processing on the first drawing process description data after obtaining the first drawing process description data fed back by the chart library use module 702 for the chart description information, to obtain a first analysis result. The first analysis result is used to represent a chart drawing process for the target data.

[0183] The chart drawing display module 701 is further configured to draw and display a to-be-displayed chart of the target data according to the first analysis result.

[0184] In a possible embodiment, the chart library use module 702 is specifically configured to perform chart drawing on the target data on a simulated canvas by using a to-be-used chart library, to obtain the first drawing process description data.

[0185] In a possible implementation, the chart drawing display module 701 comprises a real canvas; an implementation technology stack of the real canvas is different from an implementation technology stack of the simulation canvas.

[0186] In a possible implementation, the chart drawing display module 701 comprises a real canvas; the first analysis result is used to describe a chart drawing process of the target data on the real canvas.

[0187] In a possible implementation, the chart drawing display module 701 is further configured to, after obtaining the trigger operation of the user for the to-be-displayed chart, obtain event description information of the trigger operation.

[0188] The chart drawing display module 701 is further configured to send the event description information and a chart identifier of the to-be-displayed chart to the chart library use module 702.

[0189] The chart library use module 702 is configured to perform chart drawing on the event description information and the chart identifier of the to-be-displayed chart provided by the chart drawing display module 701 by using a to-be-used chart library, to obtain second drawing process description data, and to feed back the second drawing process description data to the chart drawing display module 701.

[0190] The chart drawing display module 701 is further configured to, after obtaining the second drawing process description data fed back by the chart library use module 702 for the event description information and the chart identifier of the to-be-displayed chart, perform analysis processing on the second drawing process description data, to obtain a second analysis result.

[0191] The chart drawing display module 701 is further configured to draw and display a response chart of the trigger operation according to the second analysis result.

[0192] In a possible implementation, the chart drawing display module 701 and the chart library use module 702 perform data communication through a cross-technology-stack communication mode (for example, cross-technology-stack communication, etc.). Figures 3-5 The chart drawing display module 701 and the chart library use module 702 perform data communication through a cross-technology-stack communication mode (for example, cross-technology-stack communication, etc.).

[0193] In a possible implementation, the chart drawing display module 701 and the chart library use module 702 perform data communication through a synchronous cross-technology-stack communication mode.

[0194] In a possible implementation, the chart drawing display module 701 and the chart library use module 702 perform data communication through an asynchronous cross-technology-stack communication mode.

[0195] In a possible implementation, the chart drawing display module 701 obtains the user-provided user demand information (for example, the above-mentioned "chart drawing request triggered for target data", or the above-mentioned "trigger operation for the to-be-displayed chart", etc.) through a pre-defined native API (for example, the "native API" shown in the figure). Figure 5

[0196] In a possible implementation, the chart drawing display module 701 can be an electronic device.

[0197] In a possible implementation, the chart drawing display module 701 can be an application (for example, a web, an APP based on an Android technology stack, an APP based on an IOS technology stack, or an APP based on a Flutter technology stack, etc.) capable of running on an electronic device.

[0198] Based on the above-mentioned related content of the chart drawing system 700, for the chart drawing system 700 provided by the embodiments of the present application, the chart drawing system 700 comprises a chart drawing display module 701 and a chart library use module 702, and the working principle of the chart drawing system 700 is as follows: after the chart drawing display module 701 obtains a chart drawing request triggered by a user for target data (for example, daily sales of a product in 2021), the chart drawing display module 701 first generates chart description information of the target data, so that the chart description information can describe the chart drawing demand for the target data (for example, represent the target data in the form of a line chart); then the chart drawing display module 701 sends the chart description information to the chart library use module 702, so that the chart library use module 702 can simulate a chart drawing process for the target data by means of a chart library (for example, a chart library based on JS syntax) that it can call and the chart description information, obtain first drawing process description data, and send the first drawing process description data to the chart drawing display module 701 by the chart library use module 702; then the chart drawing display module 701 analyzes and processes the first drawing process description data to obtain a first analysis result, so that the first analysis result can represent the chart drawing process for the target data (especially, the first analysis result can represent the chart drawing process for the target data in a manner that the chart drawing display module 701 can understand); finally, the chart drawing display module 701 draws and displays a to-be-displayed chart of the target data according to the first analysis result, so that the to-be-displayed chart can meet the chart drawing demand of the user for the target data, thereby achieving the purpose of chart drawing by the user using the chart drawing display module 701.

[0199] ​It can be seen that, since the chart drawing display module 701 performs chart drawing based on the chart drawing process described by the first drawing process description data, rather than performing chart drawing by directly invoking the chart library, the chart drawing display module 701 does not need to consider whether the technology stack used by the chart drawing display module 701 is consistent with the technology stack that can invoke the chart library when performing chart drawing, so that the chart drawing display module 701 can implement the chart drawing process through the data interaction process between the chart drawing display module 701 and the chart library using module 702 regardless of the technology stack used by the chart drawing display module 701. This can effectively solve the problem that the chart drawing display module 701 cannot directly invoke the chart library due to the difference between the technology stack (for example, the Flutter technology stack) used by the chart drawing display module 701 and the technology stack (for example, the web development technology stack) that can invoke the chart library, thereby achieving the purpose that different types of APPs (for example, web, APP based on the Android technology stack, APP based on the IOS technology stack, or APP based on the Flutter technology stack) can invoke the same chart library.

[0200] Further, an apparatus is provided in the embodiments of the present application, and the apparatus includes a processor and a memory:

[0201] The memory is configured to store a computer program.

[0202] The processor is configured to execute any of the embodiments of the chart drawing method according to the computer program.

[0203] Further, a computer readable storage medium is provided in the embodiments of the present application, and the computer readable storage medium is configured to store a computer program, and the computer program is configured to execute any of the embodiments of the chart drawing method.

[0204] Further, a computer program product is provided in the embodiments of the present application, and the computer program product, when running on a terminal device, causes the terminal device to execute any of the embodiments of the chart drawing method.

[0205] It should be understood that in the present application, "at least one" refers to one or more, and "multiple" refers to two or more. "And / or" is used to describe the relationship between the associated objects, which means that there can be three kinds of relationships, for example, "A and / or B" can represent three cases: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally represents an "or" relationship between the associated objects before and after it. "At least one of the following" or similar expressions means any combination of these items, including any combination of single or multiple items. For example, at least one of a, b or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0206] The above is only a preferred embodiment of the present application, and does not limit the present application in any form. Although the present application has been disclosed as above with a preferred embodiment, it is not intended to limit the present application. Any person skilled in the art can make many possible changes and modifications to the present application, or modify it into equivalent embodiments without departing from the scope of the present application. Therefore, any simple modification, equivalent change and modification made to the above embodiments according to the technical essence of the present application, without departing from the scope of the present application, are still within the scope of protection of the present application.

Claims

1. A method for drawing charts, characterized in that, The method, applied to the chart drawing and display module, includes: After receiving a chart drawing request triggered by the user for the target data, the chart description information of the target data is generated; Send the chart description information to the chart library usage module; After obtaining the first drawing process description data fed back by the chart library module for the chart description information, the first drawing process description data is parsed to obtain a first parsing result; wherein, the first drawing process description data is used to represent the chart drawing process for the target data on the simulated canvas, and the first parsing result is used to represent the chart drawing process for the target data on the real canvas of the chart drawing display module, and the chart drawing display module and the chart library module communicate using a cross-technology stack communication method. Based on the first analysis result, draw and display the target data in a chart.

2. The method according to claim 1, characterized in that, The chart library usage module is used to draw charts on a simulated canvas for the target data using the chart library to be used, thereby obtaining the first drawing process description data.

3. The method according to claim 2, characterized in that, The chart drawing and display module includes a real canvas; the implementation technology stack of the real canvas is different from that of the simulated canvas.

4. The method according to claim 1, characterized in that, The chart drawing and display module includes a real canvas; The first parsing result is used to describe the chart drawing process for the target data on the real canvas.

5. The method according to any one of claims 1-4, characterized in that, After displaying the chart containing the target data, the method further includes: After obtaining the user's trigger operation on the chart to be displayed, obtain the event description information of the trigger operation; Send the event description information and the chart identifier of the chart to be displayed to the chart library usage module; After obtaining the second drawing process description data fed back by the chart library module for the event description information and the chart identifier of the chart to be displayed, the second drawing process description data is parsed to obtain the second parsing result; Based on the second analysis result, draw and display the response chart of the triggered operation.

6. A chart drawing device, characterized in that, include: The information generation unit is used to generate chart description information of the target data after receiving a chart drawing request triggered by the user for the target data; The first sending unit is used to send the chart description information to the chart library usage module; The first parsing unit is configured to parse the first drawing process description data fed back by the chart library module for the chart description information after obtaining the first drawing process description data to obtain a first parsing result; wherein, the first drawing process description data is used to represent the chart drawing process for the target data on the simulated canvas, and the first parsing result is used to represent the chart drawing process for the target data on the real canvas of the chart drawing and display module, and the chart drawing and display module communicates with the chart library module using a cross-technology stack communication method. The first display unit is used to draw and display a chart of the target data according to the first analysis result.

7. A chart drawing system, characterized in that, It includes a chart drawing and display module and a chart library usage module; wherein, the chart drawing and display module is used to execute the chart drawing method according to any one of claims 1-6; The chart library usage module is used to use the chart library to be used to draw charts based on the chart requirement information provided by the chart drawing and display module, obtain the chart drawing process data corresponding to the chart requirement information, and feed the chart drawing process data back to the chart drawing and display module.

8. A device, characterized in that, The device includes a processor and a memory: The memory is used to store computer programs; The processor is configured to perform the method according to any one of claims 1-5 according to the computer program.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store a computer program for performing the method of any one of claims 1-5.

10. A computer program product, characterized in that, When the computer program product is run on a terminal device, it causes the terminal device to perform the method according to any one of claims 1-5.

Images