A method for designing and implementing a data visualization large screen iterator

Abstract

A method for designing and implementing a large-scale data visualization iterator, specifically focusing on front-end visualization technology for information systems. This technology addresses a critical shortcoming of traditional large-scale data visualization displays: flexible reading of data vectors and iteratively displaying chart groups corresponding to each vector value. This technology aims to build a mechanism for iteratively displaying visualization charts using vector groups as a scale. It specifically addresses issues such as uncertainty in vector data, uncertainty in the number of chart groups, and interoperability between chart groups and other components.

Description

Technical Field

[0001] The present invention relates to a method for designing and implementing an iterator, and in particular to a method for designing and implementing a data visualization large-screen iterator. Background Art

[0002] Traditional data visualization screens use a fixed configuration method to achieve chart visualization, which requires knowing the number of charts to be displayed in advance and configuring and displaying them one by one. In scenarios where the number of charts is uncertain, the data visualization screen cannot support its basic functions. For example, when displaying a pie chart of the age distribution and income distribution of residents in each prefecture-level city in XX province, it is impossible to determine the number and direction of the prefecture-level cities. Summary of the Invention

[0003] Purpose of the invention: The technical problem to be solved by the present invention is to provide a method for designing and implementing a data visualization large-screen iterator in response to the shortcomings of the existing technology.

[0004] In order to solve the above technical problems, the present invention discloses a method for designing and implementing a data visualization large-screen iterator, comprising the following steps:

[0005] Step 1: The iterator is associated with the chart component to be displayed and loads data. The method of loading data by the iterator is to complete the data loading of the iterator by constructing a two-level data query mechanism of business ID vectors and chart components.

[0006] The method for associating the iterator with the chart component to be displayed is as follows: establishing an association relationship between the container component and the chart component to be displayed, and associating the iterator with the chart component to be displayed.

[0007] Step 2, iterator configuration; the iterator configuration includes: an extension direction attribute and an edit attribute.

[0008] The expansion direction attribute sets the drawing direction of the iterator when looping to draw components to vertical expansion or horizontal expansion.

[0009] The edit attribute sets the iterator component to edit state and publish state, which are as follows:

[0010] Editing mode: allows dragging and moving of container components, as well as the associated chart components within the container component; only the container component and its associated chart component contents are displayed in the iterator component area;

[0011] Release state: dragging and moving operations on the container component and the chart component associated with the container component are not allowed; the entire iterator component area iteratively and cyclically displays the contents of the container component and its associated chart component according to the number of the business ID vectors.

[0012] Step 3: Design a data model and perform filtering through the data model. The data model includes: an iterator data model and a chart component data model, as follows:

[0013] The data label in the iterator data model is an iteration column, which is only bound to a one-dimensional array. The data format of a single element in the iteration column includes: string, value or time format;

[0014] In the data model of the chart component, in addition to the label of the chart component itself, the data label also has an iteration column label attached, and the iteration column label must be bound when the chart component is bound to the data model;

[0015] The iteration column in the iterator data model corresponds to the iteration column in the chart component data model, and the corresponding relationship is a multiple relationship; each value of the iteration column corresponds to a set of business data of the chart component, and the structure of the business data of the chart components associated with an iterator remains consistent.

[0016] The relationship between the iterator data model and its associated chart component data model is as follows: the iterator component is associated with an iterator data model, the iterator component is bound to a container component, the container component itself has no data model, the container component is bound to at least one chart component, and each chart component is associated with the corresponding chart component data model; and a label in the chart component data model is the iteration column, which is directly associated with the iteration label of the iterator data model.

[0017] The filtering by the data model is filtering according to the specified ID in the business ID vector, including front-end filtering and back-end filtering, as follows:

[0018] Front-end filtering: All data in the data model is requested by the data source to the memory of the data visualization large screen software, and then the model data is filtered according to the iteration column ID;

[0019] Backend filtering: Submit the filtering conditions to the data source. The data source performs data filtering queries based on the filtering conditions and returns the filtered data model. The backend filtering of relational databases and RESTful services is as follows:

[0020] Relational database: Generates SQL statements with query conditions for the data model of the relational database. The fields bound to the iterated columns and the condition values ​​traversed by the iterated columns are used as the condition names and condition values ​​to generate query statements for filtering.

