Graphics processing method, device and electronic equipment

Abstract

The present invention discloses a chart processing method, device and electronic device, which relates to the field of automation technology, wherein the method comprises: obtaining an identifier of a target chart component added to a target area; obtaining a preset front-end code segment of a chart corresponding to the identifier; receiving an adjustment instruction for at least one configuration parameter in the target chart component; the configuration parameter comprises a data source; adjusting at least one configuration parameter in the front-end code segment of the chart according to the adjustment instruction to obtain the front-end code segment of the adjusted chart; parsing the front-end code segment of the adjusted chart by a preset parser, and displaying data in the data source in a display style defined by the front-end code segment of the adjusted chart according to the parsing result. The scheme can realize the decoupling between the writing of the front-end display code and the development of a web application, improve the efficiency of chart generation, and eliminate the difference in style between the generated chart and the chart displayed by the developed web application.

Description

Technical Field

[0001] The present application relates to the field of automatic programming technology, and in particular to a chart processing method, device and electronic equipment. Background Art

[0002] At present, in the development process of web applications, construction patterns such as MVC are generally adopted to achieve the purpose of low code coupling, high reusability, low life cycle cost, fast deployment, high maintainability, and conducive to software engineering management. In the MVC software construction pattern, M refers to the Model layer, which is the part of the application used to process the application data logic, for example, the model object is responsible for storing and accessing data in the database; V refers to the View layer, which is the part of the application that processes data display, for example, creating views based on the data provided by the model; C refers to the Controller layer, which is the part of the application that handles user interactions, for example, it is responsible for reading data from the view, controlling user input, and sending data to the model.

[0003] Among them, the view refers to the interface that users see and interact with, which is usually composed of HTML elements. When developing web projects, it can be written in Html or JavaScript. The Model layer includes many models, which represent enterprise data and business rules. The Model layer has the most processing tasks. For example, it can use component objects such as EJBs and ColdFusion Components to process the database. The data returned by the model is neutral, that is, it has nothing to do with the data format. Such a model can provide data for multiple views. Since the code applied to the model only needs to be written once and can be reused by multiple views, the duplication of the code is reduced. The Controller layer receives user input and calls models and views to complete user needs. Therefore, when clicking a link in a web page and sending an HTML form, the controller itself does not output anything or do any processing. It just receives the request and decides which model component to call to process the request, and then determines which view to use to display the returned data.

[0004] Based on the software construction mode of web application, when developers need to communicate with software customizers about the actual display style and display effect of the chart on the user interface, they often need to complete the three-layer code writing of the MVC software architecture before they can communicate; and in order to determine the chart display style with the best display effect, the communication process often requires on-site coding and repeated writing of the same chart display style code. This results in low efficiency in chart generation, and the generated charts are different from the charts displayed in the developed web application in terms of display style. Summary of the invention

[0005] The purpose of the present application is to provide a chart processing method, device and electronic device to improve the efficiency of chart generation and eliminate the difference in display style between the generated chart and the chart displayed by the developed web application.

[0006] To solve the above technical problems, the first aspect of the present specification provides a chart processing method, comprising: obtaining an identifier of a target chart component added to a target area; obtaining a pre-set front-end code segment of a chart corresponding to the identifier, wherein the front-end code segment of the chart is used to define a display style of data in the chart and / or a display style of the chart in a web page; receiving an adjustment instruction for at least one configuration parameter in the target chart component; the configuration parameter includes a data source; according to the adjustment instruction, adjusting at least one configuration parameter in the front-end code segment of the chart to obtain an adjusted front-end code segment of the chart; parsing the adjusted front-end code segment of the chart by a pre-set parser, and according to the parsing result, displaying the data in the data source in the display style defined by the front-end code segment of the adjusted chart to obtain a chart display result.

[0007] In some embodiments, after obtaining the front-end code segment of the adjusted chart and before parsing the front-end code segment of the adjusted chart through a preset parser, it also includes: packaging the front-end code segment of the adjusted chart into a data object in a predetermined format; sending the data object to the parser; the parser receives the data object; accordingly, parsing the front-end code segment of the adjusted chart through a preset parser includes: parsing the data object through a preset parser.

[0008] In some embodiments, after the data object is parsed by a preset parser, the following steps are included: determining whether the data source in the parsing result is a URL; if the data source is not a URL, obtaining data from the data source through the parser; and filling the obtained data into the parsing result.

[0009] In some embodiments, after determining whether the data source in the parsing result is a URL, it also includes: when the data source is a URL, obtaining request data and response data from the parsing result; wherein the request data is the data attribute in the chart to be displayed, and the response data is the data field in the server to be fed back; sending an HTTP request to the database server located by the URL, and receiving feedback data; wherein the HTTP request includes the request data and the response data; and filling the feedback data into the parsing result.

