Graph display method and device, electronic device, and storage medium

Abstract

The present application provides a chart display method and device, an electronic device, and a storage medium, wherein the method includes: when a method code executable by a browser interface starts to run, intercepting the method code and obtaining data carried in the method code; converting and processing the data to obtain event information, and sending the event information to the browser, wherein the browser calls the target method code built into its corresponding data visualization chart library and matching the event information to obtain parameters of the corresponding chart to be displayed; receiving the parameters of the chart to be displayed returned by the browser, and displaying the chart to be displayed on the client according to the parameters of the chart to be displayed; thereby achieving the display of a chart in the client with the same display effect as that of the browser, and achieving cross-platform display of charts between the client and the browser.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method and device for displaying charts, electronic equipment, and storage media. Background Art

[0002] Android and iOS (Apple's mobile operating system) each have their own charting libraries. To achieve cross-platform charting between Android and iOS, the current approach is to encapsulate all supported charting components into components callable by React Native (RN), a cross-platform mobile application development framework developed by Facebook. Within React Native, these components are then called to enable cross-platform charting between Android and iOS.

[0003] The existing technology has at least the following deficiencies: 1. In the process of encapsulating the chart components supported by Android and IOS into RN-callable components, a lot of manpower costs are required, and the customization is relatively high, which is not easy to maintain later; 2. The existing technology can only achieve cross-platform between Android and IOS, but in fact there are often cross-platform requirements for mobile clients and browsers, etc. The existing technology cannot meet the needs of other cross-platform chart display. Summary of the Invention

[0004] In view of the above problems, the present application is proposed to provide a diagram display method and device, an electronic device, and a storage medium that overcome the above problems or at least partially solve the above problems, including:

[0005] A method for displaying a chart, comprising:

[0006] When the method code executable by the browser interface starts to run, intercepting the method code and obtaining the data carried in the method code;

[0007] The data is converted and processed to obtain event information, and the event information is sent to the browser, which calls the target method code built into its corresponding data visualization chart library and matched with the event information to obtain the parameters of the corresponding chart to be displayed;

[0008] Receive the parameters of the chart to be displayed returned by the browser, and display the chart to be displayed on the client according to the parameters of the chart to be displayed.

[0009] Optionally, when the method code executable by the browser interface starts to run, intercepting the method code further includes:

[0010] A proxy script is run to intercept the method code executable by the browser interface through the proxy script; the proxy script enumerates the method code executable by the browser interface.

[0011] Optionally, converting the data to obtain event information includes:

[0012] Determining the attribute type of the method code;

[0013] Determining a conversion rule according to the attribute type;

[0014] The data is converted using the conversion rule to obtain event information.

[0015] Optionally, determining a conversion rule according to the attribute type includes:

[0016] When the attribute type is a string type, determining that the conversion rule is a recursive conversion;

[0017] When the attribute type is a function type, the conversion rule is determined to be a string conversion.

[0018] Optionally, the method further includes:

[0019] When the method code is intercepted, a message identifier corresponding to the method code is generated; and the event information includes the message identifier.

[0020] Optionally, the receiving the parameters of the chart to be displayed returned by the browser, and displaying the chart to be displayed on the client according to the parameters of the chart to be displayed, includes:

[0021] receiving the parameters of the chart to be displayed returned by the browser, and using the parameters of the chart to be displayed as the result of executing the callback function corresponding to the message identifier;

[0022] When the callback function corresponding to the message identifier is executed, the execution result of the callback function is obtained, so as to display the chart to be displayed on the client according to the parameters of the chart to be displayed corresponding to the execution result of the callback function.

[0023] Optionally, after displaying the chart to be displayed on the client, the method further includes:

[0024] receiving an adjustment operation for the chart to be displayed;

[0025] The chart to be displayed is adjusted according to the adjustment operation.

[0026] Optionally, adjusting the chart to be displayed according to the adjustment operation includes:

[0027] A preset interception method is called to control the browser to intercept the adjustment operation, and the browser adjusts the chart to be displayed according to the adjustment operation.

[0028] A chart display device, comprising:

[0029] An interception module is used to intercept the method code when the method code executable by the browser interface starts to run, and obtain the data carried in the method code;

[0030] a sending module for converting the data to obtain event information, and sending the event information to a browser, which calls a target method code built into its corresponding data visualization chart library that matches the event information to obtain parameters of the corresponding chart to be displayed;

[0031] The display module is used to receive the parameters of the chart to be displayed returned by the browser, and display the chart to be displayed on the client according to the parameters of the chart to be displayed.

[0032] Optionally, the interception module is further configured to:

[0033] A proxy script is run to intercept the method code executable by the browser interface through the proxy script; the proxy script enumerates the method code executable by the browser interface.

[0034] Optionally, the sending module includes:

[0035] An attribute type determination module, configured to determine the attribute type of the method code;

[0036] A conversion rule determination module, configured to determine a conversion rule according to the attribute type;

[0037] The conversion module is used to convert the data using the conversion rules to obtain event information.

[0038] Optionally, the conversion rule determination module includes:

[0039] a first conversion rule module, configured to determine that the conversion rule is a recursive conversion when the attribute type is a string type;

[0040] The second conversion rule module is configured to determine that the conversion rule is string conversion when the attribute type is a function type.

[0041] Optionally, the device further comprises:

[0042] The message identifier generating module is used to generate a message identifier corresponding to the method code when the method code is intercepted; the event information includes the message identifier.

[0043] Optionally, the display module includes:

[0044] An operation result determination module, configured to receive the parameters of the chart to be displayed returned by the browser, and use the parameters of the chart to be displayed as the operation result of the callback function corresponding to the message identifier;

[0045] The operation result display module is used to obtain the operation result of the callback function when the callback function corresponding to the message identifier is executed, so as to display the chart to be displayed on the client according to the parameters of the chart to be displayed corresponding to the operation result of the callback function.

[0046] Optionally, the device further includes:

[0047] An adjustment operation receiving module, configured to receive an adjustment operation for the chart to be displayed;

[0048] A chart adjustment module is used to adjust the chart to be displayed according to the adjustment operation.

[0049] Optionally, the chart adjustment module is specifically configured to call a preset interception method to control the browser to intercept the adjustment operation, and the browser adjusts the chart to be displayed according to the adjustment operation.

[0050] An electronic device includes a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program implements the steps of the above-mentioned chart display method when executed by the processor.

[0051] A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the above-mentioned chart display method are implemented.

[0052] This application has the following advantages:

[0053] In an embodiment of the present application, when the method code executable by the browser interface starts to run, the method code is intercepted and the data carried in the method code is obtained; the data is converted and processed to obtain event information, and the event information is sent to the browser, and the browser calls the target method code built into its corresponding data visualization chart library and matching the event information to obtain the corresponding parameters of the chart to be displayed; the parameters of the chart to be displayed returned by the browser are received, and the chart to be displayed is displayed on the client according to the parameters of the chart to be displayed; thereby realizing the display of a chart on the client with the same display effect as the browser, and realizing cross-platform display of charts between the client and the browser; in addition, the chart display method provided in the embodiment of the present application utilizes the communication mechanism between RN and the browser, so that the RN code is used to control the chart display on the browser side, and there is no need to encapsulate the chart component, which can reduce the cost of encapsulating the chart component and at the same time improve the flexibility of cross-end display of charts. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] In order to more clearly illustrate the technical solution of the present application, the following is a brief introduction to the drawings required for the description of the present application. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0055] Figure 1 This is a flowchart of the steps of a diagram display method according to an embodiment of the present application;

