CN110647573A - Chart visual editing method and system based on database technology - Google Patents

Abstract

The present application discloses a method and system for visualizing graph editing based on database technology, and relates to the technical field of graph processing. Identification; waiting to receive an instruction to edit the target chart, when receiving the command, read the corresponding chart data in the background database according to the target chart ID, so that the chart data conversion format is displayed in the chart editing box; waiting to receive the data in the chart editing box Modify the command, modify the data according to the command when receiving the command; wait for receiving the command to save the data in the chart edit box, save the data in the chart edit box when receiving the command; render the saved data Go to the foreground to visualize the chart and convert it to a string again and store it in the background database. It is conducive to persistent storage and display of edited data in the chart.

Description

Chart visualization editing method and system based on database technology

technical field

The present application relates to the technical field of chart processing, and in particular, to a method and system for visual editing of charts based on database technology.

Background technique

In the development process of the software system, the chart is an indispensable part of the system as a visualization tool. The display of the chart can convey the data situation to the user intuitively. Through the integration and classification of the data, the data is easier to understand. Different chart styles And the color also makes the system page more friendly and rich, which is of great help to the overall effect of the software.

The current charting tools are very rich. The commonly used charting tools in the software include ECharts, FusionCharts, HighCharts, Datatables, etc. In addition to providing a variety of charts, the commonly used tools can also edit the foreground data; however, the current chart editing cannot be persistent in the database. Therefore, the data will return to the original data set when the graph is displayed next time, so it cannot meet the requirements of some users that the graph can be edited.

SUMMARY OF THE INVENTION

In view of this, the present application provides a method and system for visual editing of charts based on database technology, which can render edited, modified and saved data to a visual chart in the foreground, and convert the data into strings and store them in a background database; It is convenient for persistent storage of data in the edit box of the chart.

In order to solve the above-mentioned technical problems, the application has the following technical solutions:

A first aspect provides a method for visual editing of charts based on database technology, including:

The background program obtains chart data through analysis and integration;

rendering the chart data to the front-end visual chart, and converting the chart data into a string format;

storing the chart data in the string format in the corresponding field of the background database, and performing ID identification on the chart data in the string format;

Waiting to receive an editing instruction for editing the target chart input by the user: if the editing instruction is not received, continue to wait; if the editing instruction is received, the ID corresponding to the target chart is stored in the background database Read the chart data corresponding to the target chart, split and convert the chart data corresponding to the target chart according to different string formats, so that the chart data corresponding to the target chart is converted into a corresponding format that can be used by the chart and displayed in the Chart edit box;

Waiting to receive a modification instruction input by the user to modify the data in the chart editing box, if the modification instruction is not received, continue to wait; if the modification instruction is received, the modification instruction is performed according to the modification instruction. Modify the data in the chart edit box;

Waiting to receive a save instruction input by the user to save the data in the graph editing box, if the saving instruction is not received, continue to wait; if the saving instruction is received, the data in the graph editing box will be stored. save;

Render the saved data to the front-end visualization chart, and convert the edited data into strings again and store it in the back-end database.

Optionally, where:

Waiting to receive the call command input by the user to call the chart data that has been stored in the background database; if the call command is not received, continue to wait; if the call command is received, directly from the background database The chart data is retrieved from the middle, and the chart data is rendered into the foreground visual chart for display.

Optionally, where:

The graph data includes graph data and tabular data, wherein,

The graph data includes: bar graph, line graph, pie graph and scatter graph;

The table data includes: elements, titles, display colors and chart descriptions.

Optionally, where:

The graph data is stored in the backend database in the form of commas and semicolons.

Optionally, where:

The table data is stored in the form of an array, the single objects in the table data are stored in curly brackets, the single objects are separated by commas, and the cell data is stored in the form of key-value pairs.

In a second aspect, a visualization editing system for charts based on database technology, comprising: an analysis integration module, a data rendering module, a data storage module, a data conversion module, and a data editing module;

The analysis integration module is used for the background program to obtain chart data through analysis integration;

The data rendering module is used for rendering the chart data to the foreground visualization chart, and converting the chart data into a string format;