[0010] In some embodiments, when the user has not determined the chart display style, the following operations are repeatedly performed: receiving an adjustment instruction for at least one configuration parameter in the target chart component; the configuration parameter includes a data source; according to the adjustment instruction, adjusting at least one configuration parameter in the front-end code segment of the chart to obtain an adjusted front-end code segment of the chart; parsing the adjusted front-end code segment of the chart by a pre-set parser, and displaying the data in the data source in the display style defined by the front-end code segment of the adjusted chart, so that the user can confirm the chart display effect.

[0011] In some embodiments, the method further includes: receiving a code saving instruction; in response to the code saving instruction, displaying an input entry for a saving path; receiving an input saving path; and saving the front-end code segment of the chart according to the saving path.

[0012] In some embodiments, the saving path includes a file or folder where the front-end code of the web application source code is located.

[0013] The second aspect of the present specification provides a chart processing device, including: a first acquisition unit, used to acquire an identifier of a target chart component added to a target area; a second acquisition unit, used to acquire a preset front-end code segment of a chart corresponding to the identifier, wherein the front-end code segment of the chart is used to define a display style of data in the chart and / or a display style of the chart in a web page; a first receiving unit, used to receive an adjustment instruction for at least one configuration parameter in the target chart component; the configuration parameter includes a data source; an adjustment unit, used to adjust at least one configuration parameter in the front-end code segment of the chart according to the adjustment instruction to obtain an adjusted front-end code segment of the chart; a parsing and displaying unit, used to parse the adjusted front-end code segment of the chart through a preset parser, and based on the parsing result, display the data in the data source in the display style defined by the front-end code segment of the adjusted chart, so that the user can confirm the chart display effect.

[0014] In some embodiments, the device also includes: a packaging unit, used to package the front-end code segment of the adjusted chart into a data object in a predetermined format; a first sending unit, used to send the data object to a parser; a third receiving unit, used for the parser to receive the data object; accordingly, the parsing and displaying unit parses the data object through a pre-set parser.

[0015] In some embodiments, the device also includes: a judgment unit, used to judge whether the data source in the parsing result is a URL; a third acquisition unit, used to obtain data from the data source through a parser when the data source is not a URL; and a first filling unit, used to fill the acquired data into the parsing result.

[0016] In some embodiments, the device also includes: a fourth acquisition unit, used to obtain request data and response data from the parsing result when the data source is a URL; wherein the request data is a data attribute in a chart to be displayed, and the response data is a data field in a server to be fed back; a second sending unit, used to send an HTTP request to the database server located by the URL and receive feedback data; wherein the HTTP request includes the request data and the response data; and a second filling unit, used to fill the feedback data into the parsing result.

[0017] In some embodiments, when the user has not determined the chart display style, the following operations are repeatedly performed: a first receiving unit receives an adjustment instruction for at least one configuration parameter in the target chart component; the configuration parameter includes a data source; an adjustment unit adjusts at least one configuration parameter in the front-end code segment of the chart according to the adjustment instruction to obtain an adjusted front-end code segment of the chart; a parsing and display unit parses the adjusted front-end code segment of the chart through a pre-set parser, and displays the data in the data source in the display style defined by the front-end code segment of the adjusted chart, so that the user can confirm the chart display effect.

[0018] In some embodiments, the device also includes: a fourth receiving unit for receiving a code saving instruction; a display unit for displaying an input entry of a saving path in response to the code saving instruction; a fifth receiving unit for receiving an input saving path; and a saving unit for saving the front-end code segment of the chart according to the saving path.

[0019] The third aspect of this specification provides an electronic device, comprising: a memory and a processor, the processor and the memory are communicatively connected to each other, the memory stores computer instructions, and the processor implements the steps of any one of the methods described in the first aspect by executing the computer instructions.

[0020] A fourth aspect of the present specification provides a computer storage medium, wherein the computer storage medium stores computer program instructions, and when the computer program instructions are executed by a processor, the steps of any one of the methods described in the first aspect are implemented.

[0021] The above-mentioned chart processing method, device and electronic device provide an operable chart component, and for the chart component, provide configuration parameters such as data source, so that the front-end code segment of the chart is generated by the user's addition and adjustment operations on the chart component, making the user's operation simple and convenient; after the front-end code segment is generated, the front-end code segment is parsed by a pre-set parser, and data is displayed according to the parsing result, so that the user can confirm the display effect conveniently; the method realizes the decoupling between the writing of the front-end display code and the development of the web application, and can be executed independently of the web application development project, so that the developer can determine the chart display style with the software customization party in advance before the web application is developed, avoiding repeated modifications during the development process, and improving the efficiency of chart generation; the front-end code segment for generating the chart can be directly used as the front-end code segment in the web application development project, thereby eliminating the difference in display style between the generated chart and the chart displayed by the developed web application. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] In order to more clearly illustrate the implementation methods of the present application or the technical solutions in the prior art, the drawings required for use in the implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some implementation methods recorded in this application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0023] Figure 1 The internal logical structure of the online chart design platform is shown;