[0056] Figure 2 This is a diagram of the chart component container contained in the client and the communication process between containers in an embodiment of the present application;

[0057] Figure 3 This is a schematic diagram of the code initialization process and execution process of implementing the chart display method in an example of the first embodiment of the present application;

[0058] Figure 4 This is a structural block diagram of a chart display device according to an embodiment of the present application. DETAILED DESCRIPTION

[0059] To make the above-mentioned purposes, features, and advantages of this application more clearly understood, the present application is further described in detail below with reference to the accompanying drawings and specific embodiments. It is apparent that the embodiments described are only a portion of the embodiments of this application, not all of them. All other embodiments derived by persons of ordinary skill in the art based on the embodiments in this application without inventive effort are also within the scope of protection of this application.

[0060] React is a JS library for building user interfaces; JS is short for JavaScript, a lightweight, interpreted or just-in-time compiled programming language with a function-first approach.

[0061] React Native, referred to as RN, is a cross-platform mobile application development framework developed by Facebook. It is a technology that can use React to create native Android and IOS applications.

[0062] When developing based on cross-platform, the prior art generally chooses RN technology, with native components provided by IOS and Android, and encapsulating the native components into RN-callable components. The method of the prior art can only achieve cross-platform between Android and IOS, but in fact it often also has cross-platform requirements for mobile clients and browsers. Due to grammatical restrictions, the browser's chart library cannot be called in RN. Therefore, the prior art cannot meet the needs of cross-platform display charts between clients and browsers. In addition, the prior art requires a lot of manpower costs in the process of encapsulating the chart components supported by Android and IOS into RN-callable components, and the customization is relatively high, which is not easy to maintain in the later stage.