The data storage module is used for storing the chart data in the string format in the corresponding field of the background database, and performing ID identification on the chart data in the string format;

When the data conversion module receives the editing instruction for editing the target chart input by the user, it reads the chart data corresponding to the target chart in the background database according to the ID corresponding to the target chart, and converts the target chart into The corresponding chart data is split and converted according to different string formats, so that the chart data corresponding to the target chart is converted into a corresponding format usable by the chart and displayed in the chart editing box;

The data editing module is configured to modify the data in the diagram editing box according to the modification instruction when receiving a modification instruction input by the user to modify the data in the diagram editing box;

The data storage module is further configured to save the data in the graph edit box when receiving the save instruction input by the user to save the data in the graph edit box; and convert the edited data into characters again The string is stored in the background database;

The data rendering module is also used for rendering the saved data to the front-end visualization chart.

Optionally, where:

The database technology-based chart visualization editing system further includes a data retrieval module, and the data retrieval module is configured to, when receiving a retrieval instruction input by the user to retrieve the chart data stored in the background database, directly The chart data is retrieved from the background database, and the chart data is rendered into the foreground visual chart for display.

Optionally, where:

The graph data includes graph data and tabular data, wherein,

The graph data includes: bar graph, line graph, pie graph and scatter graph;

The table data includes: elements, titles, display colors and chart descriptions.

Optionally, where:

The graph data is stored in the backend database in the form of commas and semicolons.

Optionally, where:

The table data is stored in the form of an array, the single objects in the table data are stored in curly brackets, the single objects are separated by commas, and the cell data is stored in the form of key-value pairs.

Compared with the prior art, the method and system for visual editing of charts based on database technology described in this application achieve the following effects:

The method and system for visual editing of charts based on database technology provided by this application, by rendering the chart data obtained by the background program analysis and integration to the foreground visual chart, and converting the chart data into a string format; storing the chart data in the string format in a The background database, and ID identification of the chart data; when receiving the editing instruction to edit the target chart input by the user, read the chart data corresponding to the target chart in the background database according to the ID of the target chart, and perform Split and convert, so that the chart data corresponding to the target chart is converted into a usable format of the chart and displayed in the chart edit box; when receiving the modification instruction input by the user to modify the data in the chart edit box, the chart edit box is modified according to the modification instruction. Modify the data in the chart; when receiving the save instruction input by the user to save the data in the chart editing box, save the data in the chart editing box; the saved data is further rendered into the foreground visual chart, and the The data is converted into character strings again and stored in the background database; in this way, while editing and modifying the data of the chart, the updated data can also be saved, which is beneficial to the persistence of the edited data in the chart. It can also ensure the persistent display of the chart data in the front-end visual chart, even after the page is switched, the data before the switch can still be displayed, which meets the user's requirements for visual editing of graphic and table data.

Description of drawings

The drawings described herein are used to provide further understanding of the present application and constitute a part of the present application. The schematic embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation of the present application. In the attached image:

Fig. 1 shows the flowchart of the visualization editing method of chart based on database technology provided by the embodiment of the present application;

FIG. 2 is a schematic diagram of a chart editing frame provided by an embodiment of the present application;

FIG. 3 shows a schematic diagram of graph data provided by an embodiment of the present application;

FIG. 4 shows a schematic diagram of table data provided by the embodiment of the present application;

FIG. 5 shows another flowchart of the method for visual editing of charts based on database technology provided by the embodiment of the present application;

FIG. 6 shows a module diagram of a system for visualizing chart editing based on database technology provided by an embodiment of the present application.

Detailed ways

As used in the specification and claims, certain terms are used to refer to particular components. It should be understood by those skilled in the art that hardware manufacturers may refer to the same component by different nouns. The description and claims do not use the difference in name as a way to distinguish components, but use the difference in function of the components as a criterion for distinguishing. As mentioned in the entire specification and claims, "comprising" is an open-ended term, so it should be interpreted as "including but not limited to". "Approximately" means that within an acceptable error range, those skilled in the art can solve the technical problem within a certain error range, and basically achieve the technical effect. Subsequent descriptions in the specification are preferred embodiments for implementing the present application. However, the descriptions are for the purpose of illustrating the general principles of the present application and are not intended to limit the scope of the present application. The scope of protection of this application should be determined by the appended claims.