[0024] Figure 2 A display interface of an online chart design platform is shown;

[0025] Figure 3 A flowchart showing an embodiment of a diagram processing method provided in this specification;

[0026] Figure 4 A flowchart showing another embodiment of the diagram processing method provided in this specification;

[0027] Figure 5 A principle block diagram of an embodiment of a chart processing device provided in this specification is shown;

[0028] Figure 6 A principle block diagram of another embodiment of the chart processing device provided in this specification is shown;

[0029] Figure 7 A schematic structural diagram of an electronic device according to an embodiment of the present specification is shown. DETAILED DESCRIPTION

[0030] In order to enable those skilled in the art to better understand the technical solutions in this application, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the described embodiments are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of this application.

[0031] In order to improve the efficiency of developers in processing charts and communicating chart display styles, the embodiments of this specification provide an online chart design platform, which can be a website or an application.

[0032] Before starting software development, developers can communicate with the software customizer about the display style of the chart through the online chart design platform. The reason for communicating the display style of the chart through the online chart design platform instead of directly selecting the display style of the chart from the chart display style library is that the amount of data and data change characteristics of the software customizer will affect the display style of the chart and the display effect of the chart on the web page. Only by combining the data of the software customizer to adjust the display style of the chart on the web page can a better display effect be obtained.

[0033] Figure 1 shows the internal logical structure of the online chart design platform, Figure 2 A display interface of an online diagram design platform is shown.

[0034] The online chart design platform provided in the embodiments of this specification can be run independently of the development software of the web application. The purpose of the online chart design platform is two-fold: one is to preview the chart that the user wants by dragging and configuring operations; the other is to generate or parse the code string, save the preview result, and provide it to the parser for use.

[0035] The core of the present invention is that it is different from the general online chart design platform in that it also provides a parser and code string. Based on the traditional development scheme of Vue.JS and ECharts, the above-mentioned "code string" generation and parsing rules are added, so that the online chart design platform can process the chart according to the rules.

[0036] The code string connects the work of each module. Considering the convenience of storage in relational databases such as MySQL, the code string text can use the UTF-8 character set; considering the convenience of HTTP network transmission, the encoding structure can use JSON. The minimum length can be 0, and the maximum length of the view table can be determined according to the complexity, generally not exceeding 1Mb. The code string generation rules can follow the structure of the Vue.JS and JSX component tree.

[0037] like Figure 1 As shown, the online chart design platform includes the following modules: built-in ECharts module, drag module, preview module, and chart generator.

[0038] ECharts is an open source visualization chart library based on JavaScript. The built-in ECharts module is implemented using the open source vue-echarts. Based on the encapsulation of ECharts, it adopts component-based and responsive design ideas and provides a wealth of basic chart template code snippets. For example, code snippets for drawing line charts, code snippets for drawing pie charts, code snippets for drawing bar charts, etc.

[0039] The drag module is implemented using the open source vuedraggable, which logically binds any two elements so that you can use the mouse to drag one element to another, and the data of the element is also passed to the latter. Each drag or configuration operation will record the operation result in the code string, and when previewing, the code string will be transmitted to the parser.

[0040] The preview module can be seen as a superset of the parser. In addition to the core work of parsing code strings, it also provides a variety of interactive methods to facilitate developers to debug charts online in a WYSIWYG manner and supports obtaining data sources from server-side program interfaces or databases.

[0041] The chart generator is a module that reprocesses the chart template code snippets provided by the built-in ECharts module. Users can set static or dynamic charts, the properties and styles of each field and form, design data structures, and combine multiple charts.

[0042] Based on the above specific embodiments, this specification provides a chart processing method, such as Figure 3 As shown, the following steps are included:

[0043] S310: Acquire the identifier of the target chart component added to the target area.

[0044] The target area can be a partition in the user interface, such as Figure 2 The chart editing area shown in . It can also be a folder under the specified path.

[0045] The "add" in this step can be added to the target area by dragging, or by clicking the target chart component and then clicking the target area, or by clicking the add button in the target area to pop up a selection box and selecting the target chart component from the selection box to add to the target area. Of course, other methods can also be used, which will not be listed here one by one.

[0046] Chart components can be bar charts, line charts, scatter charts, tables, and other chart components.

[0047] On the user interaction interface, the symbol of the chart component can be a text symbol or a thumbnail. Each chart component symbol corresponds to an identifier. The identifier can be in any form, for example, it can be "***#1".

[0048] S320: Obtain a preset front-end code segment corresponding to the identifier.

[0049] Each chart component also corresponds to a front-end code segment. The chart component can be generated in advance using an open source software library such as Echarts. After the chart component is generated, the generated chart component is encoded according to a predetermined rule to form an identifier of the chart component.

[0050] The front-end code snippet of the chart is used to define the display style of the data in the chart, for example, the color of the line or bar chart in the chart.