[0063] In view of this, the embodiments of the present application provide a chart display method and device, electronic device, and storage medium, which monitors the method code executable by the browser interface, intercepts the method code when the method code executable by the browser interface starts to run, and obtains the data carried in the method code; uses preset rules to convert and process the data to obtain event information, and sends the event information to the browser, and the browser calls the target method code built into its corresponding data visualization chart library that matches the event information to obtain the corresponding parameters of the chart to be displayed; receives the parameters of the chart to be displayed returned by the browser, and displays the chart to be displayed on the client according to the parameters of the chart to be displayed; thereby realizing the display of a chart on the client with the same display effect as the browser, and realizing cross-platform display of charts between the client and the browser; in addition, the chart display method provided in the embodiments of the present application utilizes the communication mechanism between RN and the browser, so that the RN code is used to control the chart display on the browser side, and there is no need to encapsulate the chart component, which can reduce the cost of encapsulating the chart component and at the same time improve the flexibility of cross-end display of charts.

[0064] Reference Figure 1 , shows a flowchart of the steps of a chart display method provided by an embodiment of the present application. The method can be applied to terminal devices such as smartphones, tablets, laptops, desktop computers, and vehicle-mounted central control systems, and is used to display browser charts in the client of the terminal device. Among them, the client can include application software such as mobile phone APP, computer client, and mini-program. In the embodiment of the present application, the method can specifically include the following steps:

[0065] Step 101: When the method code executable by the browser interface starts to run, the method code is intercepted and the data carried in the method code is obtained;

[0066] Step 102: convert the data to obtain event information, and send the event information to the browser. The browser calls the target method code built into its corresponding data visualization chart library that matches the event information to obtain the parameters of the corresponding chart to be displayed;

[0067] Step 103: receiving the parameters of the chart to be displayed returned by the browser, and displaying the chart to be displayed on the client according to the parameters of the chart to be displayed.

[0068] In an embodiment of the present application, when the method code executable by the browser interface starts to run, the method code is intercepted and the data carried in the method code is obtained; the data and message identifiers are converted and processed to obtain event information, and the event information is sent to the browser, and the browser calls the target method code built into its corresponding data visualization chart library that matches the event information to obtain the corresponding parameters of the chart to be displayed; the parameters of the chart to be displayed returned by the browser are received, and the chart to be displayed is displayed on the client according to the parameters of the chart to be displayed; thereby, a chart with the same display effect as the browser is displayed on the client, and cross-platform display of charts between the client and the browser is realized.

[0069] Next, the chart display method in this exemplary embodiment will be further described.

[0070] In step 101, when the method code executable by the browser interface starts to run, the method code is intercepted and the data carried in the method code is obtained.

[0071] During the operation of the terminal device, all codes of operation can be obtained, including the method code executable by the browser interface (webview API). When the method code executable by the browser interface is started, it is indicated that there will be a demand for displaying browser charts. Due to grammatical restrictions, the chart library of the browser cannot be called in RN. Therefore, in an embodiment of the present application, when the method code executable by the browser interface starts running, the method code executable by the browser interface is intercepted, and the data carried in the method code executable by the browser interface is obtained, and the data may include method name (methodName), parameters (params). Wherein, method name is used to indicate the need to call the method in the data visualization chart library (echarts) in the browser (webview), and parameters are the parameters required for calling the above method, and method name and parameters are consistent with the requirements of the data visualization chart library interface (echarts API).

[0072] Optionally, when a method code executable by the browser interface is intercepted, a message ID corresponding to the method code executable by the browser interface may be generated and stored in the cache.

