Data visualization methods, devices, electronic equipment and media

Abstract

This disclosure relates to a data visualization method, apparatus, electronic device, and medium. The data visualization method includes: in response to a user dragging and dropping a data table onto a canvas, determining whether a first node formed by the data table on the canvas collides with a second node on the canvas; if a collision occurs, determining the node type of the second node; and generating a target node on the canvas based on the node type of the second node. By determining whether to merge two nodes based on whether a collision occurs between the first and second nodes, the user can quickly merge the dataset in the data table with the dataset in the second node, thereby reducing the complexity of the visualization system operation. Furthermore, since the user can create a dataset by dragging and dropping the data table onto the canvas, the dataset creation method is simple, further reducing the complexity of the visualization system operation.

Description

Technical Field

[0001] This disclosure relates to the field of data visualization technology, and in particular to a data visualization method, apparatus, electronic device, and medium. Background Technology

[0002] Currently, visualization systems suffer from operational complexity. Summary of the Invention

[0003] To overcome the problems existing in related technologies, this disclosure provides a data visualization method, apparatus, electronic device, and medium.

[0004] According to a first aspect of the present disclosure, a data visualization method is provided, the data visualization method comprising:

[0005] In response to a user dragging a data table onto a canvas, determine whether the data table collides with a second node in the canvas at a first node formed on the canvas.

[0006] In the event of a collision between the first node and the second node, determine the node type of the second node;

[0007] Based on the node type of the second node, a target node is generated on the canvas.

[0008] In some embodiments of this disclosure, determining whether the data table collides with a second node in the canvas at a first node formed on the canvas includes:

[0009] Determine the position information of the first node on the canvas;

[0010] Determine whether the location information is located within the collision area of ​​the second node;

[0011] If the location information is within the collision area, it is determined that the first node and the second node have collided;

[0012] If the location information is outside the collision area, it is determined that the first node did not collide with the second node.

[0013] In some embodiments of this disclosure, before determining whether the data table collides with a second node in the canvas, the data visualization method further includes:

[0014] Determine the first length of the second node in the first direction and the second length in the second direction;

[0015] The sum and difference of the first coordinates of the second node and the first length in the first direction are respectively used as the first boundary and the second boundary in the first direction;

[0016] The sum and difference of the second coordinates of the second node and the second length in the second direction are respectively used as the third boundary and the fourth boundary in the second direction;

[0017] The region formed by the first boundary, the second boundary, the third boundary, and the fourth boundary is defined as the collision region.

[0018] Wherein, the first direction and the second direction are perpendicular.

[0019] In some embodiments of this disclosure, generating a target node on the canvas according to the node type of the second node includes:

[0020] If the node type of the second node is a model node, a prompt message is displayed to ask the user whether to merge the first node and the second node.

[0021] In response to the user's confirmation of the prompt information, the first node and the second node are merged on the canvas to form the target node, and the target node is generated.

[0022] In response to the user's cancellation operation on the prompt message, the node type of the first node is set to the model node on the canvas, and the first node after setting is generated as the target node.

[0023] In some embodiments of this disclosure, generating a target node on the canvas according to the node type of the second node includes:

[0024] If the node type of the second node is a node type other than a model node, the first node is generated on the canvas as the target node.

[0025] In some embodiments of this disclosure, after generating the target node on the canvas according to the node type of the second node, the data visualization method further includes:

[0026] In response to the user's export operation, the target node is exported as a first data model, which is used to construct a visualization chart.

[0027] In response to the user's publish operation, the first data model is published.

[0028] In some embodiments of this disclosure, the data visualization method further includes:

[0029] In response to the user's first generation operation on the canvas for a third node, a connection node associated with the third node is formed, wherein the node type of the third node is a model node;

[0030] Configure the connection node in response to the user's first configuration operation on the connection node;

[0031] Once the connection node is configured, the connection node is generated on the canvas.

[0032] In some embodiments of this disclosure, the first configuration operation includes a first configuration sub-operation and a second configuration sub-operation; configuring the connection node in response to the user's first configuration operation on the connection node includes:

[0033] In response to a user’s first configuration sub-operation on the connection node, a first dataset of a fourth node corresponding to the first configuration sub-operation is determined, wherein the type of the fourth node is the model node;

[0034] In response to a user's second configuration sub-operation on the connection node, the first dataset and the second dataset of the third node are connected by a connection relationship corresponding to the second configuration sub-operation.

[0035] In some embodiments of this disclosure, after the connection nodes are generated on the canvas, the data visualization method further includes:

[0036] In response to the user's export operation, the connection node is exported as a second data model, which is used to construct a visualization chart.

[0037] In response to the user's publish action, the second data model is published.

[0038] In some embodiments of this disclosure, the data visualization method further includes:

[0039] In response to the user's second generation operation on the canvas for the fifth node, a structured query language node associated with the fifth node is formed, wherein the node type of the fifth node is a model node;

[0040] In response to a user's second configuration operation on the structured query language node, configure the structured query language node;

[0041] In response to a user's third generation operation on the Structured Query Language (SCL) node, the SCL node is generated on the canvas.

[0042] In some embodiments of this disclosure, after configuring the Structured Query Language node, the data visualization method further includes:

[0043] In response to the user's operation on the Structured Query Language node, a third dataset corresponding to the Structured Query Language node is generated;

[0044] In response to a user's third configuration operation on the Structured Query Language node, the third dataset is configured.

[0045] In some embodiments of this disclosure, after the structured query language node is generated on the canvas, the data visualization method further includes:

[0046] In response to the user's export operation, the structured query language node is exported as a third data model, which is used to construct a visualization chart;

[0047] In response to the user's publishing action, the third data model is published.

