AI-based multi-terminal-oriented real-time editable data visualization system and method

Abstract

The invention provides an AI-based multi-terminal-oriented real-time editable data visualization system and method, and the method comprises the steps: building a visual canvas with a dimension field of a business data set in a business data source as a longitudinal axis and a measurement field of the business data set in the business data source as a horizontal axis, and initializing an AI data view of the business data source; recombining the display layout of the AI data view on each display terminal on the basis of the size characteristics of the canvas container in each display terminal, triggering the morphological transformation logic of the editing component to present the matched editing component on each display terminal, receiving the editing operation of a user on the editing component on each display terminal, and displaying the edited editing component on each display terminal. And performing derivative updating on the view state in each display terminal based on the data binding relationship and the layout dependency relationship among the editing components, and the operation type and the semantic context of the editing operation. Based on the scheme, automatic generation and intelligent linkage updating of the multi-end view based on the AI and the responsive rule can be realized.

Description

Technical Field

[0001] This application relates to the field of data visualization technology, and more specifically, to an AI-based, multi-terminal, real-time editable data visualization system and method. Background Technology

[0002] Data visualization is a technique that transforms abstract data into intuitive graphical representations. Its core lies in utilizing the high bandwidth of the human visual system to encode data using visual elements such as points, lines, surfaces, colors, and sizes, thereby revealing hidden patterns, trends, and anomalies within the data.

[0003] Current visualization technologies, in the view construction phase, only provide a basic chart component library, leaving complex decisions such as type selection, data mapping, and style configuration entirely to users based on experience. When faced with multi-dimensional, large-volume business data, this process can lead to distorted visualization results due to improper configuration. In the interactive editing phase, the existing technology's response mechanism to component operations is isolated, lacking the ability to perceive the inherent relationships between components. Any local modification cannot automatically trigger collaborative updates of related views, requiring users to manually establish and maintain linkage rules. This not only makes it difficult to synchronize data states in real time across different components but also causes serious layout errors and state inconsistencies in multi-device display scenarios, significantly increasing system maintenance complexity and collaboration costs. Therefore, how to achieve automatic generation and intelligent linkage updates of multi-device views based on AI and responsive rules, thereby improving the state synchronization efficiency of cross-device data visualization editing, has become a challenge for the industry. Summary of the Invention

[0004] This application provides an AI-based, multi-device, real-time editable data visualization system and method that can automatically generate and intelligently update multi-device views based on AI and responsive rules, thereby improving the efficiency of state synchronization in cross-device data visualization editing.

[0005] Firstly, this application provides an AI-based, multi-device-oriented, real-time editable data visualization method, including:

[0006] Obtain the business dataset to be visualized from the business data source, extract the dimension fields and measure fields for analyzing the business data source from the business dataset, and then establish a visualization canvas with the dimension fields as the vertical axis and the measure fields as the horizontal axis.

[0007] The field type of the dimension field and the data distribution characteristics of the metric field are input into the pre-trained AI chart recommendation model. The AI ​​chart recommendation model is used to automatically generate and render the editing component to the visualization canvas to obtain the AI ​​data view of the business data source.

[0008] Based on the size characteristics of the canvas container in each display terminal, the responsive layout engine calls the layout breakpoint rules to reorganize the display layout of the AI ​​data view on each display terminal, and triggers the shape transformation logic of the editing component to present the adapted editing component on each display terminal, thereby determining the data binding relationship and layout dependency relationship between each editing component.

[0009] The system receives user editing operations on editing components on various display terminals and updates the view state on each display terminal based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation, and the semantic context.

[0010] In some embodiments, extracting dimension fields and metric fields from the business dataset for analyzing business data sources specifically includes:

[0011] Metadata parsing is performed on each field of the business dataset to identify the basic data type of each field and determine the business semantics and numerical distribution characteristics of each field;

[0012] Based on the semantics and numerical distribution of each business, classification rules are applied to all fields in the business dataset to identify field roles. Then, each basic data type is used to attach field type and role labels to each field to obtain dimension fields and metric fields for analyzing business data sources.

[0013] In some embodiments, establishing a visualization canvas with the dimension field as the vertical axis and the metric field as the horizontal axis specifically includes:

[0014] Initialize an empty, programmable canvas container;

[0015] A Cartesian coordinate system is established within the canvas container based on all dimension fields and metric fields, thereby obtaining a visualization canvas with the dimension fields as the vertical axis and the metric fields as the horizontal axis.

[0016] In some embodiments, the field type of the dimension field and the data distribution characteristics of the metric field are input into a pre-trained AI chart recommendation model. The AI ​​chart recommendation model is then used to automatically generate and render editing components onto a visualization canvas to obtain an AI data view of the business data source. Specifically, this includes:

[0017] Determine the field type of the dimension field and the data distribution characteristics of the metric field;

[0018] The input feature vector of the AI ​​chart recommendation model is constructed by the encoding of the field type and the data distribution characteristics;