The current charting tools are very rich. The commonly used charting tools in the software include ECharts, FusionCharts, HighCharts, Datatables, etc. In addition to providing a variety of charts, the commonly used tools can also edit the foreground data; however, the current chart editing cannot be persistent in the database. Therefore, the data will return to the original data set when the graph is displayed next time, so it cannot meet the requirements of some users that the graph can be edited.

In view of this, the present application provides a method and system for visual editing of charts based on database technology, which can render edited, modified and saved data to a visual chart in the foreground, and convert the data into strings and store them in a background database; It is convenient for persistent storage of data in the edit box of the chart.

The following detailed description will be given in conjunction with the accompanying drawings and specific embodiments.

FIG. 1 shows a flowchart of a method for visualizing graph editing based on database technology provided by an embodiment of the present application. Please refer to FIG. 1. The present application provides a method for visualizing graph editing based on database technology, including:

Step 101, the background program obtains chart data through analysis and integration;

Step 102, rendering the chart data to the front-end visual chart, and converting the chart data into a string format;

Step 103, storing the chart data in the string format in the corresponding field of the background database, and performing ID identification on the chart data in the string format;

Step 104, waiting to receive an editing instruction for editing the target chart input by the user: if the editing instruction is not received, continue to wait; if an editing instruction is received, read the target chart in the background database according to the ID corresponding to the target chart For the corresponding chart data, split and convert the chart data corresponding to the target chart according to different string formats, so that the chart data corresponding to the target chart can be converted into the corresponding format that can be used by the chart and displayed in the chart editing box;

Step 105: Waiting to receive a modification instruction input by the user to modify the data in the chart editing box, if the modification instruction is not received, continue to wait; Revise;

Step 106, waiting to receive a save instruction input by the user to save the data in the graph editing box, if not receiving the saving instruction, continue to wait; if receiving the saving instruction, then saving the data in the graph editing box;

Step 107: Render the saved data to the front-end visual chart, and convert the edited data into strings again and store them in the back-end database.

Specifically, please continue to refer to 1. In order to meet the user's requirement that the edited data of the graph can be persistently stored in the database when editing the graph, the present application provides a method for visualizing graph editing based on database technology, step 101 Make the background program obtain the chart data through analysis and integration, and then render the chart data obtained in step 101 to the foreground visual chart for display through step 102, and at the same time, step 102 also converts the chart data obtained in step 101 into data in string format ; Step 103 is to store the chart data converted into the string format in step 102 into the corresponding field of the background database, and carry out ID identification to the stored chart data; The database here can be selected as an Oracle database, and the field type is clob .

Step 104 is, when the user clicks the corresponding edit button in the chart, that is, after the user inputs an editing instruction to edit the target chart, search for and read the chart corresponding to the target chart in the background database according to the identification ID corresponding to the target chart. Data, convert the read chart data into a format that can be used by the front-end visual chart and display it in the chart editing box, and then wait for the user to view and further modify the data. Step 105 is for the user to edit the chart editing box according to their own needs To modify and adjust the data in the chart edit box, click the save/confirm button corresponding to the chart edit box in step 106 to save the data in the chart edit box after the modification in step 105, if the user does not want to save the modified data, click the cancel button You can return to the chart data read in step 104. Please refer to Figure 2 for the chart editing box; step 107 is to render the data saved in step 106 to the front visual chart for display, and edit, modify, save After the data is converted into strings again and stored in the background database.

The present application provides a method for storing edited, modified and saved data, which is conducive to persistent storage of the edited data in the chart, and can also ensure the persistent display of the chart data in the front-end visual chart, even if After the page is switched, the data before the switch can still be displayed, which meets the user's requirements for visual editing of graph and table data.

Optionally, the present application also provides a method for viewing the modified chart data stored in the background database, specifically: waiting to receive a user input to retrieve the chart data that has been stored in the background database. command; if the call command is not received, continue to wait; if the call command is received, the chart data is directly called from the background database, and the chart data is rendered to the foreground visual chart for display.