[0073] It should be noted that the message identifier and the method code executable by the browser interface are one-to-one corresponding, that is, a method code executable by the browser interface corresponds to a unique message identifier, and a method code can also be uniquely determined by the message identifier.

[0074] In the embodiment of the present application, after each initialization of the webview, the message identifier is incremented from 0 to ensure no duplication.

[0075] In an optional embodiment of the present application, when the method code executable by the browser interface starts to run, intercepting the method code further includes:

[0076] A proxy script is run to intercept the method code executable by the browser interface through the proxy script; the proxy script enumerates the method code executable by the browser interface.

[0077] Proxy scripts are used to add a layer of interception before accessing objects, acting as a filter. In other words, proxy scripts allow us to control external access to objects in a concise and easy-to-understand manner. The advantage of using proxy scripts is that objects only need to focus on core logic, while non-core logic (such as intercepting the target object, or in this example, intercepting the method code executable by the browser interface) can be handled by the proxy script, thus achieving separation of concerns and reducing object complexity.

[0078] In this embodiment, the proxy script enumerates the method codes executable by the browser interface. Therefore, the method codes executable by the browser interface can be intercepted by running the proxy script to fully implement the echarts API in RN, so that the RN code can control the echarts display of the webview.

[0079] In step 102, the data is converted to obtain event information, and the event information is sent to the browser. The browser calls the target method code built into its corresponding data visualization chart library that matches the event information to obtain the corresponding parameters of the chart to be displayed.

[0080] In this embodiment, when intercepting the method code executable by the browser interface, the method name, parameters and other data carried in the method code are obtained, and then the obtained data is processed according to preset rules to obtain event information that meets the requirements of the browser interface. The event information is then sent to the browser through the browser interface, and the browser calls the target method code built into its corresponding data visualization chart library (echarts) that matches the event information, and runs the target method code to obtain the corresponding parameters of the chart to be displayed.

[0081] In the embodiment of the present application, considering that there are generally multiple method codes that can be executed by the browser interface that are actually intercepted, the event information sent to the browser through the browser interface also includes / is associated with the corresponding message identifier. Specifically, the message identifier generated when the method code is intercepted can be converted together with the acquired data to obtain event information containing the message identifier. Alternatively, after the acquired data is converted, the event information can be generated together with the corresponding message identifier. Alternatively, after the acquired data is converted to obtain event information, the event information can be associated with the corresponding message identifier, and so on. The main purpose is to maintain the uniqueness of event information.

[0082] Specifically, the process of the browser calling the target method code built into echarts that matches the event information may include:

[0083] The browser parses the event information to obtain the method name (methodName) of the method code;

[0084] Determine the method with the same name as the method name from the built-in methods of echarts as the target method code.

[0085] The browser can also parse the event information to obtain the method code parameters (params) and message identifier (messageID). The message identifier is used to maintain the uniqueness of the message. The browser runs the above-determined target method code based on the obtained parameters to obtain the corresponding running results, which are the parameters of the chart to be displayed.

[0086] After obtaining the running result, the browser may return the running result together with the corresponding message identifier to the RN.

[0087] In an optional embodiment of the present application, the data is converted and processed to obtain event information, including:

[0088] Determining the attribute type of the method code;

[0089] Determining a conversion rule according to the attribute type;

[0090] The data is converted using the conversion rule to obtain event information.

[0091] Considering that the method code executable by the browser interface in the RN may be a complex JS object, it is not possible to directly use JS built-in methods. For example, when the object is a function type, the JS built-in method will be directly discarded. Therefore, in this embodiment, by determining the attribute type of the method code, then determining a conversion rule based on the attribute type of the method code, and then using the determined conversion rule to convert the data to obtain the corresponding event information, errors can be avoided.

[0092] The above-mentioned conversion rules determined according to the attribute type may specifically include:

[0093] When the attribute type is an object type, determining that the conversion rule is a recursive conversion;

[0094] When the attribute type is a function type, the conversion rule is determined to be a string conversion.

[0095] The attribute types of JS objects can be string, array, or function. In this embodiment, when performing the conversion, it is necessary to determine the attribute type of each object in the method code. If the attribute type is a string type, the current conversion is continued recursively; if the attribute type is a function type, the string conversion method (toString) is called for conversion; if it is neither a string type nor a function type, it can be returned directly.

[0096] In a specific example, the method code in RN is as follows:

[0097]

[0098]