[0051] In some embodiments, the front-end code segment of the chart may also pre-set the display style of the chart in the web page. For example, whether the chart is placed in the center or on the right of the web page, and the size ratio of the chart to the web display page. In other words, how the chart is laid out in the web page.

[0052] In some embodiments, in addition to providing a chart component, a page layout component is also provided. The page layout component may be, for example, a grid layout, a one-column layout, a two-column layout, a left-right layout, and the like.

[0053] In some embodiments, a selection component, a text input component, a number input component, a color selector component, a date selector component, etc. are also provided. Figure 2 The form component shown in or other form components. In the front-end code, the page is also called a form.

[0054] These chart components, page layout components, and form components can be combined together according to predetermined rules to form the front-end code segment of a web page. That is, the development of the entire web page front-end code segment can be realized through the method provided in this specification. The front-end code segment of the web page includes the front-end code segment of the chart, and also includes the front-end code segments of the form component and the page layout component. The front-end code segment of the web page can realize the complete display of a developed application web page. The predetermined rule can be a component tree.

[0055] The front-end code or front-end code segment described in this specification is a code segment used to control the page display content and interact with the user. Specifically, the front-end code segment can control the page content from the time the user stays on the current page to the time a new request is initiated. When the user stays on the current page, the front-end code segment can monitor the user's various behaviors in the browser (such as mouse clicks, keyboard input, scrolling pages, etc.), and can provide corresponding feedback for these behaviors.

[0056] The front-end code snippet can be divided into three layers: structure layer, presentation layer and behavior layer. The structure layer is used to describe what information is in a page and what the relationship between these information is. This layer is technically implemented by HTML technology. The presentation layer determines how the information in the page will be presented. This layer is implemented by CSS technology. The behavior layer controls how the page interacts with the user. This layer is implemented by JS technology.

[0057] In the process of interaction between the front-end code segment and the user, some things can be responded to by the front-end alone. For example, we have made a calculator function on the web page. When the user enters the formula, the front-end code segment can directly calculate the result and display it to the user. The whole process can be completed without the participation of the server. But there are some things that cannot be completed by the front-end code segment alone. At this time, the front-end code segment needs to hand over part of the task to the back-end code segment for processing, and then hand it over to the user after getting the processing result. In this process, the front-end code segment can keep the user on the current page, and the interaction process has good continuity.

[0058] S330: Receive an adjustment instruction for at least one configuration parameter in a target chart component.

[0059] Configuration parameters include: configuration parameters related to data sources and configuration parameters unrelated to data sources.

[0060] The configuration parameters related to the data source refer to the address of the data source, which can be a local storage path, such as an Excel file stored locally as a data source; the address can also be a network address, such as the address of a database, specifically the address of a database server. The database server can refer to a server device entity or database software. For example, MySQL database software.

[0061] Configuration parameters that are not related to the data source refer to parameters that limit the display style of data in the chart, such as the color of the line or bar chart in the chart.

[0062] S340: According to the adjustment instruction, at least one configuration parameter in the front-end code segment of the chart is adjusted to obtain the front-end code segment of the chart after adjustment.

[0063] In the pre-set front-end code segment in the chart, default values ​​are set for various configuration parameters. These default values ​​are only used to display the chart style. Not all default configuration parameters are suitable. Therefore, some or all of the default configurations need to be adjusted.

[0064] S350: parsing the front-end code segment of the adjusted chart by a preset parser, and displaying the data in the data source in a display style defined by the front-end code segment of the adjusted chart according to the parsing result to obtain a chart display result.

[0065] The parser may be a pre-written application program, and the parser application program may be embedded in the online diagram design platform for use.

[0066] It should be noted that the development software used in the web application development process may also be configured with a parser, and the parser mentioned in the prior art is usually a parser configured in the development software. However, the parser described in the method provided in this specification is not a parser in the web application development software.

[0067] Since the front-end code segment of the adjusted chart is used to define the display style of the data in the chart, after the parser completes the parsing of the front-end code segment of the adjusted chart, it will also display the data in the defined display style. Users (specifically, developers and software customizers) can confirm the display effect of the chart based on the display results, and on this basis determine whether such display effect is appropriate or optimal.

[0068] The above-mentioned chart processing method provides an operable chart component, and for the chart component, provides configuration parameters such as data source, so that the front-end code segment of the chart is generated by the user's addition and adjustment operations on the chart component, making the user's operation simple and convenient; after the front-end code segment is generated, the front-end code segment is parsed by a pre-set parser, and data is displayed according to the parsing result, thereby obtaining the chart display result. The method realizes the decoupling between the writing of the front-end display code and the development of the web application, and can be executed independently of the web application development project, so that the developer can determine the chart display style with the software customization party in advance before the web application development, avoid repeated modifications during the development process, and improve the efficiency of chart generation; the front-end code segment for generating the chart can be directly used as the front-end code segment in the web application development project, so that the difference in display style between the generated chart and the chart displayed by the developed web application can be eliminated.