Optionally, please refer to FIG. 3 and FIG. 4 , FIG. 3 shows a schematic diagram of graph data provided by an embodiment of the present application; FIG. 4 shows a schematic diagram of table data provided by an embodiment of the present application, and the graph data includes graph data and Tabular data, in which the graph data includes: histogram, line graph, pie chart, and scatter chart, etc. For example, Figure 3 shows a kind of line graph; the tabular data includes: elements, titles, display colors, and chart descriptions, etc. , for example, the table shown in Figure 4 contains information such as titles and elements.

Optionally, the graph data is stored in the backend database in the form of commas and semicolons; the format is for example: "Q1, Q2, Q3, Q4; 200, 100, 300, 400"; the content in the above format, The equivalent graph data object 1 is: 1st quarter, 2nd quarter, 3rd quarter, 4th quarter; graph data object 2 is 200, 100, 300, 400; the data of object 1 and object 2 correspond to each other; The sub-object "1 quarter" corresponds to the first sub-object "200" of object 2, and the second sub-object "2 quarter" of object 1 corresponds to the second sub-object "100" of object 2; the above data is applied to the actual case For example, it can represent business data of RMB 2 million in the first quarter, RMB 1 million in the second quarter, RMB 3 million in the third quarter, and RMB 4 million in the fourth quarter; using the above data to draw the corresponding graph data, for example Column charts, line charts, etc.

Optionally, the table data is stored in the form of an array, the single object in the table data is stored in curly brackets, the single objects are separated by commas, and the cell data is stored in the form of key-value pairs;

The format is for example: "[{'name': 'zhangsan', 'age': '18'}, {'name': 'lisi', 'age': '19'}]" A single record in the table is stored in { }, the table data composed of multiple pieces of data is stored in [], but it is ultimately stored in the database in the form of a string (not an array), {} and [] are used to obtain the table string and then used in the foreground Split characters, there are no concepts like arrays when stored.

FIG. 5 shows another flowchart of the method for visualizing chart editing based on database technology provided by the embodiment of the present application. Please refer to FIG. 5 . Step 201 is that the background program obtains chart data through analysis and integration, and then steps 202 and 203 At the same time, step 202 is to render the chart data obtained in step 201 to the front-end visual chart for display, and step 203 is to convert the chart data obtained in step 201 into a string format, and store it in the database through step 204; When the edit button in the visual chart is visualized in the foreground, the data in the database is obtained into the edit box through step 205, the data in the edit box is edited through step 206, and the save/confirm button on the page is clicked after the editing is completed, and step 207 is: The steps of editing and saving the data in the edit box, and then converting the saved data into strings and storing them in the database, and rendering the saved data to the front-end visual chart for display.

Based on the same inventive concept, the present application also provides a database technology-based chart visualization editing system. FIG. 6 shows a module diagram of the database technology-based chart visualization editing system provided by the embodiment of the present application. 100 includes: an analysis integration module 10, a data rendering module 20, a data storage module 30, a data conversion module 40 and a data editing module 50;

The analysis and integration module 10 is used for the background program to obtain chart data through analysis and integration;

The data rendering module 20 is used to render the chart data to the front-end visual chart, and convert the chart data into a string format; the chart data here includes chart data and table data, and the chart data includes: bar chart, line chart, pie chart and scatter charts, etc., the table data includes: elements, titles, display colors and chart descriptions, etc.;

