Data visualization page processing method and device

Abstract

The present application discloses a method and device for processing a data visualization page, which is used in the field of financial technology or other fields. The method includes: obtaining descriptive information and a structured query statement of a chart to be displayed, wherein the structured query statement is used to call the target data information required by the chart to be displayed; determining the label text of the chart to be displayed based on the descriptive information; calling the target data information required by the chart to be displayed based on the structured query statement; storing the target data information in the target position in the label text; converting the label text storing the target data information into an HTML tag through a custom label conversion component; and displaying the target data information on the screen according to a preset chart style based on the HTML tag. Through this application, the problem that developers need to redevelop different display templates when displaying different data or modifying the style of the chart in the related art is solved, which is time-consuming and labor-intensive.

Description

Technical Field

[0001] The present application relates to the field of financial technology, and specifically, to a method and device for processing data visualization pages. Background Art

[0002] With the development of the information age, data is growing exponentially. Faced with complex data, it is difficult to discover the information contained in the data if it is presented only in text form. Categorizing data information according to certain types and displaying it on a large screen with visual elements such as charts can more intuitively allow people to discover the information behind the data. A good large-scale visualization screen not only brings people a visual impact, but also reveals the patterns behind the data. However, the current implementation of data visualization pages requires IT technicians to perform coding development. When it is necessary to display different data or modify the style of the chart, it is necessary to redevelop multiple different display templates, which is time-consuming and labor-intensive.

[0003] When displaying different data or modifying the style of a chart in related technologies, developers need to redevelop different display templates, which makes the design process of data visualization pages time-consuming and labor-intensive. No effective solution has been proposed yet. Summary of the Invention

[0004] The main purpose of this application is to provide a method and device for processing data visualization pages to solve the problem in related technologies that when displaying different data or modifying the style of a chart, developers need to redevelop different display templates, resulting in a time-consuming and labor-intensive design process for data visualization pages.

[0005] To achieve the above-mentioned purpose, according to one aspect of the present application, a method for processing a data visualization page is provided. The method comprises: obtaining description information and a structured query statement of a chart to be displayed, wherein the structured query statement is used to call the target data information required by the chart to be displayed; determining the label text of the chart to be displayed based on the description information, wherein the label is composed of multiple character strings arranged in a preset position; calling the target data information required by the chart to be displayed based on the structured query statement; storing the target data information in the target position in the label text; converting the label text storing the target data information into an HTML tag through a custom tag conversion component; and displaying the target data information on the screen according to a preset chart style based on the HTML tag.

[0006] Furthermore, before obtaining the description information and structured query statement of the chart to be displayed, the method also includes: obtaining a target template selected by the target user, wherein the target template includes multiple chart description information input boxes and multiple chart data source input boxes; receiving the description information of the chart to be displayed through the chart description information input box; and receiving the structured query statement through the chart data source input box.

[0007] Furthermore, based on the description information, determining the label text of the chart to be displayed includes: identifying the description information through semantic recognition to obtain initial feature values ​​of the chart to be displayed, wherein the initial feature values ​​at least include: the type of the chart to be displayed, the width of the chart to be displayed, the height of the chart to be displayed, the theme of the chart to be displayed, and the title of the target template; determining the position of the chart to be displayed through the chart description information input box; adding the type of the target template and the position of the chart to be displayed to the initial feature values ​​to obtain target feature values; and determining the label text of the chart to be displayed based on the target feature values.

[0008] Furthermore, based on the target feature value, determining the label text of the chart to be displayed includes: matching the type of the chart to be displayed in the target feature value in a vocabulary to determine the label text of the chart to be displayed, wherein the vocabulary includes at least: the type of chart, the label text of the chart, and a mapping relationship between the type of chart and the label text of the chart.

[0009] Furthermore, matching the type of the chart to be displayed in the target feature value in the vocabulary also includes: storing the target feature value in a Map; matching the type of the chart to be displayed in the Map with the vocabulary to obtain a target label text, wherein the target label text is composed of multiple character strings arranged in a preset position; storing the width of the chart to be displayed, the height of the chart to be displayed and the subject of the chart to be displayed in the Map to the target position in the target label text to obtain a modified target label text; and using the modified target label text as the label text of the chart to be displayed.

[0010] Furthermore, before calling the target data information required for the chart to be displayed based on the structured query statement, the method also includes: taking the label text of the chart to be displayed, the type of the target template in the Map and the position of the chart to be displayed, the structured query statement and the ID of the target user as the data information created by the target user; and storing the data information in a user-defined screen information table.

[0011] Furthermore, based on the structured query statement, calling the target data information required for the chart to be displayed includes: obtaining the data information created by the target user based on the user-defined screen information table; sorting the data information according to the position information of the chart to be displayed; and calling the target data information required for the chart to be displayed through the structured query statement according to the position order of the chart to be displayed.

[0012] Furthermore, converting the label text with the target data information into the HTML tag through the custom label text conversion component includes: storing the label text storing the target data information in a JSON array according to the position of the chart to be displayed; transmitting the JSON array to the front end; and converting the label storing the target data information into the HTML tag through the custom label text conversion component.