[0099] The method code in the above RN is processed using the processing method provided in the above embodiment to obtain corresponding event information. The code corresponding to the event information is as follows:

[0100]

[0101]

[0102] In step 103, the parameters of the chart to be displayed returned by the browser are received, and the chart to be displayed is displayed on the client according to the parameters of the chart to be displayed.

[0103] In an embodiment of the present application, RN can receive the parameters of the chart to be displayed returned by the browser. When the chart to be displayed needs to be displayed, it can display the chart to be displayed on the client according to the parameters of the chart to be displayed, thereby realizing the display of a chart on the client with the same display effect as the browser.

[0104] The receiving of the parameters of the chart to be displayed returned by the browser and displaying the chart to be displayed on the client according to the parameters of the chart to be displayed may specifically include:

[0105] receiving the parameters of the chart to be displayed returned by the browser, and using the parameters of the chart to be displayed as the result of executing the callback function corresponding to the message identifier;

[0106] When the callback function corresponding to the message identifier is executed, the execution result of the callback function is obtained, so as to display the chart to be displayed on the client according to the parameters of the chart to be displayed corresponding to the execution result of the callback function.

[0107] In a specific implementation, when the RN receives the parameters of the chart to be displayed returned by the browser, it associates the parameters of the chart to be displayed with its corresponding message identifier and stores them as the result of running the callback function corresponding to the message identifier. When the callback function corresponding to the message identifier is run, that is, when the parameter of the callback function is the message identifier, the parameters of the chart to be displayed associated with the message identifier can be obtained based on the association between the message identifier and the parameters of the chart to be displayed. Based on the parameters of the chart to be displayed, the client interface is rendered to display the chart to be displayed on the client.

[0108] Furthermore, in an optional embodiment of the present application, after the client displays the chart to be displayed, the following steps may be further included:

[0109] receiving an adjustment operation for the chart to be displayed;

[0110] The chart to be displayed is adjusted according to the adjustment operation.

[0111] By the chart display method provided in the embodiment of the present application, it is possible to realize displaying all chart components of the data visualization chart library (echarts) of the browser on the client. Therefore, it is possible to receive adjustment operations for the chart to be displayed (i.e. the chart currently displayed by the client) based on the function of each chart component in the data visualization chart library of the browser, and adjust the chart according to the adjustment operation. The adjustment operation may include the operation of modifying the background color of the chart. When the chart is a bar chart, the adjustment operation may also include operations such as modifying the data size of the bar chart, modifying the prompt box, etc. The triggering mode of the adjustment operation is not limited in this embodiment. For example, it can be triggered by gestures, click on controls, etc. The chart display method provided in the embodiment of the present application can realize that the chart of echarts displayed on the client can present the same display effect as the chart of echarts displayed in the browser, and has the same chart editing function.

[0112] Furthermore, considering the triggering method of the chart adjustment event, there may be an issue of incompatibility with other gestures of the client, resulting in failure to respond to the chart adjustment event; in an optional embodiment of the present application, adjusting the chart to be displayed according to the adjustment operation may include:

[0113] A preset interception method is called to control the browser to intercept the adjustment operation, and the browser adjusts the chart to be displayed according to the adjustment operation.

[0114] In this embodiment, a flag can be set for the method code executable by the browser interface to indicate that the chart content corresponding to the method code can be adjusted. When the method code corresponding to the displayed chart is set with the above flag, the preset interception method is called. The preset interception method is used to control the browser (webview) to intercept the adjustment operation. The browser adjusts the chart according to the adjustment operation to prevent the adjustment operation from being intercepted by the outer view (View), resulting in the adjustment operation not responding normally.

[0115] In the embodiment of the present application, when the method code executable by the browser interface starts to run, the method code is intercepted, a message identifier corresponding to the method code is generated, and the data carried in the method code is obtained; the data and message identifier are processed using preset rules to obtain event information, and the event information is sent to the browser, and the browser calls the target method code built into its corresponding data visualization chart library and matching the event information to obtain the corresponding parameters of the chart to be displayed; the parameters of the chart to be displayed returned by the browser are received, and the chart to be displayed is displayed on the client according to the parameters of the chart to be displayed; thereby realizing the display of a chart in the client with the same display effect as the browser, and realizing cross-platform display of charts between the client and the browser; in addition, the chart display method provided in the embodiment of the present application utilizes the communication mechanism between RN and the browser, so that the RN code is used to control the chart display on the browser side, and there is no need to encapsulate the chart component, which can reduce the cost of encapsulating the chart component and at the same time improve the flexibility of cross-end display of charts.