[0019] The input feature vector is input into a pre-trained AI chart recommendation model, and the AI ​​chart recommendation model is used to output the recommended chart type and the initial mapping relationship between data fields and graphic attributes;

[0020] Based on the initial mapping relationship, the business dataset is bound to graphical attributes, and the initial visual editing component is rendered in the visualization canvas to obtain the AI ​​data view of the business data source.

[0021] In some embodiments, based on the size characteristics of the canvas container in each display terminal, a responsive layout engine is used to call layout breakpoint rules to reorganize the display layout of the AI ​​data view on each display terminal, and trigger the shape transformation logic of the editing component to present the adapted editing component on each display terminal. Specifically, this includes:

[0022] Continuously monitor the size changes of the canvas container in each display terminal to obtain the size characteristics of the canvas container in each display terminal;

[0023] The responsive layout engine is used to match each size feature with the preset layout breakpoint rules to obtain the editing components that match each display terminal.

[0024] The layout of each editing component is transformed using the transformation callback function inside each editing component, resulting in an adapted editing component that is displayed on each display terminal.

[0025] In some embodiments, determining the data binding relationships and layout dependencies between various editing components specifically includes:

[0026] Iterate through all editing components and perform logical filtering on the dependencies between data sources in each editing component to obtain the data binding relationships between each editing component.

[0027] Iterate through all editing components, determine the adjacency relationship between the position and size of each editing component in the document flow, and obtain the layout dependency relationship between each editing component.

[0028] In some embodiments, the derivative update of the view state in each display terminal based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation, and the semantic context specifically includes:

[0029] Identify the operation type of the editing operation and extract the semantic context of the editing operation.

[0030] The update strategy for each editing component is selected from the data binding relationship and the layout dependency relationship based on the operation type;

[0031] The update strategy is used to perform differential updates on the view state of each display terminal.

[0032] Secondly, this application provides an AI-based, multi-terminal, real-time editable data visualization system, including:

[0033] The acquisition module is used to acquire the business dataset to be visualized from the business data source, extract the dimension fields and metric fields for analyzing the business data source from the business dataset, and then establish a visualization canvas with the dimension fields as the vertical axis and the metric fields as the horizontal axis.

[0034] The processing module is used to input the field type of the dimension field and the data distribution characteristics of the metric field into a pre-trained AI chart recommendation model, and use the AI ​​chart recommendation model to automatically generate and render the editing component to the visualization canvas to obtain the AI ​​data view of the business data source.

[0035] The processing module is also used to reorganize the display layout of the AI ​​data view on each display terminal based on the size characteristics of the canvas container in each display terminal, and use the responsive layout engine to call the layout breakpoint rules, and trigger the shape transformation logic of the editing component to present the adapted editing component on each display terminal, thereby determining the data binding relationship and layout dependency relationship between each editing component.

[0036] The execution module is used to receive user editing operations on editing components on various display terminals, and to perform derivative updates on the view state in each display terminal based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation, and the semantic context.

[0037] Thirdly, this application provides a computer device, the computer device including a memory and a processor, the memory for storing a computer program, and the processor for calling and running the computer program from the memory, so that the computer device executes the above-described AI-based multi-terminal real-time editable data visualization method.

[0038] Fourthly, this application provides a computer-readable storage medium storing instructions or code that, when executed on a computer, cause the computer to implement the aforementioned AI-based, multi-terminal, real-time editable data visualization method.

[0039] The technical solutions provided by the embodiments disclosed in this application have the following beneficial effects:

[0040] This application provides an AI-based, multi-terminal, real-time editable data visualization system and method. The system acquires a business dataset to be visualized from a business data source. Dimensional and metric fields for analyzing the business data source are extracted from the dataset, and a visualization canvas is established with the dimensional fields as the vertical axis and the metric fields as the horizontal axis. The field types of the dimensional fields and the data distribution characteristics of the metric fields are input into a pre-trained AI chart recommendation model. The AI ​​chart recommendation model automatically generates and renders editing components onto the visualization canvas, resulting in an AI data view of the business data source. Based on the size characteristics of the canvas containers in each display terminal, a responsive layout engine is used to call layout breakpoint rules to reorganize the display layout of the AI ​​data view on each display terminal and triggers the shape transformation logic of the editing components to present adapted editing components on each display terminal, thereby determining the data binding relationship and layout dependency relationship between each editing component. The system receives user editing operations on the editing components on each display terminal and updates the view state in each display terminal based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation, and the semantic context.