[0048] In some embodiments of this disclosure, before determining whether the data table collides with a second node in the canvas in response to a user dragging a data table onto the canvas, the data visualization method further includes:

[0049] In response to user-defined operations, define nodes of different node types;

[0050] In response to the user's registration action, register nodes of each of the specified node types;

[0051] In response to the user's fourth configuration operation, configure the canvas;

[0052] In response to the user's binding operation, event binding is performed on nodes of each of the aforementioned node types.

[0053] According to a second aspect of the present disclosure, a data visualization apparatus is provided, the data visualization apparatus comprising:

[0054] A first determining module is configured to determine, in response to a user dragging a data table onto a canvas, whether the data table collides with a second node in the canvas at a first node formed on the canvas.

[0055] The second determining module is configured to determine the node type of the second node in the event that the first node collides with the second node.

[0056] A generation module is configured to generate a target node on the canvas based on the node type of the second node.

[0057] According to a third aspect of the present disclosure, an electronic device is provided, the electronic device comprising:

[0058] processor;

[0059] Memory used to store the processor's executable instructions;

[0060] The processor is configured to execute the data visualization method described above.

[0061] According to a fourth aspect of the present disclosure, a non-transitory computer-readable storage medium is provided, wherein when instructions in the storage medium are executed by a processor of a terminal, the terminal is enabled to perform the data visualization method as described above.

[0062] The technical solutions provided by the embodiments of this disclosure may include the following beneficial effects:

[0063] When a user needs to create a dataset, they can drag and drop a data table onto the canvas. In response to this action, the system determines whether the first node formed on the canvas collides with a second node, thus deciding whether to directly generate the first node. If a collision occurs, the user may want to merge the two nodes; the system then determines the node type of the second node to determine if merging is possible. Based on the node type, it determines whether to merge the first and second nodes, generating the target node on the canvas. By determining whether to merge two nodes based on collision, users can quickly merge datasets from a data table with datasets from a second node, reducing the complexity of the visualization system. Furthermore, the ease of creating datasets by dragging and dropping data tables onto the canvas further simplifies the visualization system's operation.

[0064] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0065] The accompanying drawings, which are incorporated in and form a part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure.

[0066] Figure 1 This is a flowchart illustrating a data visualization method according to an exemplary embodiment;

[0067] Figure 2 This is a schematic diagram of a visualization system according to an exemplary embodiment;

[0068] Figure 3 This is a flowchart illustrating a data visualization method according to another exemplary embodiment;

[0069] Figure 4 This is a flowchart illustrating a data visualization method according to another exemplary embodiment;

[0070] Figure 5-1 This is a schematic diagram of a visualization system according to another exemplary embodiment;

[0071] Figure 5-2 This is a schematic diagram of a visualization system according to another exemplary embodiment;

[0072] Figure 6 This is a flowchart illustrating a data visualization method according to another exemplary embodiment;

[0073] Figure 7 This is a flowchart illustrating a data visualization method according to another exemplary embodiment;

[0074] Figure 8 This is a flowchart illustrating a data visualization method according to another exemplary embodiment;

[0075] Figure 9 This is a flowchart illustrating a data visualization method according to another exemplary embodiment;

[0076] Figure 10 This is a block diagram illustrating a data visualization apparatus according to an exemplary embodiment;

[0077] Figure 11 This is a block diagram of an electronic device according to an exemplary embodiment.

[0078] In the picture:

[0079] 100 - First determining module; 200 - Second determining module; 300 - Generation module; 400 - Electronic device; 402 - Processing component; 404 - Memory; 406 - Power supply component; 408 - Multimedia component; 410 - Audio component; 412 - Input / output interface; 414 - Sensor component; 416 - Communication component; 420 - Processor. Detailed Implementation

[0080] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims. It should also be understood that the term “and / or” as used herein refers to and includes any or all possible combinations of one or more of the associated listed items.

[0081] Currently, with the development of information technology and the increasing demands of users, electronic devices can visualize data through visualization systems to facilitate user understanding and analysis. Visualization systems are widely used in industries such as manufacturing, healthcare, education, finance, and the military. Visualization systems can present data through tables, graphs, and visualization tools. For example, data visualization can be achieved through ad-hoc reports, Online Analytical Processing (OLAP) systems, and enterprise charts (Echarts).

[0082] In related technologies, a data visualization method is provided. When a user needs to add a data table to the canvas, they must click on the data table and set its position on the canvas. When merging the dataset from the data table with the dataset from a node on the canvas, both the data table and the node need to be configured separately. Therefore, the visualization system suffers from operational complexity in creating and merging datasets.

[0083] To address the aforementioned technical issues, this disclosure provides a data visualization method that creates datasets by dragging and dropping data tables onto a canvas, avoiding the need to click on the data tables and set their position on the canvas, thereby reducing the complexity of the visualization system operation. Furthermore, by dragging the data table to cause a collision between the first node formed on the canvas and the second node, the dataset in the data table can be merged with the dataset in the second node without requiring separate configuration of the data table and the second node, further reducing the complexity of the visualization system operation.

[0084] This disclosure provides a data visualization method, such as... Figure 1 As shown, the method includes:

[0085] S100, in response to the user's operation of dragging the data table to the canvas, determine whether the first node of the data table formed on the canvas collides with the second node in the canvas.

[0086] S200. In the event of a collision between the first node and the second node, determine the node type of the second node.

[0087] S300. Generate the target node on the canvas according to the node type of the second node.