[0116] In order to enable those skilled in the art to more clearly understand the technical solution of this application, Figure 2 and Figure 3 The embodiments of the present application are described illustratively.

[0117] Figure 2 The diagram shows a diagram of a chart component container contained in a client and a communication process between containers in an embodiment of the present application; Figure 3 A schematic diagram showing the code initialization process and execution process of implementing the chart display method in an example of an embodiment of the present application is shown.

[0118] like Figure 2As shown, the chart component containers configured on the client include RN and webview. RN and webview implement two-way communication between RN and webview through JSBridge (JS message communication channel). The webview can run echarts charts on the browser side. That is, the webview is embedded in the client's RN, and the echarts chart on the browser side runs in the webview, and the running results are returned to the RN. The RN displays the corresponding charts on the client interface, thus realizing cross-platform display of charts between the client and the browser.

[0119] Among them, the communication between RN and webview uses messageID to determine the uniqueness of the information. Since asynchronous communication is used in webview, in the embodiment of this application, all interfaces are designed as asynchronous communication during the client development phase to avoid synchronization problems and ensure the uniformity of the interface.

[0120] like Figure 3 As shown, the code initialization process corresponding to the chart display method includes RN initialization, webview JS initialization, and echarts initialization.

[0121] The interface exposed by the client is the RN API, so RN needs to be initialized. After RN initialization is completed, the properties of RN can be modified / set and the events of RN can be bound according to actual needs.

[0122] Webview JS initialization includes both webview initialization and echarts initialization. During webview initialization, initialization code is injected into the webview via injectedJavaScript. An onMessage method is defined within the webview. This onMessage method is used to display a Message message, which is generated by JSProxy intercepting methods in the RN and generating unified message options. After webview initialization is complete, a callback, onLoadEnd, is received. After webview initialization is complete, echarts initialization begins. Specifically, after webview initialization is complete, the executable code injected into the injectedJavaScript property is actively executed to begin echarts initialization. This executable code is dynamically generated by obtaining properties such as width (chart width), height (chart height), and themeName (chart theme). The echarts initialization process includes initializing echarts properties, methods, and references, such as echarts init (initialization), echarts event (events), and echarts options (settings).

[0123] During the execution process, when the echarts API listens to an event operation, it feeds back to the onMessage method in the webview. When the onMessage method receives the information of the above event operation, onLoadEnd will call back the information received by the onMessage method to the Message method and pass it to RN through the Message method. When RN starts to run the method code executable by the webview API, it intercepts the method code, generates the corresponding message ID, and obtains the data carried in the method code; then it uses preset rules to process the data and message ID to obtain event information, and sends the event information to the webview. The webview calls and runs the target method code built into echarts with the same name as the method name of the event information to obtain the corresponding running result, that is, the parameters of the chart to be displayed, and returns the running result to RN. RN displays the corresponding chart on the client based on the running result.

[0124] It should be noted that for the method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present application are not limited by the order of the actions described, because according to the embodiments of the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present application.

[0125] Reference Figure 4 , shows a structural block diagram of an embodiment of a chart display device of the present application, which may specifically include the following modules:

[0126] The interception module 401 is used to intercept the method code executable by the browser interface when the method code starts to run, and obtain the data carried in the method code;

[0127] The sending module 402 is used to convert the data to obtain event information, and send the event information to the browser, so that the browser calls the target method code built into its corresponding data visualization chart library that matches the event information to obtain the parameters of the corresponding chart to be displayed;

[0128] The display module 403 is configured to receive the parameters of the chart to be displayed returned by the browser, and display the chart to be displayed on the client according to the parameters of the chart to be displayed.

[0129] In an optional embodiment of the present application, the interception module 401 is further configured to:

[0130] A proxy script is run to intercept the method code executable by the browser interface through the proxy script; the proxy script enumerates the method code executable by the browser interface.

[0131] Proxy scripts are used to add a layer of interception before accessing objects, acting as a filter. In other words, proxy scripts allow us to control external access to objects in a concise and easy-to-understand manner. The advantage of using proxy scripts is that objects only need to focus on core logic, while non-core logic (such as intercepting the target object, or in this example, intercepting the method code executable by the browser interface) can be handled by the proxy script, thus achieving separation of concerns and reducing object complexity.