[0021] RESTful service: The fields bound to the iterated columns and the conditional values ​​traversed by the iterated columns are used as the condition name and condition value as the POST submission parameters of the RESTful service. These parameters are placed in the body of the RESTful service. The RESTful service published by the third-party backend system accesses and parses these parameters during service interface implementation to complete filtering.

[0022] The iterator runs and draws the components for display. The specific steps are as follows:

[0023] Step a1: Read the data associated with the iterator column, i.e., the business ID vector, according to the iterator component;

[0024] Step a2: Traverse and draw a chart based on the business ID vector;

[0025] Step a3: Determine whether the traversal of the business ID vector is completed. If not, execute step a3.1. Then, execute step 4.

[0026] Step a3.1: Read the container component bound to the iterator component;

[0027] Step a3.2: Draw the basic style of the container component;

[0028] Step a3.3: Read the chart component associated with the container component according to the container component number;

[0029] Step a3.4: Traverse the chart components;

[0030] Step a3.5: Determine whether the chart component traversal is complete. If not, proceed to step a3.5.1, and then to step 3.

[0031] Step a3.5.1: Draw the chart components;

[0032] Step a3.5.2: Request chart component data;

[0033] Step a3.5.3: Determine whether the chart component data request is front-end filtering or back-end filtering. If it is front-end filtering, execute step a3.5.3.1.1; otherwise, execute step a3.5.3.2.1.

[0034] Step a3.5.3.1.1: Generate filter conditions;

[0035] Step a3.5.3.1.2: Submit the filter conditions to the data source and proceed to step a3.5.4;

[0036] Step a3.5.3.2.1: Use the value of the iteration column as the filter condition to filter the query results of the data model;

[0037] Step a3.5.4: Generate filtering result data;

[0038] Step a3.5.5: Load the filtered result data into the chart component and execute step a3.5;

[0039] Step a4: End.

[0040] Step 4: The iterator runs and draws the components for display.

[0041] The user uses the iterator to achieve visual large-screen display. The specific steps include:

[0042] Step b1: Create an iterator component on the data dashboard visual editor;

[0043] Step b2: Create a container component on the data dashboard visual editor;

[0044] Step b3: Create a chart component on the data dashboard visual editor;

[0045] Step b4: Select the container component and bind the corresponding chart component to the container component;

[0046] Step b5: Select the iterator component and bind the corresponding container component to the iterator component;

[0047] Step b6: Set the iterator component properties to edit mode;

[0048] Step b7: Drag the container component to move its position within the iterator area;

[0049] Step b8: Select the iterator component and bind the data item to the iterator column label of the iterator's data model.

[0050] Step b9: Select the chart components associated with the container in this step in turn, and bind the data model tags of the chart components to the iterative column data items and other chart data items;

[0051] Step b10: Set the iterator component properties to the published state and preview the final drawing effect of the iterator component.

[0052] Beneficial effects:

[0053] Provides a more flexible iterator loop loading method, and realizes dynamic display of data on a large screen under the condition of uncertain number of homogeneous components by constructing a two-level data query mechanism of business ID vectors and chart components. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments, and the above and / or other advantages of the present invention will become more apparent.

[0055] Figure 1 This is an example diagram of the association of the data model in the present invention.

[0056] Figure 2 This is a sample interface diagram of the iterator in the present invention.

[0057] Figure 3 This is a flowchart of user operation and use of the iterator in the present invention.

[0058] Figure 4 This is a relationship diagram of the iterator data model and the data models of its associated subcomponents in the present invention.

[0059] Figure 5 The flowchart of the program implementation of the iterator running the drawing component in the present invention. DETAILED DESCRIPTION

[0060] The present invention discloses a method for designing and implementing a data visualization large-screen iterator, comprising the following steps:

[0061] Step 1: The iterator is associated with the chart component to be displayed and loads data. The method of loading data by the iterator is to complete the data loading of the iterator by constructing a two-level data query mechanism of business ID vectors and chart components.

[0062] The method for associating the iterator with the chart component to be displayed is as follows: establishing an association relationship between the container component and the chart component to be displayed, and associating the iterator with the chart component to be displayed.