[0088] In this embodiment, when a user needs to create a dataset, the user can drag and drop a data table onto the canvas. In response to the user's dragging and dropping of the data table onto the canvas, it is determined whether the first node formed by the data table on the canvas collides with a second node on the canvas, thus determining whether to directly generate the first node. If the first node and the second node collide, the user may want to merge the first node and the second node. The node type of the second node is determined to determine whether the second node can be merged. Based on the node type, it is determined whether to merge the first node and the second node, and the target node is generated on the canvas. By determining whether to merge the two nodes based on whether the first node and the second node collide, the user can quickly merge the dataset in the data table with the dataset in the second node, thereby reducing the complexity of the visualization system operation. Simultaneously, since the user can create a dataset by dragging and dropping the data table onto the canvas, the dataset creation method is simple, further reducing the complexity of the visualization system operation.

[0089] For example, the first node can be a table node. The second node can be any node in the canvas. Determining whether the first node of the data table collides with a second node in the canvas in step S100 can be determining whether the first node collides with any second node in the canvas. If the first node collides with one of the second nodes, it is determined that the first node and the second node have collided.

[0090] For example, such as Figure 2 As shown, the visualization system can display canvases, data tables, and data models. When a user needs to add a dataset from a data table, they can drag and drop the data table with the corresponding name onto the canvas.

[0091] In one embodiment, such as Figure 3 As shown, in step S100, whether the data table collides with the second node in the canvas at the first node formed on the canvas is determined in the following way:

[0092] S110. Determine the position information of the first node on the canvas.

[0093] S120. Determine whether the location information is located within the collision area of ​​the second node.

[0094] S130. If the location information is within the collision area, determine that the first node and the second node have collided.

[0095] S140. If the location information is outside the collision area, determine that the first node has not collided with the second node.

[0096] In this embodiment, the position information of the first node on the canvas is determined to determine its position. It is then determined whether the position information is within the collision region of the second node to determine if the first node collides with the second node. If the position information is within the collision region, the first node and the second node partially overlap, and a collision is determined. If the position information is outside the collision region, the first node and the second node are separated, and no collision is determined. By determining whether the first and second nodes collide based on their position information, it is possible to determine whether the user needs to merge the first and second nodes, thereby reducing the complexity of the visualization system operation.

[0097] In one embodiment, such as Figure 4 As shown, before determining in step S100 whether the first node of the data table collides with the second node in the canvas, the data visualization method further includes:

[0098] S400, Determine the first length of the second node in the first direction and the second length in the second direction.

[0099] S410. Determine the sum and difference of the first coordinates and the first length of the second node in the first direction as the first boundary and the second boundary in the first direction, respectively.

[0100] S420. Determine the sum and difference of the second coordinates and the second length of the second node in the second direction as the third and fourth boundaries in the second direction, respectively.

[0101] S430. The area formed by the first boundary, the second boundary, the third boundary, and the fourth boundary is defined as the collision area.

[0102] The first direction and the second direction are perpendicular.

[0103] In this embodiment, a first length in a first direction and a second length in a second direction of the second node are determined to determine the area occupied by the second node in the canvas. When the first node and the second node are in critical contact, the area formed by the coordinates of the first node in both the first and second directions is designated as the collision area. Since the first and second nodes have the same shape and size, the sum and difference of the first coordinates and the first length of the second node in the first direction are determined as the first and second boundaries in the first direction, respectively. Similarly, the sum and difference of the second coordinates and the second length of the second node in the second direction are determined as the third and fourth boundaries in the second direction, respectively. Since the coordinates of the first node in both the first and second directions are located at the respective boundaries when the first node and the second node are in critical contact, the area formed by the first, second, third, and fourth boundaries is designated as the collision area. By determining the collision area based on the size and coordinates of the second node, it is possible to accurately determine whether a collision occurs between the first and second nodes after dragging the first node, thereby improving the reliability of the visualization system operation.

[0104] For example, such as Figure 5-1 and Figure 5-2 As shown, the first direction is the x-axis, the second direction is the y-axis, the first coordinate is x1, the second coordinate is y1, the third coordinate in the position information of the first node in the first direction is x2, and the fourth coordinate in the position information of the first node in the second direction is y2. The first length is l1, and the second length is l2. The collision region of the second node is the area formed by the x-axis coordinates (x1-l1) to (x1+l1) and the y-axis coordinates (y1-l2) to (y1+l2). If both x2 and y2 are within the collision region, it is determined that the first node and the second node have collided. If x2 and / or y2 are outside the collision region, it is determined that the first node has not collided with the second node.

[0105] In one embodiment, the generation of the target node on the canvas in step S300 based on the node type of the second node can be determined in the following way:

[0106] If the second node is a model node, a prompt message is displayed to ask the user whether to merge the first node with the second node.

[0107] In response to the user's confirmation of the prompt, the first node and the second node are merged on the canvas to form the target node, and the target node is generated.

[0108] In response to the user's cancellation action on the prompt message, the node type of the first node on the canvas is set to model node, and the first node after setting is generated as the target node.

[0109] In this embodiment, since the model node contains a dataset and can be merged with the dataset in the data table, when the second node's node type is a model node, a prompt message is displayed to ask the user whether to merge the first and second nodes. In response to the user's confirmation of the prompt message, indicating that the user wishes to merge the datasets in the first and second nodes, the first and second nodes are merged and generated as the target node on the canvas. In response to the user's cancellation of the prompt message, indicating that the user does not wish to merge the datasets in the first and second nodes, the first node's node type is set to a model node on the canvas and generated as the target node. By generating a merged target node when the user wishes to merge nodes, the two datasets can be quickly merged, thereby reducing the complexity of the visualization system operation.

[0110] In one embodiment, the step S300 of generating the target node on the canvas based on the node type of the second node can also be determined in the following way:

[0111] If the node type of the second node is a node type other than the model node, the first node is generated on the canvas as the target node.