[0069] In some embodiments, when the user has not determined the chart display style, the above steps S330 to S350 are repeated until the user's chart confirmation instruction is received, and the front-end code segment corresponding to the chart confirmed by the user is saved. The front-end code segment corresponding to the chart confirmed by the user can also be used as the front-end code segment of the web application.

[0070] Based on the above specific embodiments, this specification provides another chart processing method, such as Figure 4 As shown, the following steps are included:

[0071] S401: Acquire the identifier of the target chart component added to the target area.

[0072] S402: Acquire a preset front-end code segment corresponding to the identifier.

[0073] S403: Receive an adjustment instruction for at least one configuration parameter in a target chart component.

[0074] S404: According to the adjustment instruction, at least one configuration parameter in the front-end code segment of the chart is adjusted to obtain the front-end code segment of the chart after adjustment.

[0075] For the above steps S401 to S404 , please refer to steps S310 to S340 , which will not be described in detail.

[0076] S405: Packing the adjusted front-end code segment of the chart into a data object in a predetermined format.

[0077] The data object in a predetermined format may be, for example, in JSON format, which is a lightweight data exchange format. The front-end code segment of a chart usually has a large amount of data. Converting the front-end code segment into a data object for transmission can greatly reduce the amount of data transmission and improve transmission efficiency, thereby improving the response speed of the online chart design platform.

[0078] It should be noted that JSON, as a data exchange format, is usually used for HTTP data transmission and front-end data transmission to back-end data in the prior art, and is usually not used to transmit the front-end code written by developers to the parser in the web application development software.

[0079] S406: Send the data object to a preset parser.

[0080] S407: The parser receives the data object.

[0081] S408: Parse the data object through a parser.

[0082] S409: Determine whether the data source in the parsing result is a URL. If not, execute steps S410, S411, and S415; if yes, execute steps S412 to S415.

[0083] S410: Acquire data from a data source through a parser.

[0084] S411: Fill the acquired data into the parsing result.

[0085] S412: Obtain request data and response data from the parsing result.

[0086] The request data is the data attribute in the chart to be displayed, and the response data is the data field in the server to be fed back.

[0087] S413: Send an HTTP request to the database server located by the URL, and receive feedback data.

[0088] Among them, the HTTP request includes request data and response data.

[0089] S414: Fill the feedback data into the parsing result.

[0090] S415: According to the analysis result, the data in the data source is displayed in the display style defined by the front-end code segment of the adjusted chart, so that the user can confirm the display effect of the chart.

[0091] from Figure 4 It can be seen from the method that the parser actually plays a role in visualizing the front-end code segment and providing data.

[0092] In some cases, Figure 3 or Figure 4 The front-end code snippet obtained by the method described above can be copied by the developer to the file or folder where the front-end code of the web application development process is located, for example, copied to the js file, or all the front-end code can be copied to a new file and the new file can be loaded into the web application development project. In some cases, Figure 3 or Figure 4 The method may further include the following steps: receiving a code saving instruction; in response to the code saving instruction, displaying an input entry of a saving path; receiving an input saving path; and saving the front-end code segment of the chart according to the saving path. The saving path may be a file or folder where the front-end code of the web application source code is located, that is, the front-end code segment used to generate the chart confirmed by the user is directly used as the front-end code in the web application source code, and in the process of developing the web application, there is no need to write additional front-end code.

[0093] It can be seen from this that Figure 3 or Figure 4 The method described is actually a visual and simple front-end code programming method. The front-end code segment obtained by this method can be directly used as the front-end code segment of a web application.

[0094] The embodiment of this specification provides a diagram processing device, such as Figure 5 As shown, it includes a first acquisition unit 10, a second acquisition unit 20, a first receiving unit 30, an adjustment unit 40 and a parsing and displaying unit 50.

[0095] The first acquisition unit 10 is used to acquire the identifier of the target chart component added to the target area.

[0096] The second acquisition unit 20 is used to acquire a preset front-end code segment of a chart corresponding to the identifier, and the front-end code segment of the chart is used to define a display style of data in the chart and / or a display style of the chart in a web page.

[0097] The first receiving unit 30 is used to receive an adjustment instruction for at least one configuration parameter in a target chart component; the configuration parameter includes a data source.

[0098] The adjustment unit 40 is used to adjust at least one configuration parameter in the front-end code segment of the chart according to the adjustment instruction to obtain the front-end code segment of the chart after adjustment.

[0099] The parsing and displaying unit 50 is used to parse the front-end code segment of the adjusted chart through a preset parser, and based on the parsing result, display the data in the data source in the display style defined by the front-end code segment of the adjusted chart, so that the user can confirm the chart display effect.