[0041] It can be seen that in this application, the editing operations of the user on the editing components on each display terminal are received, and the view states in each display terminal are derivatively updated based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation, and the semantic context. First, determining the AI data view can obtain an initial visualization benchmark that ensures the rationality of data mapping and the effectiveness of visual encoding by machine intelligence, thus laying a logical starting point for multi-terminal generation and intelligent linkage. By transforming data features into optimal graphical expressions, it is ensured that the visualization view follows the professional guidelines in the field of data visualization from the beginning of generation, avoiding subsequent cascading adjustment costs caused by improper initial configuration. This benchmark view serves as a single trusted data source for responsive adaptation of all display terminals, ensuring the homology of different terminal views at the data level and the semantic level. When the user edits, precise incremental updates can be directly based on the well-structured benchmark, improving the accuracy and processing efficiency of subsequent cross-terminal synchronization. Then, determining the data binding relationship and the layout dependency relationship can obtain a structured relationship model that accurately describes the logical association and spatial constraints between internal components of the view, thus providing a decision-making map for intelligent linkage updates, transforming the loose component set into an organic whole with a clear dependency orientation. When responding to any editing operation, the propagation range and update path of the impact can be accurately deduced based on this relationship network. For the recognition of the data binding relationship, it is ensured that changes at the data level can be efficiently and accurately synchronized along the dependency chain to all associated components. For the definition of the layout dependency relationship, it is ensured that geometric adjustments at the interface level can be automatically completed following the preset layout rules, maintaining the overall visual order. The relationship-based directional update mechanism effectively reduces unnecessary calculation and communication overhead, thereby improving the state synchronization efficiency of cross-device data visualization editing. In summary, based on the above solution, automatic generation and intelligent linkage update of multi-terminal views based on AI and responsive rules can be achieved, thereby improving the state synchronization efficiency of cross-device data visualization editing. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] To more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0043] Figure 1 is an exemplary flowchart of a real-time editable data visualization method based on AI for multiple terminals according to some embodiments of the present application;

[0044] Figure 2 is a schematic flowchart of the process for determining an editing component according to some embodiments of the present application;

[0045] Figure 3 This is a schematic diagram of the structure of an AI-based, multi-terminal, real-time editable data visualization system according to some embodiments of this application;

[0046] Figure 4 This is a schematic diagram of the structure of a computer device that implements an AI-based, multi-terminal, real-time editable data visualization method according to some embodiments of this application. Detailed Implementation

[0047] To better understand the technical solution of this application, the technical solution of this application will be described in detail below with reference to the accompanying drawings and specific embodiments.

[0048] refer to Figure 1 The figure is an exemplary flowchart of an AI-based, multi-terminal, real-time editable data visualization method according to some embodiments of this application. This AI-based, multi-terminal, real-time editable data visualization method mainly includes the following steps:

[0049] In step 101, the business dataset to be visualized is obtained from the business data source, and the dimension fields and metric fields used to analyze the business data source are extracted from the business dataset, and then a visualization canvas is established with the dimension fields as the vertical axis and the metric fields as the horizontal axis.

[0050] It should be noted that, in this application, the business data source is the physical storage entity used to persistently store the original business data; the business dataset to be visualized is a business dataset that has been initially identified and is used as the direct input object in the visualization process.

[0051] In practice, a pre-configured data connector is used to access a specified business data source, which can be a relational database, data warehouse, or application programming interface (API). Based on the user-selected analysis topic or predefined query template, a data query statement is constructed and executed to filter relevant data tables or data views from the business data source, thereby forming an initial business dataset. A status flag is attached to this business dataset to indicate that it is ready to enter the visualization analysis process, and the initial business dataset with the flag is used as the business dataset to be visualized.

[0052] In some embodiments, extracting dimension fields and metric fields for analyzing business data sources from the business dataset can be achieved using the following steps:

[0053] Metadata parsing is performed on each field of the business dataset to identify the basic data type of each field and determine the business semantics and numerical distribution characteristics of each field;

[0054] Based on the semantics and numerical distribution of each business, classification rules are applied to all fields in the business dataset to identify field roles. Then, each basic data type is used to attach field type and role labels to each field to obtain dimension fields and metric fields for analyzing business data sources.

[0055] It should be noted that, in this application, the metric field is a quantifiable indicator field used for mathematical operations and aggregation analysis; the dimension field is a descriptive attribute field used for classifying, grouping, or decomposing business data; the basic data type is a classification category describing the basic properties of field values ​​in computer storage and operation; business semantics is declarative information used to interpret the real-world meaning, concepts, and constraints represented by a data field in a specified business analysis context; numerical distribution characteristics are a set of statistical attributes that quantitatively describe the dispersion and concentration of numerical values ​​in a field; classification rules are a set of judgment logic used to determine whether a field should be classified as a dimension or metric based on its business semantics and numerical distribution characteristics; and role labels are identifiers used to indicate whether a field plays the role of a dimension or metric during the visualization mapping process.