[0112] In this embodiment, since nodes other than model nodes do not contain datasets or do not support dataset merging, when the second node's node type is a node other than a model node, only the first node as the target node is generated on the canvas without displaying any prompt information. By directly generating the first node when nodes cannot be merged, the user is avoided from performing additional operations, thereby reducing the complexity of the visualization system operation.

[0113] For example, after determining in step S100 whether the data table collides with a second node in the canvas at the first node formed on the canvas, the data visualization method further includes:

[0114] The first node is generated on the canvas if the first node does not collide with the second node.

[0115] In one embodiment, after generating the target node on the canvas according to the node type of the second node in step S300, the data visualization method further includes:

[0116] In response to the user's export operation, the target node is exported as the first data model, which is used to build a visualization chart.

[0117] In response to the user's publishing action, the first data model is published.

[0118] In this embodiment, after creating a dataset by dragging and dropping, the user can export the target node as the first data model. When the first data model is invoked, the visualization chart can be quickly constructed. After exporting the target node, the user can publish the first data model, allowing other users to quickly use it to build visualization charts without having to recreate the dataset contained in the first data model. Because the first data model can be exported and published, it facilitates the invocation of the dataset within the first data model, thereby reducing the complexity of the visualization system operation.

[0119] In one embodiment, such as Figure 6 As shown, data visualization methods also include:

[0120] S500: In response to the user's first generation operation on the canvas for the third node, a connection node associated with the third node is formed, wherein the node type of the third node is a model node.

[0121] S510, in response to the user's first configuration operation on the connection node, configure the connection node.

[0122] S520. Once the connection node configuration is complete, generate the connection node on the canvas.

[0123] In this embodiment, when a user needs to connect two datasets, a first generation operation is performed on a third node containing one of the datasets on the canvas, forming a connection node associated with the third node. In response to the user's first configuration operation on the connection node, the connection node is configured to connect the two datasets. Once the connection node is configured, a connection node is generated on the canvas to establish the connection relationship between the two datasets. By generating the connection node through operations on the third node, the two datasets can be quickly connected, thereby reducing the complexity of the visualization system operation.

[0124] For example, the connecting node can be a join node.

[0125] In one embodiment, the first configuration operation includes a first configuration sub-operation and a second configuration sub-operation. In step S510, in response to the user's first configuration operation on the connection node, the connection node is configured and determined as follows:

[0126] In response to the user's first configuration sub-operation on the connection node, determine the first dataset of the fourth node corresponding to the first configuration sub-operation, where the type of the fourth node is a model node.

[0127] In response to the user's second configuration sub-operation on the connection node, the first dataset and the second dataset of the third node are connected according to the connection relationship corresponding to the second configuration sub-operation.

[0128] In this embodiment, during the configuration of the connection nodes, it is necessary to select the fourth node corresponding to the first dataset to be connected. In response to the user's first configuration sub-operation on the connection node, the first dataset of the fourth node corresponding to the first configuration sub-operation is determined, thus selecting the first dataset to be connected. Since there are multiple connection relationships between the first and second datasets, in response to the user's second configuration sub-operation on the connection node, the first dataset and the second dataset of the third node are connected according to the connection relationship corresponding to the second configuration sub-operation. By connecting the first and second datasets with the expected connection relationship through the first configuration operation, complex configuration operations on the third and fourth nodes are unnecessary, thereby reducing the complexity of the visualization system operation.

[0129] For example, after connecting the first dataset and the second dataset of the third node with the connection relationship corresponding to the second configuration sub-operation in the above steps, the fourth node can be moved below the third node on the canvas to indicate to the user that the first and second datasets have been connected. The connection relationship can include left join, right join, inner join, full join, etc.

[0130] For example, the first configuration operation further includes a third configuration sub-operation. After determining the first dataset of the fourth node corresponding to the first configuration sub-operation, the data visualization method further includes:

[0131] In response to the user's third configuration sub-operation on the connection node, the output field is determined. The output field is used to filter the data to be joined in the first and second datasets. For example, if the output field for the first dataset is A and the output field for the second dataset is B, then the datasets contained in A in the first dataset and the datasets contained in B in the second dataset will be joined.

[0132] In one embodiment, after generating connection nodes on the canvas in step S520, the data visualization method further includes:

[0133] In response to the user's export operation, the connection nodes are exported as a second data model, which is used to build visualization charts.

[0134] In response to the user's publish action, publish the second data model.

[0135] In this embodiment, after generating connection nodes on the canvas, the user can export these nodes as a second data model. When the second data model is invoked, the visualization chart can be quickly constructed. After exporting the connection nodes, the user can publish the second data model, allowing other users to quickly build visualization charts using it without reconnecting to the dataset contained within the second data model. Because the second data model can be exported and published, it facilitates the use of the dataset within it, thereby reducing the complexity of the visualization system operation.

[0136] In one embodiment, such as Figure 7 As shown, data visualization methods also include:

[0137] S600, in response to the user's second generation operation on the canvas for the fifth node, forms a structured query language node associated with the fifth node, the node type of the fifth node being a model node.

[0138] S610, in response to the user's second configuration operation on the Structured Query Language node, configure the Structured Query Language node.

[0139] S620, in response to the user's third generation operation on the Structured Query Language node, generates the Structured Query Language node on the canvas.

[0140] In this embodiment, when a user needs to manage a dataset, a second generation operation is performed on the fifth node containing the dataset on the canvas, forming a Structured Query Language (SCL) node associated with the fifth node. In response to the user's second configuration operation on the SCL node, the SCL node is configured for dataset management. In response to the user's third generation operation on the SCL node, the user's dataset management method is completed, and the SCL node is generated on the canvas. Generating the SCL node by operating on the fifth node enables rapid dataset management, thereby reducing the complexity of the visualization system operation.

[0141] For example, a Structured Query Language (SCL) node can be an SQL (Structured Query Language) node. Dataset management can involve querying, updating, creating, and deleting data within the dataset.