[0100] The above-mentioned chart processing device provides an operable chart component, and for the chart component, provides configuration parameters such as data source, so that the front-end code segment of the chart is generated by the user's addition and adjustment operations on the chart component, making the user's operation simple and convenient; after the front-end code segment is generated, the front-end code segment is parsed by a pre-set parser, and data is displayed according to the parsing result, so that the user can confirm the display effect conveniently; the method realizes the decoupling between the writing of the front-end display code and the development of the web application, and can be executed independently of the web application development project, so that the developer can determine the chart display style with the software customization party in advance before the web application development, avoid repeated modifications during the development process, and improve the efficiency of determining the chart style; the generated front-end code segment can be directly used as the front-end code segment in the web application development project, which greatly improves the efficiency of web application development.

[0101] Figure 6 FIG. 2 shows a functional block diagram of another diagram processing device provided by an embodiment of the present specification. Figure 6 As shown, the device includes a first acquisition unit 10, a second acquisition unit 20, a first receiving unit 30, an adjustment unit 40, a packing unit 60, a first sending unit 70, a third receiving unit 80, a parsing unit 90, a judgment unit 100, a third acquisition unit 110, a first filling unit 120, a fourth acquisition unit 130, a second sending unit 140 and a second filling unit 150.

[0102] The first acquisition unit 10 is used to acquire the identifier of the target chart component added to the target area.

[0103] The second acquisition unit 20 is used to acquire a preset front-end code segment of a chart corresponding to the identifier, and the front-end code segment of the chart is used to define a display style of data in the chart and / or a display style of the chart in a web page.

[0104] The first receiving unit 30 is used to receive an adjustment instruction for at least one configuration parameter in a target chart component; the configuration parameter includes a data source.

[0105] The adjustment unit 40 is used to adjust at least one configuration parameter in the front-end code segment of the chart according to the adjustment instruction to obtain the front-end code segment of the chart after adjustment.

[0106] The packaging unit 60 is used to package the adjusted front-end code segment of the chart into a data object in a predetermined format.

[0107] The first sending unit 70 is used to send the data object to the parser.

[0108] The third receiving unit 80 is used for the parser to receive the data object.

[0109] The parsing unit 90 is used for parsing the data object.

[0110] The determination unit 100 is used to determine whether the data source in the parsing result is a URL.

[0111] The third acquisition unit 110 is used to acquire data from the data source through a parser when the data source is not a URL.

[0112] The first filling unit 120 is used to fill the acquired data into the parsing result.

[0113] The fourth acquisition unit 130 is used to acquire request data and response data from the parsing result when the data source is a URL, wherein the request data is the data attribute in the chart to be displayed, and the response data is the data field in the server to be fed back.

[0114] The second sending unit 140 is used to send an HTTP request to the database server located by the URL and receive feedback data; wherein the HTTP request includes request data and response data.

[0115] The second filling unit 150 is used to fill the feedback data into the parsing result.

[0116] The display unit 160 is used to display the data in the data source in a display style defined by the front-end code segment of the adjusted chart according to the analysis result, so that the user can confirm the display effect of the chart.

[0117] In some embodiments, if the user does not determine the chart display style, the following operations are repeatedly performed:

[0118] The first receiving unit 30 receives an adjustment instruction for at least one configuration parameter in a target chart component; the configuration parameter includes a data source.

[0119] The adjustment unit adjusts at least one configuration parameter in the front-end code segment of the chart according to the adjustment instruction 40 to obtain the front-end code segment of the chart after adjustment.

[0120] The parsing and displaying unit 50 is used to display the data in the data source according to the parsing result and in a display style defined by the front-end code segment of the adjusted chart to obtain a chart display result.

[0121] In some embodiments, the chart processing apparatus further includes a fourth receiving unit 170 , a display unit 180 , a fifth receiving unit 190 and a saving unit 1100 .

[0122] The fourth receiving unit 170 is used to receive a code saving instruction.

[0123] The display unit 180 is used to display an input entry of the saving path in response to the code saving instruction.

[0124] The fifth receiving unit 190 is used to receive an input saving path.

[0125] The saving unit 1100 is used to save the front-end code segment of the chart according to the saving path.

[0126] The description and beneficial effects of the above-mentioned chart processing device can be found in the description and beneficial effects of the method part, which will not be repeated here.

[0127] The embodiment of the present invention further provides an electronic device, such as Figure 7 As shown, the electronic device may include a processor 701 and a memory 702, wherein the processor 701 and the memory 702 may be connected via a bus or other means. Figure 7 The example of connecting through bus is taken in the following.

[0128] The processor 701 may be a central processing unit (CPU). The processor 701 may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or a combination of the above chips.