[0013] In order to achieve the above-mentioned purpose, according to another aspect of the present application, a device for processing a data visualization page is provided. The device includes: a first acquisition unit, configured to acquire description information and a structured query statement of a chart to be displayed, wherein the structured query statement is used to call the target data information required by the chart to be displayed; a determination unit, configured to determine the label text of the chart to be displayed based on the description information, wherein the label text is composed of multiple character strings arranged in a preset position; a calling unit, configured to call the target data information required by the chart to be displayed based on the structured query statement; a first storage unit, configured to store the target data information in a target position in the label text; a conversion unit, configured to convert the label text storing the target data information into an HTML tag through a custom label text conversion component; and a display unit, configured to display the target data information on the screen according to a preset chart style based on the HTML tag.

[0014] Furthermore, the device also includes: a second acquisition unit, used to obtain a target template selected by a target user before obtaining the description information and structured query statement of the chart to be displayed, wherein the target template includes multiple chart description information input boxes and multiple chart data source input boxes; a first receiving unit, used to receive the description information of the chart to be displayed through the chart description information input box; and a second receiving unit, used to receive the structured query statement through the chart data source input box.

[0015] Furthermore, the determination unit includes: an identification subunit, used to identify the description information through semantic recognition to obtain the initial feature value of the chart to be displayed, wherein the initial feature value includes at least: the type of the chart to be displayed, the width of the chart to be displayed, the height of the chart to be displayed, the theme of the chart to be displayed, and the title of the target template; a first determination subunit, used to determine the position of the chart to be displayed through the chart description information input box; a first acquisition subunit, used to add the type of the target template and the position of the chart to be displayed to the initial feature value to obtain the target feature value; a second determination subunit, used to determine the label text of the chart to be displayed based on the target feature value.

[0016] Furthermore, the second determination subunit includes: a determination module, used to match the type of the chart to be displayed in the target feature value in the vocabulary to determine the label text of the chart to be displayed, wherein the vocabulary includes at least: the type of chart, the label text of the chart, and the mapping relationship between the type of chart and the label text of the chart.

[0017] Furthermore, the determination module includes: a first storage submodule, used to store the target feature value in a Map; a matching submodule, used to match the type of the chart to be displayed in the Map with the vocabulary to obtain a target label text, wherein the target label text is composed of multiple character strings arranged in a preset position; a second storage submodule, used to store the width of the chart to be displayed in the Map, the height of the chart to be displayed and the subject of the chart to be displayed to the target position in the target label text to obtain a modified target label text; and use the modified target label text as the label text of the chart to be displayed.

[0018] Furthermore, the device also includes: before calling the target data information required by the chart to be displayed based on the structured query statement, the label text of the chart to be displayed, the type of the target template in the Map and the position of the chart to be displayed, the structured query statement and the ID of the target user are used as the data information created by the target user; a second storage unit is used to store the data information in a user-defined screen information table.

[0019] Furthermore, the calling unit includes: a second acquisition sub-unit, used to obtain the data information created by the target user based on the user-defined screen information table; a sorting sub-unit, used to sort the data information according to the position information of the chart to be displayed; and a calling sub-unit, used to call the target data information required by the chart to be displayed through the structured query statement according to the position order of the chart to be displayed.

[0020] Furthermore, the conversion unit includes: a storage subunit, used to store the label text storing the target data information in a JSON array according to the position of the chart to be displayed; a transmission subunit, used to transmit the JSON array to the front end; and a conversion subunit, used to convert the label text storing the target data information into the HTML tag through the custom label text conversion component.

[0021] To achieve the above-mentioned object, according to another aspect of the present application, a computer-readable storage medium is provided, wherein the storage medium includes a stored program, wherein the program executes any one of the above-mentioned methods for processing a data visualization page.

[0022] To achieve the above objectives, according to another aspect of the present application, an electronic device is provided. The electronic device includes one or more processors and a memory, wherein the memory is configured to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement any of the aforementioned methods for processing a data visualization page.

[0023] Through this application, the following steps are adopted: obtaining the description information and structured query statement of the chart to be displayed, wherein the structured query statement is used to call the target data information required by the chart to be displayed; based on the description information, determining the label text of the chart to be displayed, wherein the label text is composed of multiple character strings arranged in a preset position; based on the structured query statement, calling the target data information required by the chart to be displayed; storing the target data information to the target position in the label text; converting the label text storing the target data information into an HTML tag through a custom label text conversion component; based on the HTML tag, displaying the target data information on the screen according to the preset chart style, solving the problem that when displaying different data or modifying the style of the chart in the related art, developers need to redevelop different display templates, resulting in a time-consuming and laborious design process for the data visualization page. Through the description information of the chart to be displayed and the structured query statement that calls the data required by the chart to be displayed, a data visualization page can be realized, thereby achieving the effect of creating a data visualization page efficiently and flexibly. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] The accompanying drawings, which constitute part of this application, are intended to provide a further understanding of this application. The exemplary embodiments and descriptions of this application are intended to explain this application and do not constitute an improper limitation on this application. In the accompanying drawings:

[0025] Figure 1 is a flowchart of a method for processing a data visualization page according to an embodiment of the present application;

[0026] Figure 2 is a flowchart of an optional data visualization page processing method provided according to an embodiment of the present application;

[0027] Figure 3 is a schematic diagram of a data visualization page processing device provided according to an embodiment of the present application;