[0142] For example, configuring the Structured Query Language (SCL) node in step S610 can involve writing variables into the SCL node. After identifying the variables, the user can configure them. For example, the variable's name, data type, data format, and default value can be configured.

[0143] In one embodiment, after configuring the Structured Query Language node in step S610, the data visualization method further includes:

[0144] In response to user actions on the Structured Query Language (SCL) node, a third dataset corresponding to the SCL node is generated.

[0145] In response to a user's third configuration operation on a Structured Query Language node, configure a third dataset.

[0146] In this embodiment, after configuring the Structured Query Language (SCL) node, errors may exist within the SCL node. It is necessary to run the SCL node to determine if its configuration is correct. In response to the user's operation on the SCL node, a third dataset corresponding to the SCL node is generated, allowing the user to determine the correctness of the SCL node configuration and configure the third dataset based on the running results. In response to the user's third configuration operation on the SCL node, the third dataset is configured to adjust the data within it. By running the configured SCL node, configuration errors are avoided, thereby improving the reliability of the visualization system operation.

[0147] For example, configuring the third dataset in the above steps can include configuring the name, field types, and display format of the third dataset.

[0148] In one embodiment, after generating the structured query language node on the canvas in step S620, the data visualization method further includes:

[0149] In response to the user's export operation, Structured Query Language nodes are exported as a third data model, which is used to build visualization charts.

[0150] In response to the user's publishing action, publish the third data model.

[0151] In this embodiment, after the user generates a Structured Query Language (SCL) node on the canvas, they can export the SCL node as a third data model. When the third data model is invoked, visualization charts can be quickly constructed. After exporting the SCL node, the user can publish the third data model, allowing other users to quickly build visualization charts using the third data model without reconfiguring the SCL node. Because the third data model can be exported and published, it facilitates the use of datasets within the third data model, thereby reducing the complexity of the visualization system operation.

[0152] In one embodiment, such as Figure 8As shown, in step S100, in response to the user's dragging and dropping of the data table onto the canvas, before determining whether the data table collides with a second node in the canvas at the first node formed on the canvas, the data visualization method further includes:

[0153] S700: Responds to user-defined operations and defines nodes of different node types.

[0154] S710: In response to the user's registration operation, register nodes of various node types.

[0155] S720, in response to the user's fourth configuration operation, configures the canvas.

[0156] S730 responds to user binding operations by binding events to nodes of various node types.

[0157] In this embodiment, in response to the user's definition operation, nodes of different types are defined to achieve different functions. In response to the user's registration operation, nodes of various types are registered to be used on the canvas. In response to the user's fourth configuration operation, the canvas is configured to meet the user's expectations for display. In response to the user's binding operation, events are bound to nodes of various types so that corresponding content is displayed after the user interacts with the nodes. By setting different types of nodes and configuring the canvas, users can quickly achieve corresponding functions on the expected canvas using different types of nodes, thereby reducing the complexity of the visualization system operation.

[0158] For example, node types may include table nodes, model nodes, and operator nodes. Among them, the node type of join nodes and structured query language nodes is operator nodes.

[0159] For example, registering nodes of each node type in step S710 can be done by storing the first basic information of nodes of each node type in a preset dataset (Map), and registering nodes of each node type by traversing the preset dataset. The first basic information may include the node type name, the length of the node in the first and second directions, the node's level, and the user interface (UI) components displayed by the node, etc.

[0160] For example, configuring the canvas in step S720 may include configuring second basic information about the canvas. This second basic information may include grid line shape, grid line size, grid line color, canvas background color, canvas length in a first and second direction, whether the canvas can be zoomed using the mouse wheel, and whether the canvas can be dragged using the keyboard. Configuring the canvas in step S720 may also include listening to basic canvas events. These basic events may include double-clicking a blank area, single-clicking a blank area, clicking a node, mouse events, edge dragging, node movement, and node addition.

[0161] For example, the event binding for nodes of each node type in step S730 can be generating a corresponding menu when a node is clicked, and triggering an event callback when the menu is clicked. The menu generation position can be determined based on the node's position on the canvas page. For instance, in a first direction, the menu can be displayed to the right of the node, and in a second direction, one end of the menu can be displayed flush with one end of the node.

[0162] This disclosure provides a data visualization method, such as... Figure 9 As shown, the method includes:

[0163] S800, Determine the first length of the second node in the first direction and the second length in the second direction.

[0164] S810. Determine the sum and difference of the first coordinates and the first length of the second node in the first direction as the first boundary and the second boundary in the first direction, respectively.

[0165] S820. Determine the sum and difference of the second coordinates and the second length of the second node in the second direction as the third and fourth boundaries in the second direction, respectively.

[0166] S830. The area formed by the first boundary, the second boundary, the third boundary, and the fourth boundary is defined as the collision area.

[0167] S840, in response to the user's operation of dragging and dropping the data table onto the canvas, determines the position information of the first node on the canvas.

[0168] S850, Determine whether the location information is located within the collision area of ​​the second node.

[0169] S860. If the location information is within the collision area, determine that the first node and the second node have collided.

[0170] S870. In the event of a collision between the first node and the second node, determine the node type of the second node.

[0171] S880, if the node type of the second node is a model node, display a prompt message.

[0172] S890, in response to the user's confirmation operation on the prompt information, merge the first node and the second node on the canvas as the target node, and generate the target node.

[0173] S900: In response to the user's cancellation operation on the prompt message, the node type of the first node on the canvas is set to model node, and the first node after setting is generated as the target node.

[0174] S910. If the node type of the second node is a node type other than the model node, generate the first node as the target node on the canvas.

[0175] S920, in response to the user's export operation, exports the target node as the first data model.