[0063] Step 2, iterator configuration; the iterator configuration includes: an extension direction attribute and an edit attribute.

[0064] The expansion direction attribute sets the drawing direction of the iterator when looping to draw components to vertical expansion or horizontal expansion.

[0065] The edit attribute sets the iterator component to edit state and publish state, which are as follows:

[0066] Editing mode: allows dragging and moving of container components, as well as the associated chart components within the container component; only the container component and its associated chart component contents are displayed in the iterator component area;

[0067] Release state: dragging and moving operations on the container component and the chart component associated with the container component are not allowed; the entire iterator component area iteratively and cyclically displays the contents of the container component and its associated chart component according to the number of the business ID vectors.

[0068] Step 3: Design a data model and perform filtering through the data model. The data model includes: an iterator data model and a chart component data model, as follows:

[0069] The data label in the iterator data model is an iteration column, which is only bound to a one-dimensional array. The data format of a single element in the iteration column includes: string, value or time format;

[0070] In the data model of the chart component, in addition to the label of the chart component itself, the data label also has an iteration column label attached, and the iteration column label must be bound when the chart component is bound to the data model;

[0071] The iteration column in the iterator data model corresponds to the iteration column in the chart component data model, and the corresponding relationship is a multiple relationship; each value of the iteration column corresponds to a set of business data of the chart component, and the structure of the business data of the chart components associated with an iterator remains consistent.

[0072] The relationship between the iterator data model and its associated chart component data model is as follows: the iterator component is associated with an iterator data model, the iterator component is bound to a container component, the container component itself has no data model, the container component is bound to at least one chart component, and each chart component is associated with the corresponding chart component data model; and a label in the chart component data model is the iteration column, which is directly associated with the iteration label of the iterator data model.

[0073] The filtering by the data model is filtering according to the specified ID in the business ID vector, including front-end filtering and back-end filtering, as follows:

[0074] Front-end filtering: All data in the data model is requested by the data source to the memory of the data visualization large screen software, and then the model data is filtered according to the iteration column ID;

[0075] Backend filtering: Submit the filtering conditions to the data source. The data source performs data filtering queries based on the filtering conditions and returns the filtered data model. The backend filtering of relational databases and RESTful services is as follows:

[0076] Relational database: Generates SQL statements with query conditions for the data model of the relational database. The fields bound to the iterated columns and the condition values ​​traversed by the iterated columns are used as the condition names and condition values ​​to generate query statements for filtering.

[0077] RESTful service: The fields bound to the iterated columns and the conditional values ​​traversed by the iterated columns are used as the condition name and condition value as the POST submission parameters of the RESTful service. These parameters are placed in the body of the RESTful service. The RESTful service published by the third-party backend system accesses and parses these parameters during service interface implementation to complete filtering.

[0078] The iterator runs and draws the components for display. The specific steps are as follows:

[0079] Step a1: Read the data associated with the iterator column, i.e., the business ID vector, according to the iterator component;

[0080] Step a2: Traverse and draw a chart based on the business ID vector;

[0081] Step a3: Determine whether the traversal of the business ID vector is completed. If not, execute step a3.1. Then, execute step 4.

[0082] Step a3.1: Read the container component bound to the iterator component;

[0083] Step a3.2: Draw the basic style of the container component;

[0084] Step a3.3: Read the chart component associated with the container component according to the container component number;

[0085] Step a3.4: Traverse the chart components;

[0086] Step a3.5: Determine whether the chart component traversal is complete. If not, proceed to step a3.5.1, and then to step 3.

[0087] Step a3.5.1: Draw the chart components;

[0088] Step a3.5.2: Request chart component data;

[0089] Step a3.5.3: Determine whether the chart component data request is front-end filtering or back-end filtering. If it is front-end filtering, execute step a3.5.3.1.1; otherwise, execute step a3.5.3.2.1.

[0090] Step a3.5.3.1.1: Generate filter conditions;

[0091] Step a3.5.3.1.2: Submit the filter conditions to the data source and proceed to step a3.5.4;

[0092] Step a3.5.3.2.1: Use the value of the iteration column as the filter condition to filter the query results of the data model;

[0093] Step a3.5.4: Generate filtering result data;

[0094] Step a3.5.5: Load the filtered result data into the chart component and execute step a3.5;