[0129] The memory 702 is a non-transitory computer-readable storage medium that can be used to store non-transitory software programs, non-transitory computer executable programs and modules, such as program instructions / modules corresponding to the chart processing method in the embodiment of the present invention (for example, Figure 5 The first acquisition unit 10, the second acquisition unit 20, the first receiving unit 30, the adjustment unit 40 and the analysis and display unit 50 shown, or Figure 6The processor 701 executes various functional applications and data classification of the processor by running the non-transient software programs, instructions and modules stored in the memory 702, that is, realizing the chart processing method in the above method embodiment.

[0130] The memory 702 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required by at least one function; the data storage area may store data created by the processor 701, etc. In addition, the memory 702 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device. In some embodiments, the memory 702 may optionally include a memory remotely arranged relative to the processor 701, and these remote memories may be connected to the processor 701 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0131] The one or more modules are stored in the memory 702, and when executed by the processor 701, the following is performed: Figure 3 or Figure 4 The diagram processing method in the illustrated embodiment.

[0132] For details of the above electronic equipment, please refer to Figure 3 or Figure 4 The relevant descriptions and effects in the corresponding embodiments are understood and will not be repeated here.

[0133] This specification provides a computer storage medium, which stores computer program instructions, which, when executed by a processor, implement Figure 3 or Figure 4 The steps of the method are shown.

[0134] This specification provides a computer program product, which includes a computer program, which, when executed by a processor, implements Figure 3 or Figure 4 The steps of the method are shown.

[0135] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the storage medium can be a disk, an optical disk, a read-only memory (ROM), a random access memory (RAM), a flash memory, a hard disk drive (HDD) or a solid-state drive (SSD), etc.; the storage medium can also include a combination of the above-mentioned types of memory.

[0136] In the 1990s, improvements to a technology could be clearly distinguished as hardware improvements (for example, improvements to the circuit structure of diodes, transistors, switches, etc.) or software improvements (improvements to the method flow). However, with the development of technology, many improvements to the method flow today can be regarded as direct improvements to the hardware circuit structure. Designers almost always obtain the corresponding hardware circuit structure by programming the improved method flow into the hardware circuit. Therefore, it cannot be said that an improvement in a method flow cannot be implemented using a hardware entity module. For example, a programmable logic device (PLD) (such as a field programmable gate array (FPGA)) is such an integrated circuit whose logical function is determined by the user's programming of the device. Designers can "integrate" a digital system on a PLD by programming it themselves, without having to ask a chip manufacturer to design and produce a dedicated integrated circuit chip2. Moreover, nowadays, instead of manually making integrated circuit chips, this kind of programming is mostly implemented by "logic compiler" software, which is similar to the software compiler used when developing and writing programs, and the original code before compilation must also be written in a specific programming language, which is called hardware description language (HDL). There is not only one HDL, but many kinds, such as ABEL (Advanced Boolean Expression Language), AHDL (Altera Hardware Description Language), Confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), Lava, Lola, MyHDL, PALASM, RHDL (Ruby Hardware Description Language), etc. The most commonly used ones are VHDL (Very-High-Speed ​​Integrated Circuit Hardware Description Language) and Verilog2. Those skilled in the art should also know that it is only necessary to program the method flow slightly in the above-mentioned hardware description languages ​​and program it into the integrated circuit, and then it is easy to obtain the hardware circuit that implements the logic method flow.

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

[0138] The systems, devices, modules or units described in the above embodiments may be implemented by computer chips or entities, or by products with certain functions.

[0139] For the convenience of description, the above device is described in various units according to their functions. Of course, when implementing the present application, the functions of each unit can be implemented in the same or multiple software and / or hardware.

[0140] It can be known from the description of the above implementation methods that those skilled in the art can clearly understand that the present application can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of the present application can be essentially or partly contributed to the prior art in the form of a software product, which can be stored in a storage medium such as ROM / RAM, a magnetic disk, an optical disk, etc., and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute certain parts of the methods of each implementation method of the present application.

[0141] The present application can be used in many general or special computer system environments or configurations, such as personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc.

[0142] The present application may be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application may also be practiced in distributed computing environments where tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules may be located in local and remote computer storage media, including storage devices.

[0143] Although the present application has been described through embodiments, those skilled in the art will appreciate that there are many modifications and variations to the present application without departing from the spirit of the present application, and it is intended that the appended claims include these modifications and variations without departing from the spirit of the present application.

Claims

1. A chart processing method, characterized in that: include: Get the ID of the target chart component to be added to the target area; Acquire a preset front-end code segment of a chart corresponding to the identifier, wherein the front-end code segment of the chart is used to define a display style of data in the chart and / or a display style of the chart in a web page; receiving an adjustment instruction for at least one configuration parameter in the target chart component; the configuration parameter comprising a data source; According to the adjustment instruction, at least one configuration parameter in the front-end code segment of the chart is adjusted to obtain the front-end code segment of the adjusted chart; The front-end code segment of the adjusted chart is parsed by a preset parser, and according to the parsing result, the data in the data source is displayed in a display style defined by the front-end code segment of the adjusted chart to obtain a chart display result.