[0056] In specific implementation, firstly, metadata parsing is performed on each field of the business dataset to identify the basic data type of each field and determine the business semantics and numerical distribution characteristics of each field. This can be achieved through the following steps: traversing each field in the business dataset to be visualized, reading the native type definition stored in the database schema, and mapping it to a standardized basic data type, including string, numeric, date / time, and boolean types; simultaneously, a statistical scan is performed on all sample values ​​of each field. For numeric fields, the minimum, maximum, average, and number of unique values ​​are calculated; for non-numeric fields, the number of unique values ​​and their frequency of occurrence are counted. The set of all statistical results serves as the numerical distribution characteristics of the field. The numerical distribution characteristics of each field can be obtained through the above method. Then, based on the various business semantics and numerical distributions, the business dataset is analyzed... All fields are classified using classification rules to identify their roles. Then, each field is labeled with a field type and role tag using its basic data type. This process yields the dimension fields and measure fields used for analyzing business data sources. The steps are as follows: Match the basic data type and numerical distribution characteristics of each field with preset classification rules. The logic of the classification rules is as follows: If a field's basic data type is string or date / time, or if it is numeric but its number of unique values ​​is less than a preset threshold and it does not have an additive business meaning, then assign it the role tag "dimension." If a field's basic data type is numeric and its business meaning is an additive, averageable continuous or discrete indicator, then assign it the role tag "measure." Based on the role tags, all fields are divided into a list of dimension fields and a list of measure fields, thus obtaining the dimension fields and measure fields used for analyzing business data sources.

[0057] In some embodiments, creating a visualization canvas with the dimension field as the vertical axis and the metric field as the horizontal axis can be achieved by the following steps:

[0058] Initialize an empty, programmable canvas container;

[0059] A Cartesian coordinate system is established within the canvas container based on all dimension fields and metric fields, thereby obtaining a visualization canvas with the dimension fields as the vertical axis and the metric fields as the horizontal axis.

[0060] It should be noted that, in this application, the visualization canvas is a graphical drawing area used to bind data and render visualization components; the Cartesian coordinate system is a planar reference system used to accurately quantify and locate the position of data points within the canvas container; and the canvas container is a graphical interface area used to hold and locate all visualization graphic elements and is initially empty.

[0061] In specific implementation, firstly, initializing an empty, programmable canvas container can be achieved through the following steps: By calling the Document Object Model (DOM) operation interface, a Hypertext Markup Language (HML) block element with a specified height and width is created in the web page document of the user interface. The Cascading Style Sheet (CSS) display properties of this block element are set to Flexbox or Grid Layout, and a unique identifier is assigned to the block element. This initially content-free graphical interface area, which can be dynamically drawn through the application programming interface (API), is used as an empty, programmable canvas container. Then, a Cartesian coordinate system is established within the canvas container based on all dimension and metric fields, thereby obtaining a coordinate system with the dimension field as the vertical axis and the metric field as the horizontal axis. A visualization canvas with the metric field as the horizontal axis can be implemented using the following steps: Inside the canvas container, draw a horizontal axis and a vertical axis using scalable vector graphics elements. The scale labels of the horizontal axis are derived from the numerical range of the metric field, while the scale labels of the vertical axis are derived from the value list of the dimension field. The two axes intersect at the origin in the lower left corner of the container, forming a Cartesian coordinate system. Persistently associate the mapping relationship between the dimension field and the metric field with this Cartesian coordinate system. This establishes the spatial mapping relationship between the dimension field and the metric field, making the graphic drawing area the visualization canvas with the dimension field as the vertical axis and the metric field as the horizontal axis.

[0062] In step 102, the field type of the dimension field and the data distribution characteristics of the metric field are input into the pre-trained AI chart recommendation model. The AI ​​chart recommendation model is used to automatically generate and render editing components onto the visualization canvas to obtain an AI data view of the business data source.

[0063] In some embodiments, the field type of the dimension field and the data distribution characteristics of the metric field are input into a pre-trained AI chart recommendation model, and the AI ​​chart recommendation model is used to automatically generate and render editing components to a visualization canvas to obtain an AI data view of the business data source. This can be achieved through the following steps:

[0064] Determine the field type of the dimension field and the data distribution characteristics of the metric field;

[0065] The input feature vector of the AI ​​chart recommendation model is constructed by the encoding of the field type and the data distribution characteristics;

[0066] The input feature vector is input into a pre-trained AI chart recommendation model, and the AI ​​chart recommendation model is used to output the recommended chart type and the initial mapping relationship between data fields and graphic attributes;

[0067] Based on the initial mapping relationship, the business dataset is bound to graphical attributes, and the initial visual editing component is rendered in the visualization canvas to obtain the AI ​​data view of the business data source.

[0068] It should be noted that, in this application, the AI ​​data view is an initial visual graphical interface used to intuitively display business data source information; the data distribution features are a set of features used to quantify the statistical characteristics and dispersion of values ​​in a field; the input feature vector is a numerical feature representation used to represent a field or a combination of fields; the AI ​​chart recommendation model is a machine learning model used to output recommendation results based on the association between the input feature vector and the chart type; and the initial mapping relationship is used to define the initial binding rules between data fields and the graphical attributes of the visualization component.