[0028] Figure 4 It is a structural diagram of an electronic device provided according to an embodiment of the present application. DETAILED DESCRIPTION

[0029] It should be noted that, in the absence of conflict, the embodiments and features of the embodiments in this application can be combined with each other. The present application will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

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

[0031] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequential order. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application described here. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0032] For ease of description, some nouns or terms involved in the embodiments of the present application are explained below:

[0033] HTML: Hypertext Markup Language is a markup language that includes a series of tags that can unify the format of documents on the Internet and connect scattered Internet resources into a logical whole.

[0034] JSON array: JavaScript Object Notation, is a lightweight data exchange format. It is based on a subset of ECMAScript (a JS specification developed by the European Computer Society) and uses a text format that is completely independent of the programming language to store and represent data.

[0035] React.js: is a JavaScript library for building user interfaces. JavaScript ("JS" for short) is a lightweight, interpreted or just-in-time compiled programming language with a function-first approach.

[0036] JsxParser component: is a lightweight Jsx parser; Jsx is a syntax extension of JavaScript used in the React architecture. Its format is more like a template language, but in fact it is completely implemented within JavaScript.

[0037] The present invention will be described below in conjunction with preferred implementation steps. Figure 1 is a flowchart of a method for processing a data visualization page according to an embodiment of the present application, such as Figure 1 As shown, the method includes the following steps:

[0038] Step S101: Obtain description information and a structured query statement of a chart to be displayed.

[0039] For example, when a user needs to create a data visualization page, the user inputs description information of a chart to be displayed and a structured query statement for calling data information required by the chart to be displayed.

[0040] Step S102: Determine the label text of the chart to be displayed based on the description information.

[0041] The label text of the chart to be displayed is determined according to the description information of the chart to be displayed input by the user, wherein the label text of the chart to be displayed is composed of multiple character strings arranged in a preset position.

[0042] Step S103: Calling target data information required for the chart to be displayed according to the structured query statement.

[0043] Through the structured query statement entered by the user, the target data information required for the chart to be displayed is found in the database.

[0044] Step S104: storing the target data information to the target location in the label text.

[0045] The obtained target data information required by the chart to be displayed is stored in the label text of the chart to be displayed.

[0046] Step S105: converting the tag text storing the target data information into an HTML tag through a custom tag text conversion component.

[0047] By using a custom tag text conversion component, these tag texts storing target data information are converted into real HTML tags.

[0048] Step S106: Display the target data information on the screen according to a preset chart style based on HTML tags.

[0049] HTML tags enable these tag texts that store target data information to be displayed on the page.

[0050] Through the above steps, users only need to enter the description of the chart to be displayed and a structured query statement to call the chart's required data. Then, through semantic recognition and custom label text conversion components, a data visualization page that meets the user's needs is generated. This approach greatly shortens the creation time of data visualization pages and improves the efficiency of creating data visualization pages.

[0051] Optionally, in the data visualization page processing method provided in the embodiment of the present application, before obtaining the description information and structured query statement of the chart to be displayed, the method also includes: obtaining the target template selected by the target user, wherein the target template includes multiple chart description information input boxes and multiple chart data source input boxes; receiving the description information of the chart to be displayed through the chart description information input box; and receiving the structured query statement through the chart data source input box.

[0052] For example, the target user can select an appropriate layout template (i.e., the target template) based on their needs. The layout template includes multiple chart description information input boxes and multiple chart data source input boxes. The user enters description information of the chart to be displayed in the chart description information input box. The description information includes information such as the chart type, size, and title. For example, the user selects Template 1 and enters "A line chart with the title "Trend in the number of active users," a width of 100%, a height of 50%, and a theme of bigSreen" in the chart description information input box at position 1. The user enters a structured query statement in the chart data source input box to call the data required for the chart to be displayed.

[0053] When creating a data visualization page, users only need to enter simple language descriptions and structured query statements to create a data visualization page that meets their needs. For users, the operation is simple and convenient.

[0054] Optionally, in the data visualization page processing method provided in the embodiment of the present application, determining the label text of the chart to be displayed based on the descriptive information includes: identifying the descriptive information through semantic recognition to obtain the initial feature value of the chart to be displayed, wherein the initial feature value includes at least: the type of the chart to be displayed, the width of the chart to be displayed, the height of the chart to be displayed, the theme of the chart to be displayed, and the title of the target template; determining the position of the chart to be displayed through the chart description information input box; adding the type of the target template and the position of the chart to be displayed to the initial feature value to obtain the target feature value; and determining the label text of the chart to be displayed based on the target feature value.

[0055] The descriptive information entered by the user is identified through semantic recognition to obtain an initial feature value. The type of the target template and the position of the chart to be displayed are then added to the initial feature value to obtain the target feature value. For example, the target user selects Template 1 and enters "Line chart titled Active User Quantity Trend, Width 100%, Height 50%, Theme BigScreen" in the chart description information input box at Position 1. The corresponding target feature value is then: Chart 1: (template1, line chart, 100%, 50%, BigScreen, Active User Quantity Trend, 1). The above target feature values ​​correspond to (template, chart type, width, height, chart theme, title, position). These target feature values ​​are used to match the label text of the chart to be displayed.