[0132] In this embodiment, the proxy script enumerates the method codes executable by the browser interface. Therefore, the proxy script can be run through the interception module 401 to intercept the method codes executable by the browser interface, so as to fully implement the echartsAPI in RN, thereby achieving RN code control of the echarts display of the webview.

[0133] In an optional embodiment of the present application, the sending module 402 includes:

[0134] An attribute type determination module, configured to determine the attribute type of the method code;

[0135] A conversion rule determination module, configured to determine a conversion rule according to the attribute type;

[0136] The conversion module is used to convert the data using the conversion rules to obtain event information.

[0137] Considering that the method code executable by the browser interface in RN may be a complex JS object, it is not possible to directly use JS built-in methods. For example, when the object is a function type, the JS built-in method will be directly discarded. Therefore, in this embodiment, an attribute type determination module is used to determine the attribute type of the method code, and then a conversion rule determination module is used to determine the conversion rule based on the attribute type of the method code. Finally, a conversion module is used to convert the data and message identifier using the determined conversion rule to obtain the corresponding event information, thereby avoiding errors.

[0138] In an optional embodiment of the present application, the conversion rule determination module includes:

[0139] a first conversion rule module, configured to determine that the conversion rule is a recursive conversion when the attribute type is a string type;

[0140] The second conversion rule module is configured to determine that the conversion rule is string conversion when the attribute type is a function type.

[0141] The attribute types of JS objects can be string type, array type, and function type. In this embodiment, the conversion rule determination module needs to determine the attribute type of each object in the method code. If the attribute type is a string type, the first conversion rule module is used to continue the current conversion in a recursive manner; if the attribute type is a function type, the second conversion rule module is used to call the string conversion method (toString) for conversion; if it is neither a string type nor a function type, it can be returned directly.

[0142] In an optional embodiment of the present application, the device further includes:

[0143] The message identifier generating module is used to generate a message identifier corresponding to the method code when the method code is intercepted; the event information includes the message identifier.

[0144] In an optional embodiment of the present application, the display module 403 includes:

[0145] An operation result determination module, configured to receive the parameters of the chart to be displayed returned by the browser, and use the parameters of the chart to be displayed as the operation result of the callback function corresponding to the message identifier;

[0146] The operation result display module is used to obtain the operation result of the callback function when the callback function corresponding to the message identifier is executed, so as to display the chart to be displayed on the client according to the parameters of the chart to be displayed corresponding to the operation result of the callback function.

[0147] In a specific implementation, when the execution result determination module in display module 403 receives the parameters of the chart to be displayed returned by the browser, it associates the parameters of the chart to be displayed with its corresponding message identifier and stores them as the execution result of the callback function corresponding to the message identifier. When the callback function corresponding to the message identifier is executed, that is, when the parameter of the executed callback function is the message identifier, the execution result display module can obtain the parameters of the chart to be displayed associated with the message identifier based on the association between the message identifier and the parameters of the chart to be displayed, and render the client interface based on the parameters of the chart to be displayed, so as to display the chart to be displayed on the client.

[0148] In an optional embodiment of the present application, the device further includes:

[0149] An adjustment operation receiving module, configured to receive an adjustment operation for the chart to be displayed;

[0150] A chart adjustment module is used to adjust the chart to be displayed according to the adjustment operation.

[0151] In an optional embodiment of the present application, the chart adjustment module is specifically configured to call a preset interception method to control the browser to intercept the adjustment operation, and the browser adjusts the chart to be displayed according to the adjustment operation.

[0152] In this embodiment, a flag can be set for the method code executable by the browser interface to indicate that the chart content corresponding to the method code can be adjusted. When the method code corresponding to the displayed chart is set with the above flag, the chart adjustment module is used to call a preset interception method. The preset interception method is used to control the browser (webview) to intercept the adjustment operation. The browser adjusts the chart according to the adjustment operation to prevent the adjustment operation from being intercepted by the outer view (View), resulting in the adjustment operation not responding normally.