[0095] Step a4: End.

[0096] Step 4: The iterator runs and draws the components for display.

[0097] The user uses the iterator to achieve visual large-screen display. The specific steps include:

[0098] Step b1: Create an iterator component on the data dashboard visual editor;

[0099] Step b2: Create a container component on the data dashboard visual editor;

[0100] Step b3: Create a chart component on the data dashboard visual editor;

[0101] Step b4: Select the container component and bind the corresponding chart component to the container component;

[0102] Step b5: Select the iterator component and bind the corresponding container component to the iterator component;

[0103] Step b6: Set the iterator component properties to edit mode;

[0104] Step b7: Drag the container component to move its position within the iterator area;

[0105] Step b8: Select the iterator component and bind the data item to the iterator column label of the iterator's data model.

[0106] Step b9: Select the chart components associated with the container in this step in turn, and bind the data model tags of the chart components to the iterative column data items and other chart data items;

[0107] Step b10: Set the iterator component properties to the published state and preview the final drawing effect of the iterator component.

[0108] Example:

[0109] The present invention proposes an implementation process, method and metadata configuration specification for a type of large-screen iterator, and establishes a two-level data query method mechanism based on the business ID vector and chart components associated with the chart, to achieve dynamic large-screen display of data under the condition of uncertain number of homogeneous components.

[0110] The following are some definitions of terms used in the invention, and their scope of use is limited to the present invention:

[0111] 1. Homogeneous multi-instance: Components of the same type are displayed in a loop, including the same component type and data model. The homogeneous multi-instance components involved in this invention only require dragging and dropping to configure one component (once) during the configuration (editing) phase. During the publish and preview phase, chart components can be drawn in a loop based on the actual backend data (number).

[0112] 2. ID vector group: A collection of identifiers used by chart components in data visualization dashboards. The iterator can loop through chart components based on the ID vector group and filter chart data based on specific IDs.

[0113] 3. Iterator: A component of the data visualization dashboard. This component itself does not display specific charts. Instead, it loops through the visualization scenarios of chart components based on business ID vectors. Iterators enable single-configuration chart components and iterative display of multiple instances.

[0114] 4. Container: A component in the data visualization dashboard. This component can be thought of as a collection of components. Different types of chart components can be bound to a container component. Container components are positioned absolutely within the visualization dashboard, while other bound chart components are positioned relative to the container component. When you drag a container component within the data visualization dashboard editor, the bound chart components will move accordingly.

[0115] A data visualization large-screen iterator method and implementation addresses a critical shortcoming of traditional data visualization large-screen displays: flexible reading of data vectors and iteratively and cyclically displaying the chart groups corresponding to each vector value. This invention aims to provide a more flexible iterator cyclic loading method. By constructing a two-level data query mechanism based on business ID vectors and chart components, it enables dynamic large-screen data display even when the number of homogeneous components is uncertain.

[0116] The present invention at least includes the following contents:

[0117] This paper addresses the problem of displaying homogeneous multi-instance components on large-scale data visualization screens, specifically scenarios where data vectors need to be flexibly read and iteratively display the corresponding chart groups for each value of the vector. A data visualization screen iterator method and implementation are designed.

[0118] 2. In this invention, the iterator component does not directly bind to the chart component. Instead, it binds to the container component, relying on the chart components associated with the bound container component to display the chart components in a loop. The container's relative position in the iterator is aligned to the left and top by default.

[0119] 3. In the present invention, the "expansion direction" property is defined in the property configuration page of the iterator component. When the iterator draws the component in a loop, the drawing direction can be "vertical expansion" and "horizontal expansion".

[0120] 4. In the property configuration page of the iterator component of the present invention, the "Edit" property is defined. This property divides the component into edit state and publish state:

[0121] (1) Editing mode: You can drag and move the (iterator bound) container, and you can drag and move the chart components in the container. The entire iterator component area only displays a single container and its component contents. The sample interface of the editing mode in this invention is as follows Figure 2 As shown in (a).

[0122] (2) Release state: The container and the chart components in the container cannot be dragged or moved (iterator binding). The entire iterator component area iteratively displays the container and its component contents according to the number of iteration column IDs in the backend. The sample interface of the release state in this invention is as follows: Figure 2 (b) shown.