[0056] Semantic recognition can accurately identify the feature values ​​in the descriptive information entered by the user, improving the efficiency of creating data visualization pages.

[0057] Optionally, in the data visualization page processing method provided in the embodiment of the present application, determining the label text of the chart to be displayed based on the target feature value includes: matching the type of the chart to be displayed in the target feature value in the vocabulary to determine the label text of the chart to be displayed, wherein the vocabulary includes at least: the type of chart, the label text of the chart, and the mapping relationship between the type of chart and the label text of the chart.

[0058] The label text of the chart to be displayed is determined by matching the type of the chart to be displayed in the target feature value with the vocabulary. For the vocabulary, the words commonly used to describe the chart style on the data visualization page (for example, line chart, bar chart, scatter chart) are added to the vocabulary, and a mapping relationship is established between these words describing the chart style and the label text of the corresponding chart type, for example: line chart—— <LineChart option={lineChartOption}formatter={formatter}width={input_width}height={input_height}theme={input_theme} / > ——{lineChartOption} (where lineChartOption is a JSONObject object). The label text corresponding to the line chart is as shown above, consisting of multiple strings arranged in fixed positions.

[0059] By adding commonly used chart descriptions (e.g., line chart, bar chart, scatter plot) to the vocabulary and mapping these chart descriptions to the corresponding chart labels, we can quickly and accurately match the labels of the charts we want to display.

[0060] Optionally, in the data visualization page processing method provided in the embodiment of the present application, matching the type of the chart to be displayed in the target feature value in the vocabulary also includes: storing the target feature value in a Map; matching the type of the chart to be displayed in the Map with the vocabulary to obtain a target label text, wherein the target label text is composed of multiple character strings arranged in a preset position; storing the width of the chart to be displayed, the height of the chart to be displayed and the subject of the chart to be displayed in the Map to the target position in the target label text to obtain a modified target label text; and using the modified target label text as the label text of the chart to be displayed.

[0061] For example, the target feature value is chart 1: (template 1, line chart, 100%, 50%, bigScreen, active user number trend, 1), the target feature value is stored in a Map to obtain {"template_id":"template1","chart_type":"line chart","input_width":"100%","input_height":"50%","input_theme":"bigScreen","input_title":"active user number trend","position":"1"}. According to the value corresponding to chart_type (for example, line chart), match the words describing the chart style in the vocabulary to obtain the corresponding chart label text. For example, if chart_type is "line chart", then the target label text matched in the vocabulary is <LineChartoption={lineChartOption}formatter={formatter}width={input_width}height={input_height}theme={input_theme} / > Then, the width, height, and theme of the chart to be displayed in the Map are stored in the target location of the target label text to obtain the modified target label text. The chart width and length information need to be replaced with CSS styles, namely wh and vh. For example, the label text information assembled from the information of Chart 1 is: <LineChart option={lineChartOption}formatter={formatter}width={"100wh"}height={"50vh"}theme={"bigScreen"} / > .

[0062] The target feature values ​​are stored in a Map, which is then used to match them against the chart patterns in the vocabulary. A Map is a structure that stores elements as key-value pairs and provides member functions to facilitate efficient insertion, identification, and deletion of keys. Therefore, using a Map allows for rapid matching of target feature values ​​with the vocabulary.

[0063] Optionally, in the data visualization page processing method provided in the embodiment of the present application, before calling the target data information required for the chart to be displayed based on the structured query statement, the method also includes: taking the label text of the chart to be displayed, the type of the target template in the Map and the position of the chart to be displayed, the structured query statement and the ID of the target user as the data information created by the target user; and storing the data information in the user-defined screen information table.

[0064] The label text of the chart to be displayed, the type of the target template in the Map and the position of the chart to be displayed, the structured query statement and the ID of the target user are stored in the user-defined screen information table.

[0065] The user ID and user-defined large-screen data (i.e., the label text of the chart to be displayed, the type of target template in the Map and the position of the chart to be displayed, and the structured query statement) are stored in the data table together, so as to facilitate the subsequent acquisition of data information of the target user-defined data visualization page.

[0066] Optionally, in the data visualization page processing method provided in the embodiment of the present application, calling the target data information required for the chart to be displayed based on the structured query statement includes: obtaining the data information created by the target user based on the user-defined screen information table; sorting the data information according to the position information of the chart to be displayed; and calling the target data information required for the chart to be displayed through the structured query statement according to the position order of the chart to be displayed.

[0067] The user-defined screen information table is used to query the data information created by the target user, and the queried data information is sorted in ascending order according to the position information of the chart to be displayed. According to the order of the position of the chart to be displayed, the structured query statement is used to search the database for the data information required for the chart to be displayed.

[0068] Structured query is a non-procedural language that can access multiple records simultaneously and is the common language of all relational databases. Structured query provides very simple instructions for querying, inserting, deleting, and modifying data and objects. Using structured query statements to access data improves efficiency.

[0069] Optionally, in the data visualization page processing method provided in an embodiment of the present application, converting the label text containing the target data information into an HTML tag through a custom label text conversion component includes: storing the label storing the target data information in a JSON array according to the position of the chart to be displayed; transmitting the JSON array to the front end; and converting the label text storing the target data information into the HTML tag through the custom label text conversion component.