[0153] The embodiment of the present application uses an interception module to intercept the method code and obtain the data carried in the method code when the method code executable by the browser interface starts to run; a sending module to convert and process the data to obtain event information, and send the event information to the browser, and the browser calls the target method code built into its corresponding data visualization chart library that matches the event information to obtain the parameters of the corresponding chart to be displayed; a display module to receive the parameters of the chart to be displayed returned by the browser, and display the chart to be displayed on the client according to the parameters of the chart to be displayed; thereby achieving the display of a chart in the client with the same display effect as the browser, and realizing cross-platform display of charts between the client and the browser.

[0154] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0155] An embodiment of the present application also discloses an electronic device, including a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, the steps of the above-mentioned chart display method are implemented.

[0156] The embodiment of the present application further discloses a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the above-mentioned chart display method are implemented.

[0157] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0158] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, devices, or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0159] The embodiments of the present application are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the steps in the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0160] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0161] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable terminal device to implement the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0162] Although preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they become aware of the basic inventive concepts. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present invention.

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

[0164] The above is a detailed introduction to a diagram display method and device, electronic device and storage medium provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for those skilled in the art, according to the ideas of the present application, there may be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A method for displaying a chart, characterized in that: The method comprises: When the method code executable by the browser interface starts to run, intercepting the method code and obtaining the data carried in the method code; The data is converted and processed to obtain event information, and the event information is sent to the browser, which calls the target method code built into its corresponding data visualization chart library and matched with the event information to obtain the parameters of the corresponding chart to be displayed; receiving the parameters of the chart to be displayed returned by the browser, and displaying the chart to be displayed on the client according to the parameters of the chart to be displayed; Wherein, when the method code executable by the browser interface starts to run, intercepting the method code also includes: Running a proxy script to intercept method codes executable by the browser interface through the proxy script; the proxy script enumerates the method codes executable by the browser interface; After the client displays the chart to be displayed, the method further includes: receiving an adjustment operation for the chart to be displayed; A preset interception method is called to control the browser to intercept the adjustment operation, and the browser adjusts the chart to be displayed according to the adjustment operation.

2. The method according to claim 1, characterized in that The converting and processing the data to obtain event information includes: Determining the attribute type of the method code; Determining a conversion rule according to the attribute type; The data is converted using the conversion rule to obtain event information.

3. The method according to claim 2, characterized in that The determining of the conversion rule according to the attribute type includes: When the attribute type is a string type, determining that the conversion rule is a recursive conversion; When the attribute type is a function type, the conversion rule is determined to be a string conversion.

4. The method according to claim 1, wherein The method further comprises: When the method code is intercepted, a message identifier corresponding to the method code is generated; and the event information includes the message identifier.

5. The method according to claim 4, characterized in that The receiving the parameters of the chart to be displayed returned by the browser, and displaying the chart to be displayed on the client according to the parameters of the chart to be displayed, includes: receiving the parameters of the chart to be displayed returned by the browser, and using the parameters of the chart to be displayed as the result of executing the callback function corresponding to the message identifier; When the callback function corresponding to the message identifier is executed, the execution result of the callback function is obtained, so as to display the chart to be displayed on the client according to the parameters of the chart to be displayed corresponding to the execution result of the callback function.

6. A chart display device, characterized in that: The device comprises: An interception module is used to intercept the method code when the method code executable by the browser interface starts to run, and obtain the data carried in the method code; a sending module for converting the data to obtain event information, and sending the event information to a browser, which calls a target method code built into its corresponding data visualization chart library that matches the event information to obtain parameters of the corresponding chart to be displayed; a display module, configured to receive the parameters of the chart to be displayed returned by the browser, and display the chart to be displayed on the client according to the parameters of the chart to be displayed; An adjustment operation receiving module, configured to receive an adjustment operation for the chart to be displayed; A chart adjustment module, configured to adjust the chart to be displayed according to the adjustment operation; Wherein, the interception module further includes: A script running submodule is used to run a proxy script, intercepting the method code executable by the browser interface through the proxy script; the proxy script enumerates the method code executable by the browser interface; Wherein, the chart adjustment module includes: The method calling submodule is used to call a preset interception method to control the browser to intercept the adjustment operation, and the browser adjusts the chart to be displayed according to the adjustment operation.

7. An electronic device, characterized in that: The method comprises a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein when the computer program is executed by the processor, the steps of the chart display method according to any one of claims 1 to 5 are implemented.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the chart display method according to any one of claims 1 to 5 are implemented.

Images