[0069] In specific implementation, firstly, determining the field type of the dimension field and the data distribution characteristics of the metric field can be achieved through the following steps: for the dimension field, the field type is converted into a predefined category code; for the metric field, its minimum, maximum, average, and standard deviation are calculated. All statistics together constitute the data distribution characteristics of the metric field, thus obtaining the field type of the dimension field and the data distribution characteristics of the metric field. Secondly, constructing the input feature vector of the AI ​​chart recommendation model through the field type code and the data distribution characteristics can be achieved through the following steps: converting the field type into a predefined category code, normalizing the data distribution characteristics, and concatenating the code and normalized values ​​into a one-dimensional array in a fixed order, thereby using the numerical feature representation of a field or combination of fields that can be recognized by the AI ​​chart recommendation model as the input feature vector. Then, the input feature vector is input into the pre-trained AI chart recommendation model, and the AI ​​chart recommendation model outputs the recommended chart type and the initial mapping of data fields to graphic attributes. The relationship can be achieved through the following steps: Input the input feature vector into a pre-trained AI chart recommendation model. This model calculates the matching degree between the input vector and each chart type through its internal multi-layer network structure, and outputs the most matching multiple (default 3) chart types and their corresponding data fields and graphic channels binding suggestions in probabilistic form. Then, the initial binding rules recommended by the AI ​​model, defining how data fields correspond to the graphic attributes of the visualization component, are used as the initial mapping relationship. Finally, the business dataset is bound to graphic attributes according to the initial mapping relationship, and the initial visualization editing component is rendered in the visualization canvas. The AI ​​data view of the business data source can be achieved through the following steps: According to the initial mapping relationship, the underlying graphics library is called, and the specific values ​​in the business dataset are assigned to the corresponding graphic attributes of the visualization component according to the mapping rules. The graphics are then drawn at the corresponding coordinate positions on the previously established visualization canvas. The initial visualization graphic interface, which intuitively displays the business data source information and is generated based on the AI ​​recommendation results, serves as the AI ​​data view of the business data source.

[0070] In step 103, based on the size characteristics of the canvas container in each display terminal, the responsive layout engine calls the layout breakpoint rules to reorganize the display layout of the AI ​​data view on each display terminal, and triggers the shape transformation logic of the editing component to present the adapted editing component on each display terminal, thereby determining the data binding relationship and layout dependency relationship between each editing component.

[0071] In some embodiments, based on the size characteristics of the canvas container in each display terminal, a responsive layout engine is used to call layout breakpoint rules to reorganize the display layout of the AI ​​data view on each display terminal, and trigger the shape transformation logic of the editing component to present the adapted editing component on each display terminal. (Refer to...) Figure 2 The diagram is a flowchart illustrating the process of determining the editing component in some embodiments of this application. In this embodiment, determining the editing component can be achieved through the following steps:

[0072] In step 1031, the size changes of the canvas container in each display terminal are continuously monitored to obtain the size characteristics of the canvas container in each display terminal.

[0073] In step 1032, a responsive layout engine is used to match each size feature with preset layout breakpoint rules to obtain the editing components that match each display terminal.

[0074] In step 1033, the layout of each editing component is transformed using the transformation callback function inside each editing component to obtain the adapted editing component displayed on each display terminal.

[0075] It should be noted that in this application, the editing component is a visual editing component used to achieve visual and interactive effects on the display terminal; the size feature is geometric attribute information used to describe the current width and height values ​​of the canvas container in the display terminal; the layout breakpoint rule is a set of configuration rules used to define the mapping relationship between different size ranges and corresponding layout strategies; and the transformation callback function is an executable code unit used to be automatically triggered to execute specific adaptation logic when the editing component needs to undergo a shape transformation.

[0076] In specific implementation, firstly, continuously monitor the size changes of the canvas container in each display terminal to obtain the size characteristics of the canvas container in each display terminal. This can be achieved through the following steps: Register an event handler function through the window size change event listener interface provided by the browser. When the event is triggered, the event handler function obtains the actual rendering width and height values ​​of the target canvas container in the current display terminal. The obtained geometric attribute information describing the current width and height values ​​of the canvas container in the display terminal is used as the size characteristics and passed to the subsequent responsive layout engine. Then, use the responsive layout engine to match each size characteristic with the preset layout breakpoint rules to obtain the matching editing component for each display terminal. This can be achieved through the following steps: The responsive layout engine receives the size characteristics and compares them sequentially with the predefined layout breakpoint rules. The preset layout breakpoint rules explicitly specify that when the container width is in different pixel ranges, the corresponding layout breakpoints should be set to the specified values. The responsive layout engine dynamically calculates the size and position of each editing component under the current size based on the matching results, using the number of grid columns or the arrangement method adopted. This calculated size and position information for each editing component under the current size is then output as the matched editing component. Finally, the layout of each editing component is transformed using a transformation callback function within each component. This can be achieved by the following steps: a predefined transformation callback function is used when each editing component is instantiated. This function receives the size and position information of the matched editing component as input parameters and executes the specified adaptation logic within the component based on these parameters. This results in a visually optimized, shape-transformed editing component that achieves the best visual and interactive effects on each display terminal, presented as the adapted editing component in the user interface.