[0123] 5. The data label in the data model of the iterator component in the present invention is "iteration column". The iteration column has and can only be bound to a one-dimensional array (a column of data in the database). The data format of a single element in the iteration column can be a string, a number, or a time format.

[0124] 6. In the data model of the chart component for loop iteration in this invention, in addition to the component's own label, the data label also needs to be attached with the "iteration column" label, and the "iteration column" label must be bound when the chart component model is bound to the data model. The iteration column in the iterator data model needs to correspond to the iteration column of the chart component, with a corresponding relationship of 1:N. For example, Figure 1 As shown, each value of the iteration column corresponds to a set of business data of the chart component, and the structure of the business data of the chart component under one iterator remains consistent.

[0125] 7. The relationship between the iterator data model and the data model of its associated subcomponents in the present invention 6 is as follows Figure 4 As shown in the figure, the iterator component is associated with an iterator data model. The iterator is bound to a container, which itself has no data model. The container is bound to several chart components A, B, ..., E, and the chart components are associated with the corresponding A, B, ..., E data models. The chart data model must have a label called "Iteration Column" that is directly associated with the "Iteration Column" label of the iterator data model.

[0126] 8. The user operation and use process of the iterator component in the present invention is as follows Figure 3 The specific steps are as follows:

[0127] Step 1: Create an iterator component on the data dashboard visual editor;

[0128] Step 2: Create a container component on the data dashboard visual editor;

[0129] Step 3: Create a chart component on the data dashboard visual editor;

[0130] Step 4: Select the container component and bind the corresponding chart component to the container component;

[0131] Step 5: Select the iterator component and bind the corresponding container component to the iterator component;

[0132] Step 6: Set the iterator component properties to "Edit mode";

[0133] Step 7: Drag the container component to move the layout position within the iterator area;

[0134] Step 8: Select the iterator component and bind the data item to the "Iteration Column" label of the iterator's data model.

[0135] Step 9: Select the chart components associated with the container in this step one by one, and bind the data model tags of the chart components to the "Iteration Column" data item and other chart data items;

[0136] Step 10: Set the iterator component properties to "Published" to preview the final drawing effect of the iterator component.

[0137] 9. In the present invention, the business data model of each instance of the chart component associated with the iterator is the same data model. The business data of each chart component instance needs to be filtered according to the specified ID in the iterator's business ID vector. The filtering of model data is divided into two categories:

[0138] (1) Front-end filtering: All data in the data model are requested by the data source to the data visualization large screen software memory. In the software memory, the model data is filtered according to the specific iteration column ID.

[0139] (2) Back-end filtering: Submit the filtering conditions to the data source, and the data source performs data filtering queries based on the filtering conditions and returns the filtered model data.

[0140] The data cache and computing pressure of the front-end filtering method are in the data visualization large-screen software, while the data cache and computing pressure of the back-end filtering method are in the data source.

[0141] 10. In the present invention 9, the backend filtering method needs to meet the backend filtering of relational database and restful service. The backend filtering of two types of data is implemented as follows:

[0142] (1) Relational database: Generate an SQL statement with query conditions for the data model (database table, view) of the relational database, using the fields bound to the "iteration column" and the condition values ​​traversed by the "iteration column" as the condition name (conditionName) and condition value (conditionValue). The generated query statement is as follows:

[0143] select t*from tableName t where 1=1and t.conditionName= conditionValue ;

[0144] (2) RESTful service: The fields bound to the "iteration column" and the conditional values ​​traversed by the "iteration column" are used as the condition name (conditionName) and condition value (conditionValue) as the POST submission parameters of the RESTful service. The parameters are placed in the body of the service. The body is actually<key,value> The data is stored in the form of , where key is the condition name (conditionName) and value is the condition value (conditionValue).

[0145] The RESTful service published by the third-party backend system needs to integrate and parse this parameter when implementing the service interface.

[0146] 11. The program implementation process of the iterator operation and drawing component in the present invention is as follows Figure 5 As shown, the specific implementation steps are as follows:

[0147] Step 1: Read the data (ID vector group) associated with its "iteration column" according to the iterator component;

[0148] Step 2: Draw a graph based on the ID vector group.