[0070] After processing all the charts to be displayed in the order of the chart positions, all the tags with data information are stored in a JSON array in the order of the chart positions, and the JSON array is returned to the front end (for example, the front end can be React.js). After receiving the JSON array returned by the back end, the front end will also convert these tag texts into real HTML tags in the order of the chart positions through a custom tag text conversion component (for example, a JsxParser component), so that the target data information can be displayed on the page according to the preset chart style.

[0071] The processing method of the data visualization page provided by the embodiment of the present application is through obtaining the description information and structured query statement of the chart to be displayed, wherein the structured query statement is used to call the target data information required by the chart to be displayed; based on the description information, the label text of the chart to be displayed is determined, wherein the label text is composed of multiple character strings arranged in a preset position; based on the structured query statement, the target data information required by the chart to be displayed is called; the target data information is stored in the target position in the label text; the label text storing the target data information is converted into an HTML tag through a custom label text conversion component; based on the HTML tag, the target data information is displayed on the screen according to the preset chart style, which solves the problem in the related art that when displaying different data or modifying the style of the chart, the developer needs to redevelop different display templates, resulting in a time-consuming and laborious design process for the data visualization page. Through the description information of the chart to be displayed and the structured query statement for calling the data required by the chart to be displayed, the data visualization page can be realized, thereby achieving the effect of creating data visualization pages efficiently and flexibly.

[0072] like Figure 2The figure shows a flowchart of an optional data visualization page processing method provided according to an embodiment of the present application. In the first step, the user selects a blank template for the visualization large-screen page layout and names the blank template; in the second step, the user enters the description information of the chart to be displayed at this position in the input box at the given position, and fills in the structured query statement for calling the data required for the chart; in the third step, the semantic parsing module extracts information about the chart in the text description, such as the chart name, chart type, chart length and width, etc.; in the fourth step, the label assembly module matches the label text of the corresponding chart type in the vocabulary according to the chart type parsed by the semantic parsing module, and then inserts the other information of the chart into the corresponding attributes in the label text; in the fifth step, after the user submits and saves the customized page, the data storage module compares the label text assembled by the label assembly module with the user ID, chart location, etc. The information such as the structured query for setting and obtaining data is stored in the corresponding data table; in the fifth step, the user selects his customized visualization instance, and the chart display module queries the basic information of the instance in the data table, and then sorts it from small to large according to the position of the chart, executes the structured query statement of the corresponding chart in sequence, and assembles the obtained data into the information required for the label text, and inserts it into the label text; after all the label texts are processed, all the label texts with data information are stored in the JSON array according to the position of the chart, and the custom label conversion component takes out the corresponding label string according to the position of the chart, and parses the label string into a real HTML tag, and finally displays the user-customized data visualization page.

[0073] It should be noted that the steps shown in the flowcharts of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and that, although a logical order is shown in the flowcharts, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0074] The present application also provides a data visualization page processing device. It should be noted that the data visualization page processing device of the present application embodiment can be used to execute the data visualization page processing method provided in the present application embodiment. The data visualization page processing device provided in the present application embodiment is introduced below.

[0075] Figure 3 Schematic diagram of a data visualization page processing device according to an embodiment of the present application. Figure 3 As shown, the device includes: a first acquisition unit 301, a determination unit 302, a calling unit 303, a first storage unit 304, a conversion unit 305 and a display unit 306.

[0076] The first acquiring unit 301 is configured to acquire description information of a chart to be displayed and a structured query statement, wherein the structured query statement is used to call target data information required by the chart to be displayed.

[0077] The determining unit 302 is configured to determine the label text of the chart to be displayed according to the description information, wherein the label text is composed of a plurality of character strings arranged in a preset position.

[0078] The calling unit 303 is used to call the target data information required for the chart to be displayed according to the structured query statement.

[0079] The first storage unit 304 is configured to store the target data information in a target location in the label text.

[0080] The conversion unit 305 is configured to convert the tag text storing the target data information into an HTML tag through a custom tag text conversion component.

[0081] The display unit 306 is used to display the target data information on the screen according to a preset chart style based on HTML tags.

[0082] In summary, the processing device of the data visualization page provided by the embodiment of the present application obtains the description information and structured query statement of the chart to be displayed through the first acquisition unit 301; the determination unit 302 determines the label text of the chart to be displayed based on the description information, wherein the label text is composed of multiple character strings arranged in a preset position; the calling unit 303 calls the target data information required by the chart to be displayed based on the structured query statement; the first storage unit 304 stores the target data information to the target position in the label text; the conversion unit 305 converts the label text storing the target data information into an HTML tag through a custom label text conversion component; the display unit 306 displays the target data information on the screen according to the preset chart style based on the HTML tag, which solves the problem in the related art that when displaying different data or modifying the style of the chart, the developer needs to redevelop different display templates, resulting in a time-consuming and laborious design process for the data visualization page. Through the description information of the chart to be displayed and the structured query statement for calling the data required by the chart to be displayed, the data visualization page can be realized, thereby achieving the effect of creating the data visualization page efficiently and flexibly.

[0083] Optionally, in the processing device for the data visualization page provided in the embodiment of the present application, the device also includes: a second acquisition unit, used to obtain the target template selected by the target user before obtaining the description information and structured query statement of the chart to be displayed, wherein the target template includes multiple chart description information input boxes and multiple chart data source input boxes; a first receiving unit, used to receive the description information of the chart to be displayed through the chart description information input box; and a second receiving unit, used to receive the structured query statement through the chart data source input box.