[0077] In some embodiments, determining the data binding relationships and layout dependencies between various editing components can be achieved through the following steps:

[0078] Iterate through all editing components and perform logical filtering on the dependencies between data sources in each editing component to obtain the data binding relationships between each editing component.

[0079] Iterate through all editing components, determine the adjacency relationship between the position and size of each editing component in the document flow, and obtain the layout dependency relationship between each editing component.

[0080] It should be noted that, in this application, data binding relationship is a directed graph used to describe the one-way or two-way association relationship between editing components due to data flow and calculation order; before-after dependency is used to describe the logical order relationship in which the data source or calculated field of one editing component is calculated before another editing component; layout dependency is used to describe the mutual influence relationship between editing components due to spatial location and container layout rules; and adjacency relationship is used to describe the spatial proximity of editing components in the user interface layout based on their position and size.

[0081] In specific implementation, firstly, all editing components are traversed, and the dependencies between data sources in each editing component are logically filtered to obtain the data binding relationships between the editing components. This can be achieved through the following steps: starting from the root component of the AI ​​data view of the business data source, all editing components are traversed in breadth-first order, and the data configuration information of each editing component is checked; when the expression of a data query condition or calculated field of one editing component references the output result or filtering state of another editing component, it is determined that there is a dependency between the two; the starting and ending components of all such dependencies are recorded, and the directed graph describing the one-way or two-way association relationships formed between editing components due to data flow and calculation order is used as the data binding relationship; then, all editing components are traversed, and the data binding relationships between the editing components are logically filtered to obtain the data binding relationships between the editing components. The adjacency relationship between the positions and sizes of various editing components in the document flow is determined by rules, and the layout dependencies between the editing components can be achieved through the following steps: traverse all editing components and obtain the precise position coordinates and size information of each editing component in the page document flow through the Document Object Model interface; calculate the horizontal and vertical distances between the bounding boxes of any two editing components according to a predefined proximity algorithm; if both horizontal and vertical distances are less than a set threshold, it is determined that there is an adjacency relationship between the two editing components; record the relative position constraints between components caused by sharing the same layout row, layout column, or flex container according to the currently effective layout rules, and treat all relationships describing the mutual influence between editing components caused by spatial position and container layout rules as layout dependencies.

[0082] In step 104, the user's editing operations on the editing components on each display terminal are received, and the view state in each display terminal is updated based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation and the semantic context.

[0083] It should be noted that, in this application, the editing operation is a low-level interactive action for the visual editing component used to express the user's intention to modify. In specific implementation, by registering an event listener on the adapted editing component, native interactive events triggered by the user's input device are captured. The captured native interactive events are matched with a predefined operation pattern library and identified as standard editing operations, including but not limited to drag and move, resize, and modify attributes.

[0084] In some embodiments, the derivation and update of the view state in each display terminal based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation, and the semantic context can be achieved by the following steps:

[0085] Identify the operation type of the editing operation and extract the semantic context of the editing operation.

[0086] The update strategy for each editing component is selected from the data binding relationship and the layout dependency relationship based on the operation type;

[0087] The update strategy is used to perform differential updates on the view state of each display terminal.

[0088] It should be noted that in this application, the operation type is a functional label used to abstract and classify editing operations; the semantic context is a set of background information used to explain the meaning of editing operations in specific business scenarios and visualization structures; the update strategy is a specific execution plan used to guide how to change the view state according to the operation type and semantic context; and differential update is an efficient data synchronization mechanism used to synchronize only the changed parts of the view.

[0089] In specific implementation, firstly, identifying the operation type of the editing operation and extracting its semantic context can be achieved through the following steps: parsing the captured editing operation and matching it with a predefined operation pattern library to determine its operation type, which includes component displacement, size adjustment, data filtering, or style modification; simultaneously obtaining the specific component identifier affected by the editing operation, the displacement amount or modification value during the operation, and the data subset affected when the operation occurs; all this information constitutes the semantic context of the editing operation; then, selecting the update strategy for each editing component from the data binding relationship and the layout dependency relationship according to the operation type can be achieved through the following steps: selecting the corresponding update strategy from a pre-set strategy mapping table according to the operation type; if the operation type is component displacement or size adjustment, then selecting an update strategy based on the layout dependency relationship. The update strategy calculates and adjusts the geometric properties of all adjacent components. If the operation type is data filtering or mapping modification, an update strategy based on data binding relationships is selected, which recalculates the data state of all downstream dependent components along the data flow direction. Finally, differential updates of the view state in each display terminal using the update strategy can be achieved through the following steps: Execute the update strategy to calculate the minimum dataset where the view state of the current display terminal changes. This minimum dataset contains the identifier of the modified component and the differences between its old and new states. Serialize this difference content into a lightweight update instruction data packet and broadcast the packet to all other online display terminals via a network connection. After receiving the instruction, each display terminal applies only these differences to its local view, ultimately synchronizing the view states of all display terminals and achieving efficient differential updates.