[0176] S930, in response to the user's publish operation, publishes the first data model.

[0177] S940. If the location information is outside the collision area, determine that the first node has not collided with the second node.

[0178] S950: Generate the first node on the canvas if the first node does not collide with the second node.

[0179] In this embodiment, a first length in a first direction and a second length in a second direction of the second node are determined to determine the area occupied by the second node. The sum and difference of the first coordinates and the first length of the second node in the first direction are determined as the first and second boundaries in the first direction, respectively. The sum and difference of the second coordinates and the second length of the second node in the second direction are determined as the third and fourth boundaries in the second direction, respectively. The area formed by the first, second, third, and fourth boundaries is the collision area. In response to the user's operation of dragging the data table onto the canvas, the position information of the first node on the canvas is determined, and it is determined whether the position information is located within the collision area of ​​the second node. If the position information is within the collision area, the first node and the second node partially overlap, and it is determined that the first node and the second node have collided. In the case of the collision between the first node and the second node, the user may wish to merge the first node and the second node, and the node type of the second node is determined. If the node type of the second node is a model node, a prompt message is displayed to prompt the user and avoid accidental merging of nodes. In response to the user's confirmation of the prompt message, if the user wishes to merge the first node and the second node, the first node and the second node are merged on the canvas as the target node and generated. In response to the user's cancel action based on the prompt, indicating the user does not wish to merge the first and second nodes, the first node's node type is set to "Model Node" on the canvas and generated. If the second node's node type is a node other than "Model Node," merging the first and second nodes is not possible, and the first node is generated as the target node on the canvas. After the target node is generated, in response to the user's export action, the target node is exported as the first data model for building the visualization chart. In response to the user's publish action, the first data model is published to build the visualization chart. If the location information is outside the collision zone, indicating the user does not wish to merge the first and second nodes, it is determined that the first node does not collide with the second node. If the first node does not collide with the second node, the first node is generated on the canvas without merging the nodes. By determining whether to merge the two nodes based on whether they collide, users can quickly merge the dataset in the data table with the dataset in the second node, thus reducing the complexity of the visualization system operation. Furthermore, since users can create datasets by dragging and dropping data tables onto the canvas, the dataset creation method is simple, further reducing the complexity of the visualization system operation.

[0180] In one exemplary embodiment, a data visualization apparatus is provided for implementing the method described above. (Reference) Figure 10As shown, the data visualization device may include a first determining module 100, a second determining module 200, and a generating module 300. During the implementation of the above method,

[0181] The first determining module 100 is configured to determine, in response to a user dragging a data table onto a canvas, whether the first node of the data table on the canvas collides with a second node on the canvas.

[0182] The second determining module 200 is configured to determine the node type of the second node in the event of a collision between the first node and the second node.

[0183] The generation module 300 is configured to generate a target node on the canvas based on the node type of the second node.

[0184] In one exemplary embodiment, a data visualization apparatus is provided, wherein a first determining module 100 is configured to:

[0185] Determine the position information of the first node on the canvas.

[0186] Determine whether the location information is within the collision area of ​​the second node.

[0187] If the location information is within the collision area, it is determined that the first node and the second node have collided.

[0188] If the location information is outside the collision area, it is determined that the first node did not collide with the second node.

[0189] In one exemplary embodiment, a data visualization apparatus is provided, wherein a first determining module 100 is configured to:

[0190] Determine the first length of the second node in the first direction and the second length in the second direction.

[0191] The sum and difference of the first coordinates and the first length of the second node in the first direction are determined as the first boundary and the second boundary in the first direction, respectively.

[0192] The sum and difference of the second coordinates and the second length of the second node in the second direction are determined as the third and fourth boundaries in the second direction, respectively.

[0193] The area formed by the first boundary, the second boundary, the third boundary, and the fourth boundary is defined as the collision region.

[0194] In one exemplary embodiment, a data visualization apparatus is provided, wherein a generation module 300 is configured to:

[0195] If the second node is a model node, a prompt message will be displayed.

[0196] In response to the user's confirmation of the prompt, the first node and the second node are merged on the canvas to form the target node, and the target node is generated.

[0197] In response to the user's cancellation action on the prompt message, the node type of the first node on the canvas is set to model node, and the first node after setting is generated as the target node.

[0198] In one exemplary embodiment, a data visualization apparatus is provided, wherein a generation module 300 is configured to:

[0199] If the node type of the second node is a node type other than the model node, the first node is generated on the canvas as the target node.

[0200] In one exemplary embodiment, a data visualization apparatus is provided, the apparatus further comprising:

[0201] The export module is configured to respond to a user's export operation by exporting the target node as the first data model.

[0202] The publishing module is configured to publish the first data model in response to a user's publishing action.

[0203] In one exemplary embodiment, a data visualization apparatus is provided, wherein a generation module 300 is configured to:

[0204] In response to the user's first generation operation on the canvas for the third node, a connection node associated with the third node is formed.

[0205] Configure the connection node in response to the user's first configuration operation on the connection node.

[0206] Once the connection nodes are configured, the connection nodes are generated on the canvas.

[0207] In one exemplary embodiment, a data visualization apparatus is provided, wherein a generation module 300 is configured to:

[0208] In response to the user's first configuration sub-operation on the connected node, determine the first dataset of the fourth node corresponding to the first configuration sub-operation.

[0209] In response to the user's second configuration sub-operation on the connection node, the first dataset and the second dataset of the third node are connected according to the connection relationship corresponding to the second configuration sub-operation.

[0210] In one exemplary embodiment, a data visualization apparatus is provided, wherein an export module is configured to:

[0211] In response to the user's export operation, the connection node is exported as a second data model.

[0212] In one exemplary embodiment, a data visualization apparatus is provided, wherein a publishing module is configured to:

[0213] In response to the user's publish action, publish the second data model.

[0214] In one exemplary embodiment, a data visualization apparatus is provided, wherein a generation module 300 is configured to:

[0215] In response to the user's second generation operation on the canvas for the fifth node, a structured query language node associated with the fifth node is formed.

[0216] Configure the Structured Query Language node in response to the user's second configuration operation on the Structured Query Language node.

[0217] In response to the user's third generation operation on the Structured Query Language (SCL) node, generate the SCL node on the canvas.

[0218] In one exemplary embodiment, a data visualization apparatus is provided, wherein a generation module 300 is configured to:

[0219] In response to user actions on the Structured Query Language (SCL) node, a third dataset corresponding to the SCL node is generated.

[0220] In response to a user's third configuration operation on a Structured Query Language node, configure a third dataset.

[0221] In one exemplary embodiment, a data visualization apparatus is provided, wherein an export module is configured to:

[0222] In response to the user's export operation, Structured Query Language nodes are exported as a third data model.

[0223] In one exemplary embodiment, a data visualization apparatus is provided, wherein a publishing module is configured to:

[0224] In response to the user's publishing action, publish the third data model.

[0225] In one exemplary embodiment, a data visualization apparatus is provided, the apparatus further comprising:

[0226] The definition module is configured to define nodes of different node types in response to user-defined operations.

[0227] The registration module is configured to register nodes of various node types in response to user registration actions.

[0228] The configuration module is configured to respond to the user's fourth configuration operation, configuring the canvas.

[0229] The binding module is configured to perform event binding on nodes of various node types in response to user binding operations.

[0230] In one exemplary embodiment, an electronic device is provided, such as a mobile phone, a laptop computer, a tablet computer, and a wearable device.

[0231] refer to Figure 11 As shown, the electronic device 400 may include one or more of the following components: processing component 402, memory 404, power supply component 406, multimedia component 408, audio component 410, input / output (I / O) interface 412, sensor component 414, and communication component 416.

[0232] Processing component 402 typically controls the overall operation of electronic device 400, such as operations associated with display, telephone calls, data communication, camera operation, and recording. Processing component 402 may include one or more processors 420 to execute instructions to perform all or part of the steps of the methods described above. Furthermore, processing component 402 may include one or more modules to facilitate interaction between processing component 402 and other components. For example, processing component 402 may include a multimedia module to facilitate interaction between multimedia component 408 and processing component 402.

[0233] Memory 404 is configured to store various types of data to support the operation of electronic device 400. Examples of this data include instructions for any application or method operating on electronic device 400, contact data, phonebook data, messages, pictures, videos, etc. Memory 404 can be implemented by any type of volatile or non-volatile storage terminal or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk.

[0234] Power supply component 406 provides power to various components of electronic device 400. Power supply component 406 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to electronic device 400.

[0235] Multimedia component 408 includes a screen that provides an output interface between electronic device 400 and user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touchscreen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors may sense not only the boundaries of touch or swipe actions but also the duration and pressure associated with the touch or swipe operation. In some embodiments, multimedia component 408 includes a front-facing camera module and / or a rear-facing camera module. When electronic device 400 is in an operating mode, such as shooting mode or video mode, the front-facing camera module and / or rear-facing camera module may receive external multimedia data. Each front-facing camera module and rear-facing camera module may be a fixed optical lens system or have focal length and optical zoom capabilities.

[0236] Audio component 410 is configured to output and / or input audio signals. For example, audio component 410 includes a microphone (MIC) configured to receive external audio signals when electronic device 400 is in an operating mode, such as call mode, recording mode, and voice recognition mode. The received audio signals may be further stored in memory 404 or transmitted via communication component 416. In some embodiments, audio component 410 also includes a speaker for outputting audio signals.

[0237] I / O interface 412 provides an interface between processing component 402 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include, but are not limited to, home buttons, volume buttons, power buttons, and lock buttons.

[0238] Sensor assembly 414 includes one or more sensors for providing state assessments of various aspects of electronic device 400. For example, sensor assembly 414 may detect the on / off state of electronic device 400, the relative positioning of components such as the display and keypad of electronic device 400, changes in position of electronic device 400 or a component of electronic device 400, the presence or absence of user contact with electronic device 400, orientation or acceleration / deceleration of electronic device 400, and temperature changes of electronic device 400. Sensor assembly 414 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. Sensor assembly 414 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, sensor assembly 414 may also include an accelerometer, gyroscope, magnetometer, pressure sensor, or temperature sensor.

[0239] Communication component 416 is configured to facilitate wired or wireless communication between electronic device 400 and other terminals. Electronic device 400 can access wireless networks based on communication standards, such as WiFi, 2G, 3G, 4G, 5G, or combinations thereof. In one exemplary embodiment, communication component 416 receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, communication component 416 also includes a near-field communication (NFC) module to facilitate short-range communication. For example, the NFC module may be implemented based on radio frequency identification (RFID) technology, Infrared Data Association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

[0240] In an exemplary embodiment, the electronic device 400 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing terminals (DSPDs), programmable logic devices (PLDs), field-programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the methods shown in the above embodiments or combinations thereof.

[0241] In one exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 404 including instructions, which can be executed by a processor 420 of an electronic device 400 to perform the methods shown in the embodiments or combinations thereof. For example, the non-transitory computer-readable storage medium may be a ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage terminal, etc. When the instructions in the storage medium are executed by the processor of the terminal, the terminal is able to perform the methods shown in the embodiments or combinations thereof.

[0242] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the claims.