[0084] Optionally, in the processing device of the data visualization page provided in the embodiment of the present application, the determination unit includes: an identification subunit, which is used to identify the description information through semantic recognition to obtain the initial feature value of the chart to be displayed, wherein the initial feature value includes at least: the type of the chart to be displayed, the width of the chart to be displayed, the height of the chart to be displayed, the theme of the chart to be displayed, and the title of the target template; a first determination subunit, which is used to determine the position of the chart to be displayed through the chart description information input box; a first acquisition subunit, which is used to add the type of the target template and the position of the chart to be displayed to the initial feature value to obtain the target feature value; and a second determination subunit, which is used to determine the label text of the chart to be displayed based on the target feature value.

[0085] Optionally, in the processing device of the data visualization page provided in the embodiment of the present application, the second determination subunit includes: a determination module, used to match the type of the chart to be displayed in the target feature value in the vocabulary to determine the label text of the chart to be displayed, wherein the vocabulary includes at least: the type of chart, the label text of the chart, and the mapping relationship between the type of chart and the label text of the chart.

[0086] Optionally, in the processing device of the data visualization page provided in the embodiment of the present application, the determination module includes: a first storage submodule, used to store the target feature value in a Map; a matching submodule, used to match the type of the chart to be displayed in the Map with the vocabulary to obtain the target label text, wherein the target label text is composed of multiple character strings arranged in a preset position; a second storage submodule, used to store the width of the chart to be displayed in the Map, the height of the chart to be displayed and the subject of the chart to be displayed to the target position in the target label text to obtain the modified target label text; and use the modified target label text as the label text of the chart to be displayed.

[0087] Optionally, in the processing device of the data visualization page provided in the embodiment of the present application, the device also includes: before calling the target data information required for the chart to be displayed based on the structured query statement, the label text of the chart to be displayed, the type of the target template in the Map and the position of the chart to be displayed, the structured query statement and the ID of the target user are used as data information created by the target user; a second storage unit is used to store the data information in a user-defined screen information table.

[0088] Optionally, in the processing device of the data visualization page provided in the embodiment of the present application, the calling unit includes: a second acquisition sub-unit, used to obtain data information created by the target user based on the user-defined screen information table; a sorting sub-unit, used to sort the data information according to the position information of the chart to be displayed; and a calling sub-unit, used to call the target data information required for the chart to be displayed through a structured query statement according to the position order of the chart to be displayed.

[0089] Optionally, in the processing device of the data visualization page provided in the embodiment of the present application, the conversion unit includes: a storage subunit, used to store the label text storing the target data information in a JSON array according to the position of the chart to be displayed; a transmission subunit, used to transmit the JSON array to the front end; and a conversion subunit, used to convert the label text storing the target data information into an HTML tag through a custom label text conversion component.

[0090] The processing device of the data visualization page includes a processor and a memory. The above-mentioned first acquisition unit 301, determination unit 302, calling unit 303, first storage unit 304, conversion unit 305 and display unit 306 are all stored in the memory as program units, and the processor executes the above-mentioned program units stored in the memory to realize corresponding functions.

[0091] The processor contains a kernel, which calls the corresponding program unit from the memory. One or more kernels can be set, and the data visualization page can be realized by adjusting the kernel parameters.

[0092] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0093] An embodiment of the present invention provides a computer-readable storage medium having a program stored thereon, which implements the method for processing the data visualization page when the program is executed by a processor.

[0094] An embodiment of the present invention provides a processor, which is used to run a program, wherein the method for processing the data visualization page is executed when the program is run.

[0095] like Figure 4 As shown, an embodiment of the present invention provides an electronic device, which includes a processor, a memory, and a program stored in the memory and executable on the processor. When the processor executes the program, the following steps are implemented: obtaining description information and a structured query statement of a chart to be displayed, wherein the structured query statement is used to call target data information required for the chart to be displayed; determining a label text of the chart to be displayed based on the description information, wherein the label text is composed of multiple character strings arranged in a preset position; calling the target data information required for the chart to be displayed based on the structured query statement; storing the target data information in the target position in the label text; converting the label text storing the target data information into an HTML tag through a custom label text conversion component; and displaying the target data information on the screen according to a preset chart style based on the HTML tag.

[0096] Optionally, before obtaining the description information and structured query statement of the chart to be displayed, the method also includes: obtaining a target template selected by the target user, wherein the target template includes multiple chart description information input boxes and multiple chart data source input boxes; receiving the description information of the chart to be displayed through the chart description information input box; and receiving the structured query statement through the chart data source input box.

[0097] Optionally, determining the label text of the chart to be displayed based on the description information includes: identifying the description information through semantic recognition to obtain initial feature values ​​of the chart to be displayed, wherein the initial feature values ​​include at least: the type of the chart to be displayed, the width of the chart to be displayed, the height of the chart to be displayed, the theme of the chart to be displayed, and the title of the target template; determining the position of the chart to be displayed through the chart description information input box; adding the type of the target template and the position of the chart to be displayed to the initial feature values ​​to obtain target feature values; and determining the label text of the chart to be displayed based on the target feature values.