[0090] Furthermore, in another aspect of this application, in some embodiments, this application provides an AI-based, multi-terminal, real-time editable data visualization system, see reference. Figure 3 The figure is a schematic diagram of the structure of an AI-based, multi-terminal, real-time editable data visualization system according to some embodiments of this application. The AI-based, multi-terminal, real-time editable data visualization system includes: an acquisition module 201, a processing module 202, and an execution module 203, which are described below:

[0091] The acquisition module 201 in this application is mainly used to acquire the business dataset to be visualized in the business data source, extract the dimension field and metric field for analyzing the business data source from the business dataset, and then establish a visualization canvas with the dimension field as the vertical axis and the metric field as the horizontal axis.

[0092] Processing module 202, in this application, is used to input the field type of the dimension field and the data distribution characteristics of the metric field into a pre-trained AI chart recommendation model, and use the AI ​​chart recommendation model to automatically generate and render editing components to a visualization canvas to obtain an AI data view of the business data source;

[0093] It should be noted that the processing module 202 is also used to reorganize the display layout of the AI ​​data view on each display terminal based on the size characteristics of the canvas container in each display terminal, and to trigger the shape transformation logic of the editing component so as to present the adapted editing component on each display terminal, thereby determining the data binding relationship and layout dependency relationship between each editing component.

[0094] The execution module 203 in this application is mainly used to receive the user's editing operations on the editing components on each display terminal, and to perform derivative updates on the view state in each display terminal based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation and the semantic context.

[0095] The foregoing has detailed examples of an AI-based, multi-terminal, real-time editable data visualization system and method provided in this application. It is understood that the corresponding apparatus, in order to achieve the above functions, includes hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0096] In some embodiments, this application also provides a computer device, the computer device including a memory and a processor, the memory for storing a computer program, and the processor for calling and running the computer program from the memory, so that the computer device performs the above-described AI-based multi-terminal real-time editable data visualization method.

[0097] In some embodiments, reference Figure 4 The dashed lines in the figure indicate that the unit or module is optional. This figure is a structural schematic diagram of a computer device implementing an AI-based, multi-terminal, real-time editable data visualization method according to an embodiment of this application. The AI-based, multi-terminal, real-time editable data visualization method described in the above embodiments can be... Figure 4The computer device shown is used to implement this, and the computer device includes at least one processor 301, a memory 302 and at least one communication unit 305. The computer device may be a terminal device, a server or a chip.

[0098] Processor 301 can be a general-purpose processor or a special-purpose processor. For example, processor 301 can be a central processing unit (CPU), which can be used to control computer devices, execute software programs, and process data from software programs. The computer device may also include a communication unit 305 for inputting (receiving) and outputting (transmitting) signals.

[0099] For example, the computer device may be a chip, and the communication unit 305 may be the input and / or output circuit of the chip, or the communication unit 305 may be the communication interface of the chip, which may be a component of a terminal device, network device or other device.

[0100] For example, the computer device may be a terminal device or a server, and the communication unit 305 may be a transceiver of the terminal device or the server, or the communication unit 305 may be a transceiver circuit of the terminal device or the server.

[0101] The computer device may include one or more memories 302 storing a program 304. The program 304 can be executed by a processor 301 to generate instructions 303, causing the processor 301 to execute the method described in the above method embodiments according to the instructions 303. Optionally, the memory 302 may also store data (such as a target audit model). Optionally, the processor 301 may also read data stored in the memory 302, which may be stored at the same storage address as the program 304, or it may be stored at a different storage address than the program 304.

[0102] The processor 301 and memory 302 can be configured separately or integrated together, for example, integrated on the system on chip (SOC) of the terminal device.

[0103] It should be understood that each step of the above method embodiment can be completed by hardware logic circuits or software instructions in the processor 301. The processor 301 can be a CPU, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, such as discrete gate, transistor logic devices, or discrete hardware components.

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

[0105] For example, in some embodiments, this application also provides a computer-readable storage medium storing instructions or code that, when executed on a computer, cause the computer to implement the above-described AI-based, multi-terminal, real-time editable data visualization method.

[0106] Although preferred embodiments of this application have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of this application.

[0107] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A real-time editable data visualization method based on AI and oriented towards multiple terminals, characterized in that, Includes the following steps: Obtain the business dataset to be visualized from the business data source, extract the dimension fields and measure fields for analyzing the business data source from the business dataset, and then establish a visualization canvas with the dimension fields as the vertical axis and the measure fields as the horizontal axis. The field type of the dimension field and the data distribution characteristics of the metric field are input into the pre-trained AI chart recommendation model. The AI ​​chart recommendation model is used to automatically generate and render the editing component to the visualization canvas to obtain the AI ​​data view of the business data source. Based on the size characteristics of the canvas container in each display terminal, the responsive layout engine calls the layout breakpoint rules to reorganize the display layout of the AI ​​data view on each display terminal, and triggers the shape transformation logic of the editing component to present the adapted editing component on each display terminal, thereby determining the data binding relationship and layout dependency relationship between each editing component. The system receives user editing operations on editing components on various display terminals and updates the view state on each display terminal based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation, and the semantic context.