2. The method according to claim 1, characterized in that: After obtaining the front-end code segment of the adjusted chart and before parsing the front-end code segment of the adjusted chart by a preset parser, the method further includes: Pack the front-end code snippet of the adjusted chart into a data object in a predetermined format; sending the data object to a parser; The parser receives the data object; Correspondingly, parsing the front-end code segment of the adjusted chart by a preset parser includes: parsing the data object by a preset parser.

3. The method according to claim 2, characterized in that After the data object is parsed by a preset parser, the method includes: Determine whether the data source in the parsing result is a URL; When the data source is not a URL, obtain data from the data source through a parser; Fill the obtained data into the parsing result.

4. The method according to claim 3, characterized in that After determining whether the data source in the parsing result is a URL, it also includes: When the data source is a URL, request data and response data are obtained from the parsing result; wherein the request data is a data attribute in a chart to be displayed, and the response data is a data field in a server to be fed back; Sending an HTTP request to the database server located by the URL, and receiving feedback data; wherein the HTTP request includes the request data and the response data; Fill the feedback data into the parsing result.

5. The method according to claim 1, characterized in that If the user has not determined the chart display style, repeat the following steps: receiving an adjustment instruction for at least one configuration parameter in the target chart component; the configuration parameter comprising a data source; According to the adjustment instruction, at least one configuration parameter in the front-end code segment of the chart is adjusted to obtain the front-end code segment of the adjusted chart; The front-end code segment of the adjusted chart is parsed by a preset parser, and the data in the data source is displayed in a display style defined by the front-end code segment of the adjusted chart, so that the user can confirm the display effect of the chart.

6. The method according to claim 1, characterized in that Also includes: Receive code saving instruction; In response to the code saving instruction, displaying an input entry of a saving path; Receive the input save path; According to the saving path, save the front-end code segment of the chart.

7. The method according to claim 6, characterized in that The storage path includes the file or folder where the front-end code of the web application source code is located.

8. A chart processing device, characterized in that: include: A first acquisition unit is used to acquire an identifier of a target chart component added to a target area; A second acquisition unit is used to acquire a preset front-end code segment of a chart corresponding to the identifier, wherein the front-end code segment of the chart is used to define a display style of data in the chart and / or a display style of the chart in a web page; A first receiving unit, configured to receive an adjustment instruction for at least one configuration parameter in the target chart component; the configuration parameter includes a data source; An adjustment unit, configured to adjust at least one configuration parameter in the front-end code segment of the chart according to the adjustment instruction to obtain the front-end code segment of the chart after adjustment; The parsing and displaying unit is used to parse the front-end code segment of the adjusted chart through a preset parser, and according to the parsing result, display the data in the data source in the display style defined by the front-end code segment of the adjusted chart, so that the user can confirm the chart display effect.

9. The device according to claim 8, characterized in that Also includes: A packaging unit, used for packaging the front-end code segment of the adjusted chart into a data object in a predetermined format; A first sending unit, configured to send the data object to a parser; A third receiving unit, configured to receive the data object through a parser; Correspondingly, the parsing and displaying unit parses the data object through a preset parser.

10. The device according to claim 9, characterized in that Also includes: A judging unit, used to judge whether the data source in the parsing result is a URL; A third acquisition unit is used to acquire data from the data source through a parser when the data source is not a URL; The first filling unit is used to fill the acquired data into the parsing result.

11. The device according to claim 10, characterized in that Also includes: A fourth acquisition unit is used to acquire request data and response data from the parsing result when the data source is a URL; wherein the request data is a data attribute in a chart to be displayed, and the response data is a data field in a server to be fed back; A second sending unit is used to send an HTTP request to the database server located by the URL and receive feedback data; wherein the HTTP request includes the request data and the response data; The second filling unit is used to fill the feedback data into the parsing result.

12. The device according to claim 8, characterized in that If the user has not determined the chart display style, repeat the following steps: The first receiving unit receives an adjustment instruction for at least one configuration parameter in the target chart component; the configuration parameter includes a data source; The adjusting unit adjusts at least one configuration parameter in the front-end code segment of the chart according to the adjustment instruction to obtain the front-end code segment of the chart after adjustment; The parsing and displaying unit parses the front-end code segment of the adjusted chart through a preset parser, and displays the data in the data source in a display style defined by the front-end code segment of the adjusted chart, so that the user can confirm the display effect of the chart.

13. An electronic device, characterized in that: include: A memory and a processor, wherein the processor and the memory are communicatively connected to each other, the memory stores computer instructions, and the processor implements the steps of the method according to any one of claims 1 to 7 by executing the computer instructions.

14. A computer storage medium, characterized in that: The computer storage medium stores computer program instructions, and when the computer program instructions are executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

15. A computer program product, characterized in that The invention comprises a computer program, which implements the steps of the method according to any one of claims 1 to 7 when being executed by a processor.

Images