[0243] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this disclosure. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0244] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this disclosure, "a plurality of" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0245] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0246] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A data visualization method, characterized in that, The data visualization method includes: In response to a user dragging a data table onto a canvas, determine whether the data table collides with a second node in the canvas at a first node formed on the canvas. In the event of a collision between the first node and the second node, determine the node type of the second node; Based on the node type of the second node, generate the target node on the canvas; The step of generating a target node on the canvas according to the node type of the second node includes: If the node type of the second node is a model node, a prompt message is displayed to ask the user whether to merge the first node and the second node. In response to the user's confirmation of the prompt information, the first node and the second node are merged on the canvas to form the target node, and the target node is generated. In response to the user's cancellation operation on the prompt message, the node type of the first node is set to the model node on the canvas, and the first node after setting is generated as the target node.

2. The data visualization method according to claim 1, characterized in that, Determining whether the data table collides with a second node in the canvas at a first node formed on the canvas includes: Determine the position information of the first node on the canvas; Determine whether the location information is located within the collision area of ​​the second node; If the location information is within the collision area, it is determined that the first node and the second node have collided; If the location information is outside the collision area, it is determined that the first node did not collide with the second node.

3. The data visualization method according to claim 2, characterized in that, Before determining whether the data table collides with a second node in the canvas, the data visualization method further includes: Determine the first length of the second node in the first direction and the second length in the second direction; The sum and difference of the first coordinates of the second node and the first length in the first direction are respectively used as the first boundary and the second boundary in the first direction; The sum and difference of the second coordinates of the second node and the second length in the second direction are respectively used as the third boundary and the fourth boundary in the second direction; The region formed by the first boundary, the second boundary, the third boundary, and the fourth boundary is defined as the collision region. Wherein, the first direction and the second direction are perpendicular.

4. The data visualization method according to claim 1, characterized in that, The step of generating a target node on the canvas according to the node type of the second node includes: If the node type of the second node is a node type other than a model node, the first node is generated on the canvas as the target node.

5. The data visualization method according to claim 1, characterized in that, After generating the target node on the canvas according to the node type of the second node, the data visualization method further includes: In response to the user's export operation, the target node is exported as a first data model, which is used to construct a visualization chart. In response to the user's publish operation, the first data model is published.

6. The data visualization method according to any one of claims 1 to 5, characterized in that, The data visualization method also includes: In response to the user's first generation operation on the canvas for a third node, a connection node associated with the third node is formed, wherein the node type of the third node is a model node; Configure the connection node in response to the user's first configuration operation on the connection node; Once the connection node is configured, the connection node is generated on the canvas.

7. The data visualization method according to claim 6, characterized in that, The first configuration operation includes a first configuration sub-operation and a second configuration sub-operation; configuring the connection node in response to the user's first configuration operation on the connection node includes: In response to a user’s first configuration sub-operation on the connection node, a first dataset of a fourth node corresponding to the first configuration sub-operation is determined, wherein the type of the fourth node is the model node; In response to a user's second configuration sub-operation on the connection node, the first dataset and the second dataset of the third node are connected by a connection relationship corresponding to the second configuration sub-operation.

8. The data visualization method according to claim 6, characterized in that, After the connection nodes are generated on the canvas, the data visualization method further includes: In response to the user's export operation, the connection node is exported as a second data model, which is used to construct a visualization chart. In response to the user's publish action, the second data model is published.

9. The data visualization method according to any one of claims 1 to 5, characterized in that, The data visualization method also includes: In response to the user's second generation operation on the canvas for the fifth node, a structured query language node associated with the fifth node is formed, wherein the node type of the fifth node is a model node; In response to a user's second configuration operation on the structured query language node, configure the structured query language node; In response to a user's third generation operation on the Structured Query Language (SCL) node, the SCL node is generated on the canvas.

10. The data visualization method according to claim 9, characterized in that, After configuring the Structured Query Language node, the data visualization method further includes: In response to the user's operation on the Structured Query Language node, a third dataset corresponding to the Structured Query Language node is generated; In response to a user's third configuration operation on the Structured Query Language node, the third dataset is configured.

11. The data visualization method according to claim 9, characterized in that, After generating the structured query language node on the canvas, the data visualization method further includes: In response to the user's export operation, the structured query language node is exported as a third data model, which is used to construct a visualization chart; In response to the user's publishing action, the third data model is published.

12. The data visualization method according to any one of claims 1 to 5, characterized in that, Before determining whether the data table collides with a second node in the canvas in response to a user dragging a data table onto the canvas, the data visualization method further includes: In response to user-defined operations, define nodes of different node types; In response to the user's registration action, register nodes of each of the specified node types; In response to the user's fourth configuration operation, configure the canvas; In response to the user's binding operation, event binding is performed on nodes of each of the aforementioned node types.

13. A data visualization device, characterized in that, The data visualization device includes: A first determining module is configured to determine, in response to a user dragging a data table onto a canvas, whether the data table collides with a second node in the canvas at a first node formed on the canvas. The second determining module is configured to determine the node type of the second node in the event that the first node collides with the second node. A generation module, configured to generate a target node on the canvas based on the node type of the second node; The generation module is configured to: If the node type of the second node is a model node, a prompt message is displayed to ask the user whether to merge the first node and the second node. In response to the user's confirmation of the prompt information, the first node and the second node are merged on the canvas to form the target node, and the target node is generated. In response to the user's cancellation operation on the prompt message, the node type of the first node is set to the model node on the canvas, and the first node after setting is generated as the target node.

14. An electronic device, characterized in that, The electronic device includes: processor; Memory used to store the processor's executable instructions; The processor is configured to perform the data visualization method as described in any one of claims 1 to 12.

15. A non-transitory computer-readable storage medium, characterized in that, When the instructions in the storage medium are executed by the processor of the terminal, the terminal is able to perform the data visualization method as described in any one of claims 1 to 12.

Images