[0149] Step 3: Determine whether the vector group traversal is completed. If the traversal is not completed, execute step 3.1. If the traversal is completed, execute step 4.

[0150] Step 3.1: Read the container bound to the iterator;

[0151] Step 3.2: Draw the basic style of the container;

[0152] Step 3.3: Read the chart component associated with the container according to the container number;

[0153] Step 3.4: Traverse the chart components;

[0154] Step 3.5: Check if the chart component traversal is complete. If not, execute step 3.5.1. If the traversal is complete, execute step 3.

[0155] Step 3.5.1: Draw the chart components;

[0156] Step 3.5.2: Request chart component data;

[0157] Step 3.5.3: Determine whether the chart component data request is front-end or back-end filtering. For front-end filtering, execute step 3.5.3.1.1. For back-end filtering, execute step 3.5.3.2.1.

[0158] Step 3.5.3.1.1: Generate filter conditions;

[0159] Step 3.5.3.1.2: Submit the filter conditions to the data source and proceed to step 3.5.4;

[0160] Step 3.5.3.2.1: Filter the query result data of the model based on the iterated column data;

[0161] Step 3.5.4: Generate filtering result data;

[0162] Step 3.5.5: Load the filtered result data into the chart component and execute step 3.5;

[0163] Step 4: End.

[0164] In a specific implementation, the present application provides a computer storage medium and a corresponding data processing unit, wherein the computer storage medium is capable of storing a computer program, and when the computer program is executed by the data processing unit, the computer program can run the invention content of the method for designing and implementing a data visualization large-screen iterator provided by the present invention and some or all of the steps in each embodiment. The storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0165] Those skilled in the art can clearly understand that the technical solutions in the embodiments of the present invention can be implemented by means of computer programs and their corresponding general hardware platforms. Based on this understanding, the technical solutions in the embodiments of the present invention, in essence or in other words, the part that contributes to the prior art, can be embodied in the form of a computer program, i.e., a software product. The computer program software product can be stored in a storage medium and includes a number of instructions for enabling a device including a data processing unit (which can be a personal computer, server, single-chip microcomputer, MUU or network device, etc.) to execute the methods described in various embodiments of the present invention or certain parts of the embodiments.

[0166] The present invention provides a method and approach for designing and implementing a data visualization large-screen iterator. There are many specific methods and approaches for implementing this technical solution. The above is only a preferred embodiment of the present invention. It should be noted that those skilled in the art can make several improvements and modifications without departing from the principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention. Any components not specified in this embodiment can be implemented using existing technologies.

Claims

1. A method for designing and implementing a data visualization large screen iterator, characterized in that: The following steps are involved: Step 1: The iterator is associated with the chart component to be displayed and the data is loaded; Step 2, iterator configuration; Step 3: Design a data model and filter through the data model; Step 4: The iterator runs and draws the components for display; The method of loading data by the iterator in step 1 is to complete the data loading of the iterator by constructing a two-level data query mechanism of business ID vector and chart component; The iterator configuration in step 2 includes: an extension direction attribute and an edit attribute, wherein the edit attribute sets the iterator component to an edit state and a publish state; The data model described in step 3 includes the iterator data model and the chart component data model, as follows: The data label in the iterator data model is an iteration column, which is only bound to a one-dimensional array. The data format of a single element in the iteration column includes: string, value or time format; In the data model of the chart component, in addition to the label of the chart component itself, the data label also has an iteration column label attached, and the iteration column label must be bound when the chart component is bound to the data model; The iteration column in the iterator data model corresponds to the iteration column in the chart component data model, and the corresponding relationship is a multiple relationship; each value of the iteration column corresponds to a set of business data of the chart component, and the structure of the business data of the chart components associated with an iterator remains consistent; The relationship between the iterator data model and its associated chart component data model is as follows: the iterator component is associated with an iterator data model, the iterator component is bound to a container component, the container component itself has no data model, the container component is bound to at least one chart component, and each chart component is associated with the corresponding chart component data model; and a label in the chart component data model is the iteration column, which is directly associated with the iteration label of the iterator data model.

2. The method for designing and implementing a data visualization large screen iterator according to claim 1, characterized in that: The method for associating the iterator with the chart component to be displayed in step 1 is as follows: establishing an association relationship between the container component and the chart component to be displayed, and associating the iterator with the chart component to be displayed.