The graph data is stored in the backend database in the form of commas and semicolons; the format is for example: "Q1, Q2, Q3, Q4; 200, 100, 300, 400"; the content in the above format is equivalent to the graph data Object 1 is: quarter 1, quarter 2, quarter 3, quarter 4; graph data object 2 is 200, 100, 300, 400; the data of object 1 and object 2 correspond to each other; for example, the first child object of object 1 " Quarter 1" corresponds to the first sub-object "200" of object 2, and the second sub-object "Quarter 2" of object 1 corresponds to the second sub-object "100" of object 2; when the above data is applied to an actual case, for example, you can Representative business data: 2 million yuan in the first quarter, 1 million in the second quarter, 3 million in the third quarter, and 4 million in the fourth quarter; use the above data to draw the corresponding graph data, such as bar charts, polylines Figure etc. The table data is stored in the form of an array, the single object in the table data is stored in curly brackets, the single objects are separated by commas, and the cell data is stored in the form of key-value pairs; the format is for example: "[{'name ': 'zhangsan', 'age': '18'}, {'name': 'lisi', 'age': '19'}]"; a single record in the table is stored in {}, which consists of multiple pieces of data The table data is stored in [], but it is ultimately stored in the database in the form of a string (not an array), {} and [] are used to obtain the table string and are used to split characters in the foreground. There is no such concept as an array.

The data storage module 30 is used for storing the chart data in the string format in the corresponding field of the background database, and performing ID identification on the chart data in the string format; the database here can be optionally an Oracle database, and the field type is clob;

When the data conversion module 40 receives the editing instruction inputted by the user to edit the target chart, it reads the chart data corresponding to the target chart in the background database according to the ID corresponding to the target chart, and converts the chart data corresponding to the target chart according to different values. The string format is split and converted, so that the chart data corresponding to the target chart is converted into the corresponding format that can be used by the chart and displayed in the chart edit box;

The data editing module 50 is configured to modify the data in the chart editing box according to the modification instruction when receiving the modification instruction input by the user to modify the data in the chart editing box;

The data storage module 30 is further configured to save the data in the chart edit box when receiving the save instruction input by the user to save the data in the chart edit box; and convert the edited data into a character string and store it in the Background database;

The data rendering module 20 is also used for rendering the saved data to the front-end visualization chart.

Optionally, in addition to the above-mentioned modules, the visualization editing system 100 of the chart based on the database technology of the present application further includes a data retrieval module, and the data retrieval module is used to adjust the chart data stored in the background database when the user input is received. When the fetch instruction is fetched, the chart data is directly fetched from the background database, and the chart data is rendered to the foreground visual chart for display. It is conducive to persistent storage of the edited data in the chart, and meets the user's requirements for visual editing of graphics and table data.

It can be known from the above embodiments that the beneficial effects of the present application are:

The method and system for visual editing of charts based on database technology provided by this application, by rendering the chart data obtained by the background program analysis and integration to the foreground visual chart, and converting the chart data into a string format; storing the chart data in the string format in a The background database, and ID identification of the chart data; when receiving the editing instruction to edit the target chart input by the user, read the chart data corresponding to the target chart in the background database according to the ID of the target chart, and perform Split and convert, so that the chart data corresponding to the target chart is converted into a usable format of the chart and displayed in the chart edit box; when receiving the modification instruction input by the user to modify the data in the chart edit box, the chart edit box is modified according to the modification instruction. Modify the data in the chart; when receiving the save instruction input by the user to save the data in the chart editing box, save the data in the chart editing box; the saved data is further rendered into the foreground visual chart, and the The data is converted into character strings again and stored in the background database; in this way, while editing and modifying the data of the chart, the updated data can also be saved, which is beneficial to the persistence of the edited data in the chart. It can also ensure the persistent display of the chart data in the front-end visual chart, even after the page is switched, the data before the switch can still be displayed, which meets the user's requirements for visual editing of graphic and table data.

It should be understood by those skilled in the art that the embodiments of the present application may be provided as a method, an apparatus, or a computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.

The above description shows and describes several preferred embodiments of the present application, but as mentioned above, it should be understood that the present application is not limited to the form disclosed herein, and should not be regarded as excluding other embodiments, but can be used in various and other combinations, modifications and environments, and can be modified within the scope of the inventive concepts described herein, from the above teachings or from skill or knowledge in the relevant art. However, modifications and changes made by those skilled in the art do not depart from the spirit and scope of the present application, and should all fall within the protection scope of the appended claims of the present application.

Claims (10)

1. A chart visualization editing method based on a database technology is characterized by comprising the following steps:

the background program acquires chart data through analysis and integration;

rendering the chart data to a foreground visual chart, and converting the chart data into a character string format;