2. The method as described in claim 1, characterized in that, The extraction of dimension fields and metric fields from the business dataset for analyzing business data sources specifically includes: Metadata parsing is performed on each field of the business dataset to identify the basic data type of each field and determine the business semantics and numerical distribution characteristics of each field; Based on the semantics and numerical distribution of each business, classification rules are applied to all fields in the business dataset to identify field roles. Then, each basic data type is used to attach field type and role labels to each field to obtain dimension fields and metric fields for analyzing business data sources.

3. The method as described in claim 1, characterized in that, Creating a visualization canvas with the dimension field as the vertical axis and the metric field as the horizontal axis specifically includes: Initialize an empty, programmable canvas container; A Cartesian coordinate system is established within the canvas container based on all dimension fields and metric fields, thereby obtaining a visualization canvas with the dimension fields as the vertical axis and the metric fields as the horizontal axis.

4. The method as described in claim 1, characterized in that, The field type of the dimension field and the data distribution characteristics of the metric field are input into a pre-trained AI chart recommendation model. The AI ​​chart recommendation model is then used to automatically generate and render editing components onto a visualization canvas, resulting in an AI data view of the business data source, specifically including: Determine the field type of the dimension field and the data distribution characteristics of the metric field; The input feature vector of the AI ​​chart recommendation model is constructed by the encoding of the field type and the data distribution characteristics; The input feature vector is input into a pre-trained AI chart recommendation model, and the AI ​​chart recommendation model is used to output the recommended chart type and the initial mapping relationship between data fields and graphic attributes; Based on the initial mapping relationship, the business dataset is bound to graphical attributes, and the initial visual editing component is rendered in the visualization canvas to obtain the AI ​​data view of the business data source.

5. The method as described in claim 1, characterized in that, Based on the size characteristics of the canvas container in each display terminal, the responsive layout engine is used to call layout breakpoint rules to reorganize the display layout of the AI ​​data view on each display terminal, and trigger the shape transformation logic of the editing component to present the adapted editing component on each display terminal. Specifically, this includes: Continuously monitor the size changes of the canvas container in each display terminal to obtain the size characteristics of the canvas container in each display terminal; The responsive layout engine is used to match each size feature with the preset layout breakpoint rules to obtain the editing components that match each display terminal. The layout of each editing component is transformed using the transformation callback function inside each editing component, resulting in an adapted editing component that is displayed on each display terminal.

6. The method as described in claim 1, characterized in that, Determining the data binding relationships and layout dependencies between various editing components specifically includes: Iterate through all editing components and perform logical filtering on the dependencies between data sources in each editing component to obtain the data binding relationships between each editing component. Iterate through all editing components, determine the adjacency relationship between the position and size of each editing component in the document flow, and obtain the layout dependency relationship between each editing component.

7. The method as described in claim 1, characterized in that, The specific steps for updating the view state in each display terminal based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation, and the semantic context include: Identify the operation type of the editing operation and extract the semantic context of the editing operation. The update strategy for each editing component is selected from the data binding relationship and the layout dependency relationship based on the operation type; The update strategy is used to perform differential updates on the view state of each display terminal.

8. A real-time editable data visualization system based on AI and oriented towards multiple terminals, characterized in that, include: The acquisition module is used to acquire the business dataset to be visualized from the business data source, extract the dimension fields and metric fields for analyzing the business data source from the business dataset, and then establish a visualization canvas with the dimension fields as the vertical axis and the metric fields as the horizontal axis. The processing module is used to input the field type of the dimension field and the data distribution characteristics of the metric field into a pre-trained AI chart recommendation model, and use the AI ​​chart recommendation model to automatically generate and render the editing component to the visualization canvas to obtain the AI ​​data view of the business data source. The processing module is also used to reorganize the display layout of the AI ​​data view on each display terminal based on the size characteristics of the canvas container in each display terminal, and use the responsive layout engine to call the layout breakpoint rules, and trigger the shape transformation logic of the editing component to present the adapted editing component on each display terminal, thereby determining the data binding relationship and layout dependency relationship between each editing component. The execution module is used to receive user editing operations on editing components on various display terminals, and to perform derivative updates on the view state in each display terminal based on the data binding relationship, the layout dependency relationship, the operation type of the editing operation, and the semantic context.

9. A computer device, characterized in that, The computer device includes a memory and a processor, the memory being used to store computer programs, and the processor being used to call and run the computer programs from the memory, causing the computer device to perform the AI-based, multi-terminal, real-time editable data visualization method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores instructions or code that, when executed on a computer, cause the computer to implement the AI-based, multi-terminal, real-time editable data visualization method as described in any one of claims 1 to 7.

Images