3. The method for designing and implementing a data visualization large screen iterator according to claim 2, characterized in that: The expansion direction attribute described in step 2 sets the drawing direction of the iterator to vertical expansion or horizontal expansion when looping to draw components.

4. The method for designing and implementing a data visualization large-screen iterator according to claim 3, characterized in that: The edit property described in step 2 sets the iterator component to the edit state and the publish state. The two states are as follows: Editing mode: allows dragging and moving of container components, as well as the associated chart components within the container component; only the container component and its associated chart component contents are displayed in the iterator component area; Release state: dragging and moving operations on the container component and the chart component associated with the container component are not allowed; the entire iterator component area iteratively and cyclically displays the contents of the container component and its associated chart component according to the number of the business ID vectors.

5. The method for designing and implementing a data visualization large screen iterator according to claim 4, characterized in that: The filtering by data model described in step 3 is filtering based on the specified ID in the business ID vector, including front-end filtering and back-end filtering, as follows: Front-end filtering: All data in the data model is requested by the data source to the memory of the data visualization large screen software, and then the model data is filtered according to the iteration column ID; Backend filtering: Submit the filtering conditions to the data source. The data source performs data filtering queries based on the filtering conditions and returns the filtered data model. The backend filtering of relational databases and RESTful services is as follows: Relational database: Generates SQL statements with query conditions for the data model of the relational database. The fields bound to the iterated columns and the condition values ​​traversed by the iterated columns are used as the condition names and condition values ​​to generate query statements for filtering. RESTful service: The fields bound to the iterated columns and the conditional values ​​traversed by the iterated columns are used as the condition name and condition value as the POST submission parameters of the RESTful service. These parameters are placed in the body of the RESTful service. The RESTful service published by the third-party backend system accesses and parses these parameters during service interface implementation to complete filtering.

6. The method for designing and implementing a data visualization large screen iterator according to claim 5, characterized in that: The specific steps for filtering through the data model described in step 3 are as follows: Step a1: Read the data associated with the iterator column, i.e., the business ID vector, according to the iterator component; Step a2: Traverse and draw a chart based on the business ID vector; Step a3: Determine whether the traversal of the business ID vector is completed. If not, execute step a3.

1. Then, execute step 4. Step a3.1: Read the container component bound to the iterator component; Step a3.2: Draw the basic style of the container component; Step a3.3: Read the chart component associated with the container component according to the container component number; Step a3.4: Traverse the chart components; Step a3.5: Determine whether the chart component traversal is complete. If not, proceed to step a3.5.1, and then to step 3. Step a3.5.1: Draw the chart components; Step a3.5.2: Request chart component data; Step a3.5.3: Determine whether the chart component data request is front-end filtering or back-end filtering. If it is front-end filtering, execute step a3.5.3.1.1; otherwise, execute step a3.5.3.2.

1. Step a3.5.3.1.1: Generate filter conditions; Step a3.5.3.1.2: Submit the filter conditions to the data source and proceed to step a3.5.4; Step a3.5.3.2.1: Use the value of the iteration column as the filter condition to filter the query results of the data model; Step a3.5.4: Generate filtering result data; Step a3.5.5: Load the filtered result data into the chart component and execute step a3.5; Step a4: End.

7. The method for designing and implementing a data visualization large screen iterator according to claim 6, characterized in that: The user uses the iterator to achieve visual large-screen display. The specific steps include: Step b1: Create an iterator component on the data dashboard visual editor; Step b2: Create a container component on the data dashboard visual editor; Step b3: Create a chart component on the data dashboard visual editor; Step b4: Select the container component and bind the corresponding chart component to the container component; Step b5: Select the iterator component and bind the corresponding container component to the iterator component; Step b6: Set the iterator component properties to edit mode; Step b7: Drag the container component to move its position within the iterator area; Step b8: Select the iterator component and bind the data item to the iterator column label of the iterator data model; Step b9: Select the chart components associated with the container in this step in turn, and bind the data model tags of the chart components to the iterative column data items and other chart data items; Step b10: Set the iterator component properties to the published state and preview the final drawing effect of the iterator component.

Images