[0098] Optionally, determining the label text of the chart to be displayed based on the target feature value includes: matching the type of the chart to be displayed in the target feature value in a vocabulary to determine the label text of the chart to be displayed, wherein the vocabulary includes at least: the type of chart, the label text of the chart, and a mapping relationship between the type of chart and the label text of the chart.

[0099] Optionally, matching the type of the chart to be displayed in the target feature value in the vocabulary also includes: storing the target feature value in a Map; matching the type of the chart to be displayed in the Map with the vocabulary to obtain a target label text, wherein the target label text is composed of multiple character strings arranged in a preset position; storing the width of the chart to be displayed, the height of the chart to be displayed and the subject of the chart to be displayed in the Map to the target position in the target label text to obtain a modified target label text; and using the modified target label text as the label text of the chart to be displayed.

[0100] Optionally, before calling the target data information required for the chart to be displayed based on the structured query statement, the method further includes: taking the label text of the chart to be displayed, the type of the target template in the Map and the position of the chart to be displayed, the structured query statement and the ID of the target user as the data information created by the target user; and storing the data information in a user-defined screen information table.

[0101] Optionally, based on the structured query statement, calling the target data information required for the chart to be displayed includes: obtaining the data information created by the target user based on the user-defined screen information table; sorting the data information according to the position information of the chart to be displayed; and calling the target data information required for the chart to be displayed through the structured query statement according to the position order of the chart to be displayed.

[0102] Optionally, converting the label text containing the target data information into an HTML tag using a custom label text conversion component includes: storing the label text containing the target data information in a JSON array according to the position of the chart to be displayed; transmitting the JSON array to the front end; and converting the label text containing the target data information into an HTML tag using the custom label text conversion component. The device herein may be a server, a PC, a PAD, a mobile phone, etc.

[0103] The present application also provides a computer program product, which, when executed on a data processing device, is suitable for executing an initialized program having the following method steps: obtaining description information and a structured query statement of a chart to be displayed, wherein the structured query statement is used to call the target data information required for the chart to be displayed; determining the label text of the chart to be displayed based on the description information, wherein the label text is composed of multiple character strings arranged in a preset position; calling the target data information required for the chart to be displayed based on the structured query statement; storing the target data information in the target position in the label text; converting the label text storing the target data information into an HTML tag through a custom label text conversion component; and displaying the target data information on the screen according to a preset chart style based on the HTML tag.

[0104] Optionally, before obtaining the description information and structured query statement of the chart to be displayed, the method also includes: obtaining a target template selected by the target user, wherein the target template includes multiple chart description information input boxes and multiple chart data source input boxes; receiving the description information of the chart to be displayed through the chart description information input box; and receiving the structured query statement through the chart data source input box.

[0105] Optionally, determining the label text of the chart to be displayed based on the description information includes: identifying the description information through semantic recognition to obtain initial feature values ​​of the chart to be displayed, wherein the initial feature values ​​include at least: the type of the chart to be displayed, the width of the chart to be displayed, the height of the chart to be displayed, the theme of the chart to be displayed, and the title of the target template; determining the position of the chart to be displayed through the chart description information input box; adding the type of the target template and the position of the chart to be displayed to the initial feature values ​​to obtain target feature values; and determining the label text of the chart to be displayed based on the target feature values.

[0106] Optionally, determining the label text of the chart to be displayed based on the target feature value includes: matching the type of the chart to be displayed in the target feature value in a vocabulary to determine the label text of the chart to be displayed, wherein the vocabulary includes at least: the type of chart, the label text of the chart, and a mapping relationship between the type of chart and the label text of the chart.

[0107] Optionally, matching the type of the chart to be displayed in the target feature value in the vocabulary also includes: storing the target feature value in a Map; matching the type of the chart to be displayed in the Map with the vocabulary to obtain a target label text, wherein the target label text is composed of multiple character strings arranged in a preset position; storing the width of the chart to be displayed, the height of the chart to be displayed and the subject of the chart to be displayed in the Map to the target position in the target label text to obtain a modified target label text; and using the modified target label text as the label text of the chart to be displayed.

[0108] Optionally, before calling the target data information required for the chart to be displayed based on the structured query statement, the method further includes: taking the label text of the chart to be displayed, the type of the target template in the Map and the position of the chart to be displayed, the structured query statement and the ID of the target user as the data information created by the target user; and storing the data information in a user-defined screen information table.

[0109] Optionally, based on the structured query statement, calling the target data information required for the chart to be displayed includes: obtaining the data information created by the target user based on the user-defined screen information table; sorting the data information according to the position information of the chart to be displayed; and calling the target data information required for the chart to be displayed through the structured query statement according to the position order of the chart to be displayed.

[0110] Optionally, converting the label text containing the target data information into an HTML tag through a custom label text conversion component includes: storing the label storing the target data information in a JSON array according to the position of the chart to be displayed; transmitting the JSON array to the front end; and converting the label text storing the target data information into an HTML tag through a custom label text conversion component.

[0111] It should be noted that the method and device for processing a data visualization page disclosed in this application can be used in the financial field, and can also be used in any field other than the financial field. The application field of the method and device for processing a data visualization page disclosed in this application is not limited.

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

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

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

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