storing the chart data in the character string format into a corresponding field of a background database, and carrying out ID identification on the chart data in the character string format;

waiting for receiving an editing instruction for editing the target chart input by a user: if the editing instruction is not received, continuing waiting; if the editing instruction is received, reading the chart data corresponding to the target chart from the background database according to the ID corresponding to the target chart, splitting and converting the chart data corresponding to the target chart according to different character string formats, converting the chart data corresponding to the target chart into a corresponding format which can be used by the chart and displaying the chart data in a chart editing frame;

waiting for receiving a modification instruction which is input by a user and used for modifying the data in the chart edit box, and continuing waiting if the modification instruction is not received; if the modification instruction is received, modifying the data in the chart edit box according to the modification instruction;

waiting for receiving a storage instruction which is input by a user and used for storing the data in the chart edit box, and continuing waiting if the storage instruction is not received; if the storage instruction is received, storing the data in the chart edit box;

and rendering the stored data to a foreground visual chart, converting the edited data into character strings again and storing the character strings to a background database.

2. The visual chart editing method based on the database technology as claimed in claim 1, characterized in that a call instruction for calling the chart data stored in the background database is waited to be received, wherein the call instruction is input by a user; if the calling instruction is not received, continuing waiting; and if the calling instruction is received, directly calling the chart data from a background database, and rendering the chart data to a foreground visual chart for display.

3. A visual chart editing method based on database technology according to claim 1, wherein the chart data includes graph data and table data, wherein,

the graph data includes: a bar graph, a line graph, a pie graph, and a scatter plot;

the table data includes: elements, titles, presentation colors, and graphical illustrations.

4. A chart visualization editing method based on database technology as claimed in claim 3, wherein the chart data is stored in the background database in the form of commas and semicolons.

5. A chart visualization editing method based on database technology as claimed in claim 3, characterized in that said table data is stored in array form, the single objects in said table data are stored in braces, the single objects are separated by commas, and the unit grid data is stored in key value pair form.

6. A chart visualization editing system based on database technology, comprising: the system comprises an analysis integration module, a data rendering module, a data storage module, a data conversion module and a data editing module;

the analysis integration module is used for acquiring diagram data by a background program through analysis integration;

the data rendering module is used for rendering the chart data to a foreground visual chart and converting the chart data into a character string format;

the data storage module is used for storing the chart data in the character string format into a corresponding field of a background database and carrying out ID identification on the chart data in the character string format;

when receiving an editing instruction for editing a target chart input by a user, the data conversion module reads chart data corresponding to the target chart from the background database according to the ID corresponding to the target chart, and splits and converts the chart data corresponding to the target chart according to different character string formats, so that the chart data corresponding to the target chart is converted into a corresponding format which can be used by the chart and is displayed in a chart editing frame;

the data editing module is used for modifying the data in the chart editing frame according to a modification instruction when the modification instruction which is input by a user and used for modifying the data in the chart editing frame is received;

the data storage module is also used for storing the data in the chart edit box when receiving a storage instruction which is input by a user and used for storing the data in the chart edit box; converting the edited data into character strings again and storing the character strings in a background database;

and the data rendering module is also used for rendering the stored data to a foreground visual chart.

7. The database technology based chart visualization editing system according to claim 6, further comprising a data retrieving module, wherein the data retrieving module is configured to, when receiving a retrieval instruction input by a user to retrieve the chart data stored in the background database, directly retrieve the chart data from the background database, and render the chart data to the foreground visualization chart for display.

8. A chart visualization editing system based on database technology as claimed in claim 6, wherein said chart data comprises graph data and table data, wherein,

the graph data includes: a bar graph, a line graph, a pie graph, and a scatter plot;

the table data includes: elements, titles, presentation colors, and graphical illustrations.

9. A chart visualization editing system based on database technology as claimed in claim 8, wherein the chart data is stored in the background database in the form of commas and semicolons.

10. A chart visualization editing system based on database technology as claimed in claim 8, wherein said table data is stored in array form, the single objects in said table data are stored in parenthesis, the single objects are separated by commas, and the unit grid data is stored in key value pair form.

Images