[0116] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0117] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0118] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. The information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0119] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

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

[0121] The above are merely embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should all be included within the scope of the claims of the present application.

Claims

1. A method for processing a data visualization page, characterized in that: include: Obtaining description information and a structured query statement of a chart to be displayed, wherein the structured query statement is used to call target data information required by the chart to be displayed; Determining a label text of the chart to be displayed based on the description information, wherein the label text is composed of multiple character strings arranged in a preset position; According to the structured query statement, the target data information required by the chart to be displayed is called; Storing the target data information in a target location in the label text; Convert the tag text storing the target data information into an HTML tag through a custom tag text conversion component; Displaying the target data information on the screen in a preset chart style according to the HTML tags; Wherein, determining the label text of the chart to be displayed based on the description information includes: Obtaining target feature values ​​of the chart to be displayed based on the description information, wherein the target feature values ​​are composed of the type of the target template selected by the target user, the position of the chart to be displayed, and initial feature values ​​of the chart to be displayed, wherein the initial feature values ​​at least include: the type of the chart to be displayed, the width of the chart to be displayed, the height of the chart to be displayed, the subject of the chart to be displayed, and the title of the target template; Store the target feature value in a Map; Matching the type of the chart to be displayed in the Map with the vocabulary to obtain a target label text, wherein the target label text is composed of multiple character strings arranged in a preset position; The width, height and theme of the chart to be displayed in the Map are stored in the target position of the target label text to obtain a modified target label text; The modified target label text is used as the label text of the chart to be displayed.

2. The method according to claim 1, characterized in that Before obtaining the description information and structured query statement of the chart to be displayed, the method further includes: Obtaining a target template selected by a target user, wherein the target template includes a plurality of chart description information input boxes and a plurality of chart data source input boxes; Receive description information of the chart to be displayed in the chart description information input box; The structured query statement is received through the chart data source input box.

3. The method according to claim 2, characterized in that Determining the label of the chart to be displayed based on the description information includes: Identifying the description information through semantic recognition to obtain initial feature values ​​of the chart to be displayed; Determine the position of the chart to be displayed through the chart description information input box; Adding the type of the target template and the position of the chart to be displayed to the initial feature value to obtain a target feature value; The label text of the chart to be displayed is determined according to the target feature value.

4. The method according to claim 3, characterized in that Determining the label text of the chart to be displayed based on the target feature value includes: The type of the chart to be displayed in the target feature value is matched in a vocabulary to determine the label text of the chart to be displayed, wherein the vocabulary at least includes: the type of chart, the label text of the chart, and a mapping relationship between the type of chart and the label text of the chart.

5. The method according to claim 1, wherein Before calling the target data information required for the chart to be displayed according to the structured query statement, the method further includes: The label text of the chart to be displayed, the type of the target template and the position of the chart to be displayed in the Map, the structured query statement and the ID of the target user are used as the data information created by the target user; The data information is stored in a user-defined screen information table.

6. The method according to claim 5, characterized in that According to the structured query statement, the target data information required for calling the chart to be displayed includes: Acquiring data information created by the target user according to the user-defined screen information table; Sorting the data information according to the position information of the chart to be displayed; According to the position order of the charts to be displayed, the target data information required by the charts to be displayed is called through the structured query statement.

7. The method according to claim 6, characterized in that Converting tags with target data information into HTML tags through custom tag conversion components includes: The tags storing the target data information are stored in a JSON array according to the positions of the charts to be displayed; Transmit the JSON array to the front end; The tag text storing the target data information is converted into the HTML tag through the custom tag text conversion component.

8. A data visualization page processing device, characterized in that: include: A first acquiring unit is configured to acquire description information of a chart to be displayed and a structured query statement, wherein the structured query statement is used to call target data information required by the chart to be displayed; a determining unit, configured to determine a label text of the chart to be displayed based on the description information, wherein the label text is composed of a plurality of character strings arranged in a preset position; A calling unit, configured to call target data information required for the chart to be displayed according to the structured query statement; A first storage unit, configured to store the target data information to a target location in the label text; A conversion unit, configured to convert the label text storing the target data information into an HTML label through a custom label text conversion component; A display unit, configured to display the target data information on a screen in a preset chart style according to the HTML tags; The device is further configured to obtain a target feature value of the chart to be displayed based on the description information, wherein the target feature value is composed of the type of the target template selected by the target user, the position of the chart to be displayed, and the initial feature value of the chart to be displayed, wherein the initial feature value includes at least: the type of the chart to be displayed, the width of the chart to be displayed, the height of the chart to be displayed, the subject of the chart to be displayed, and the title of the target template; Store the target feature value in a Map; Matching the type of the chart to be displayed in the Map with the vocabulary to obtain a target label text, wherein the target label text is composed of multiple character strings arranged in a preset position; The width, height and theme of the chart to be displayed in the Map are stored in the target position of the target label text to obtain a modified target label text; The modified target label text is used as the label text of the chart to be displayed.

9. A computer-readable storage medium, characterized in that The storage medium includes a stored program, wherein the program executes the data visualization page processing method according to any one of claims 1 to 7.

10. An electronic device, characterized in that: It includes one or more processors and a memory, wherein the memory is used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the data visualization page processing method described in any one of claims 1 to 7.

Images