Data visualization method, apparatus, device, and storage medium

Abstract

The present disclosure provides a data visualization method, device and equipment and storage medium, which can be applied to the technical field of computer software. The method comprises the following steps: obtaining form data and icon data, wherein the form data comprises entity data and entity relationship data; using a programming language to write the entity data and the icon data respectively to obtain a plurality of source code blocks, wherein the programming language comprises a front-end programming language, the plurality of source code blocks comprise a plurality of first source code blocks containing the entity data and a second source code block containing the icon data; calling a front-end open source component to generate a plurality of nodes on a canvas according to the plurality of first source code blocks and the second source code block; and connecting the plurality of nodes according to the entity relationship data to obtain a relationship diagram.

Description

Technical Field

[0001] This disclosure relates to the field of computer software, and more particularly to a data visualization method, apparatus, device, medium, and program product. Background Technology

[0002] In some software development processes, forms contain a lot of relational data. The relationships between these data are not readily apparent and can appear cumbersome and complex. Therefore, it is necessary to visualize the relationship diagrams or topology diagrams to better represent the data and the relationships between them.

[0003] However, currently, few front-end plugins offer graphical visualizations of relational data, and they lack the flexibility to edit data within relational graphs or configure the attributes of each node to modify the relational graph. Summary of the Invention

[0004] In view of the above problems, this disclosure provides data visualization methods, apparatus, devices, media and program products.

[0005] According to a first aspect of this disclosure, a data visualization method is provided, comprising: acquiring form data and icon data, wherein the form data includes entity data and entity relationship data; writing code for the entity data and icon data respectively using a programming language to obtain multiple source code blocks, wherein the programming language includes a front-end programming language, and the multiple source code blocks include multiple first source code blocks containing entity data and second source code blocks containing icon data; calling a front-end open-source component to generate multiple nodes on a canvas based on the multiple first source code blocks and second source code blocks; and connecting the multiple nodes based on the entity relationship data to obtain a relationship graph.

[0006] According to embodiments of this disclosure, calling a front-end open-source component to generate multiple nodes on a canvas based on multiple first source code blocks and second source code blocks includes: referencing multiple icons through the second source code block; calling the front-end open-source component to generate icon strings based on the multiple icons; referencing the icon strings through multiple first source code blocks and encapsulating multiple icon templates based on a unified interface and calling method; and dragging and dropping multiple icon templates onto the canvas to generate multiple nodes.

[0007] According to embodiments of this disclosure, icon data includes icon links, icon names, and icon paths. Referencing multiple icons through a second source code block includes referencing icon links, icon names, and icon paths through the second source code block to reference multiple icons.

[0008] According to embodiments of this disclosure, generating multiple nodes by dragging multiple icon templates onto a canvas includes: dragging multiple icon templates onto a canvas; obtaining the coordinates of the landing points of the multiple icon templates on the canvas through mouse hover events; calling a front-end open-source component to extract entity data and icon data from the multiple icon templates; and generating multiple nodes on the canvas based on the landing point coordinates and the extracted entity data and icon data.

[0009] According to embodiments of this disclosure, connecting multiple nodes based on entity relationship data to obtain a relationship graph includes: obtaining an initial node and a target node from multiple nodes based on the entity relationship data; obtaining the coordinates of the midpoints of the four sides of the icons corresponding to the initial node and the target node based on the coordinates of the landing positions of the initial node and the target node; and connecting the initial node and the target node through any one of the coordinates of the midpoints of the four sides to obtain the relationship graph.

[0010] According to embodiments of this disclosure, the data visualization method further includes: saving entity data, icon data, and connection data between initial nodes and target nodes into an array; initializing the array and restoring the relationship graph on the canvas.

[0011] A second aspect of this disclosure provides a data visualization apparatus, comprising: an acquisition module for acquiring form data and icon data, wherein the form data includes entity data and entity relationship data; a writing module for writing code on the entity data and icon data using a programming language to obtain multiple source code blocks, wherein the programming language includes a front-end programming language, and the multiple source code blocks include multiple first source code blocks containing entity data and second source code blocks containing icon data; a calling module for calling a front-end open-source component to generate multiple nodes on a canvas based on the multiple first source code blocks and the second source code blocks; and a connection module for connecting the multiple nodes based on the entity relationship data to obtain a relationship graph.

[0012] A third aspect of this disclosure provides an electronic device comprising: one or more processors; and a memory for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors perform the data visualization method described above.

[0013] A fourth aspect of this disclosure also provides a computer-readable storage medium having executable instructions stored thereon, which, when executed by a processor, cause the processor to perform the data visualization method described above.

[0014] The fifth aspect of this disclosure also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described data visualization method.

[0015] According to the data visualization method, apparatus, device, medium, and program product provided in this disclosure, source code blocks are obtained by writing front-end code to represent the non-intuitive entity data and entity relationship data in a form. These source code blocks can be compiled into a computer-executable programming language, which can then call front-end open-source components to generate editable nodes on the canvas corresponding to each entity. Since both the first and second source code blocks are editable, the generated nodes are also editable. Furthermore, the introduction of icons in the code enables an intuitive visual representation of relational data such as entities and entity relationships. Therefore, this method at least partially solves the problem of non-intuitive form data and the inability to edit relationship graph nodes, achieving the technical effect of relational data visualization. Attached Figure Description

[0016] The foregoing contents, as well as other objects, features, and advantages of this disclosure, will become clearer from the following description of embodiments with reference to the accompanying drawings, in which:

[0017] Figure 1 The illustrations depict application scenarios of data visualization methods, apparatuses, devices, media, and program products according to embodiments of the present disclosure.

[0018] Figure 2 A flowchart illustrating a data visualization method according to an embodiment of the present disclosure is shown schematically;

[0019] Figure 3 A flowchart illustrating a node generation method according to an embodiment of the present disclosure is shown schematically;

[0020] Figure 4 A flowchart illustrating a method for generating nodes by dragging icons according to an embodiment of the present disclosure is shown schematically.

[0021] Figure 5 A flowchart illustrating a method for connecting nodes according to an embodiment of this disclosure is shown schematically.

[0022] Figure 6 A schematic diagram illustrating a relational diagram according to an embodiment of the present disclosure is shown.

[0023] Figure 7 A flowchart illustrating a method for restoring a relational diagram according to an embodiment of the present disclosure is shown schematically.

[0024] Figure 8 A schematic block diagram of a data visualization apparatus according to an embodiment of the present disclosure is shown; and

[0025] Figure 9 A block diagram schematically illustrates an electronic device suitable for implementing a data visualization method according to an embodiment of the present disclosure. Detailed Implementation

[0026] The embodiments of the present disclosure will now be described with reference to the accompanying drawings. However, it should be understood that these descriptions are exemplary only and are not intended to limit the scope of the disclosure. In the following detailed description, numerous specific details are set forth to provide a thorough understanding of the embodiments of the present disclosure for ease of explanation. However, it will be apparent that one or more embodiments may be practiced without these specific details. Furthermore, descriptions of well-known structures and techniques are omitted in the following description to avoid unnecessarily obscuring the concepts of the present disclosure.

[0027] The terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit this disclosure. The terms “comprising,” “including,” etc., as used herein indicate the presence of the stated features, steps, operations, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, or components.

[0028] All terms used herein (including technical and scientific terms) have the meanings commonly understood by those skilled in the art, unless otherwise defined. It should be noted that the terms used herein are to be interpreted in a manner consistent with the context of this specification, and not in an idealized or overly rigid way.

[0029] When using expressions such as "at least one of A, B and C", they should generally be interpreted in accordance with the meaning that is commonly understood by those skilled in the art (e.g., "a system having at least one of A, B and C" should include, but is not limited to, a system having A alone, a system having B alone, a system having C alone, a system having A and B, a system having A and C, a system having B and C, and / or a system having A, B and C, etc.).

[0030] In the technical solutions disclosed herein, the collection, storage, use, processing, transmission, provision, disclosure, and application of data (including but not limited to user personal information) comply with the provisions of relevant laws and regulations, necessary confidentiality measures have been taken, and they do not violate public order and good morals.

[0031] Figure 1 The diagram illustrates an application scenario of the data visualization method according to an embodiment of the present disclosure.

[0032] like Figure 1 As shown, application scenario 100 according to this embodiment may include a first terminal device 101, a second terminal device 102, a third terminal device 103, a network 104, and a server 105. The network 104 serves as a medium for providing a communication link between the first terminal device 101, the second terminal device 102, the third terminal device 103, and the server 105. The network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0033] Users can interact with server 105 via network 104 using at least one of the first terminal device 101, second terminal device 102, and third terminal device 103 to receive or send messages, etc. Various communication client applications can be installed on the first terminal device 101, second terminal device 102, and third terminal device 103, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social media platform software, etc. (for example only).

[0034] The first terminal device 101, the second terminal device 102, and the third terminal device 103 can be various electronic devices with displays and support web browsing, including but not limited to smartphones, tablets, laptops, and desktop computers.

[0035] Server 105 can be a server that provides various services, such as a backend management server that supports websites browsed by users using the first terminal device 101, the second terminal device 102, and the third terminal device 103 (this is just an example). The backend management server can analyze and process data such as received user requests, and feed back the processing results (such as web pages, information, or data obtained or generated according to user requests) to the terminal devices.

[0036] It should be noted that the data visualization method provided in this embodiment can generally be executed by server 105. Correspondingly, the data visualization device provided in this embodiment can generally be located in server 105. The data visualization method provided in this embodiment can also be executed by a server or server cluster that is different from server 105 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or server 105. Correspondingly, the data visualization device provided in this embodiment can also be located in a server or server cluster that is different from server 105 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or server 105.

[0037] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0038] The following will be based on Figure 1 The described scene, through Figures 2-6 The data visualization method of the disclosed embodiments will be described in detail.

[0039] Figure 2 A flowchart illustrating a data visualization method according to an embodiment of the present disclosure is shown schematically.

[0040] like Figure 2 As shown, the data visualization method of this embodiment includes operations S210 to S240.

[0041] In operation S210, form data and icon data are obtained. The form data includes entity data and entity relationship data.

[0042] According to embodiments of this disclosure, forms in web pages are primarily responsible for data collection. The collected data can be relational data, such as entity data and entity relationship data between entities. Entities are, for example, network units with independent functions, including virtual machines, browsers, routers, gateways, and storage devices, while entity relationships can be the connection relationships between these entities, such as multiple servers interconnected to form a server cluster.

[0043] In operation S220, a programming language is used to write entity data and icon data respectively, resulting in multiple source code blocks. The programming language is, for example, a front-end programming language. The multiple source code blocks include multiple first source code blocks containing entity data and second source code blocks containing icon data.

[0044] According to embodiments of this disclosure, the objective is to construct an editable and runnable entity relationship graph, thus requiring the pre-establishment of the necessary language environment and framework. For example, a front-end programming language is used to write the source code containing entity data. Front-end programming languages ​​include, but are not limited to, HTML, CSS, JavaScript, JSP, Vue, etc. The written source code can be compiled into a computer-executable programming language using a front-end framework, such as Vue. For visualization purposes, icon data can be introduced into the source code containing entity data. Since different entities may be represented by the same or different icons, this disclosure uniformly aggregates the icon data into a single source code block, which is then processed by the front-end open-source component and introduced into the source code block of the entity data corresponding to each icon.

[0045] When operating S230, the front-end open-source component is invoked to generate multiple nodes on the canvas based on multiple first source code blocks and second source code blocks.

[0046] According to embodiments of this disclosure, the front-end open-source component is, for example, antv / G6. By calling the front-end open-source component, a canvas can be constructed, and nodes can be generated on the canvas using the source code of relevant entities and icons. The generated nodes have the relevant attributes of the corresponding entities and are displayed on the canvas in the form of corresponding icons. By clicking on a node, the entity attribute information contained in the node can be displayed, such as entity name, entity type, display name, layer identifier, address, etc. Since it is generated from source code, this attribute information can be easily modified, improving the efficiency of entity network construction, simplifying the configuration process of relevant entities, and lowering the operating threshold for industry newcomers.

[0047] In operation S240, multiple nodes are connected based on entity relationship data to obtain a relationship graph.

[0048] According to embodiments of this disclosure, entity relationships can reveal which entities are related, thereby finding the corresponding nodes on the canvas and connecting these nodes to form a relationship graph or topology graph, thus realizing the visualization of the aforementioned relational data.

[0049] Figure 3 A flowchart illustrating a node generation method according to an embodiment of the present disclosure is shown schematically.

[0050] According to embodiments of this disclosure, such as Figure 3 As shown, for example, nodes are generated on the canvas through steps S231 to S234.

[0051] Step S231: Reference multiple icons through the second source code block.

[0052] According to embodiments of this disclosure, different icons are introduced for different entities, such as security groups, peering links, object storage, block storage, snapshots, routers, external networks, file storage, virtual machines, resource groups, NAT gateways, and VPC subnets. Icon data includes, for example, an icon link, an icon name, and an icon path. The icon link indicates the location where the icon is obtained, the icon name (also called an icon label) indicates the entity the icon represents, and the icon path indicates the specific path to obtain the icon. Multiple icons can be obtained through a single source code block. Multiple icons can be referenced by referencing the icon link, icon name, and icon path in a second source code block. Centralizing the icons within a single code block facilitates modification of icon data and allows for easier conversion and referencing of icons by front-end open-source components. Referencing the icon link, icon name, and icon path enables intuitive icon identification and convenient modification.

[0053] Step S232: Call the front-end open-source component to generate icon strings based on multiple icons.

[0054] According to embodiments of this disclosure, the front-end open-source component antv / G6 can convert each icon in the second source code block into base64 encoding to obtain the string corresponding to the icon.

[0055] Step S233: Reference icon strings through multiple first source code blocks, and encapsulate multiple icon templates based on a unified interface and calling method.

[0056] According to embodiments of this disclosure, icon strings are introduced into the first source code containing entity data to establish a correspondence between icons and corresponding entities, and these icons are displayed in the form of icons. After establishing the required language environment and framework, the source code is uniformly encapsulated, providing interfaces, calling methods, etc., to form a callable component. This component is displayed on the front-end page in the form of icons, for example, it can be uniformly displayed in the icon template summary area on the right side of the canvas, which can also be called a configurable list, and the icons in this canvas list can be customized. Because the source code is written using a system-compatible front-end programming language, the encapsulated component can run on systems including but not limited to Windows and Linux, such as WEB, Android, iOS, and HarmonyOS.

[0057] Step S234: Drag and drop multiple icon templates onto the canvas to generate multiple nodes.

[0058] According to embodiments of this disclosure, using the front-end open-source component antv / G6, the encapsulated component icon on the right can be easily dragged to the drawing area on the left side of the canvas, and an editable node can be generated in the drawing area.

[0059] Figure 4 A flowchart illustrating a method for generating nodes by dragging icons according to an embodiment of the present disclosure is shown schematically.

[0060] According to embodiments of this disclosure, such as Figure 4 As shown, for example, nodes are generated on the canvas by dragging icons through steps S2341 to S2344.

[0061] Step S2341: Drag and drop multiple icon templates onto the canvas.

[0062] Step S2342: Obtain the coordinates of the landing points of multiple icon templates on the canvas through the mouse hover event.

[0063] According to an embodiment of this disclosure, for example, by dragging an icon template from the right side of the canvas to the drawing area on the left side of the canvas with the left mouse button, a pop-up event is triggered when the left mouse button is released. The pop-up event can be used to determine and select the landing point of the icon template on the canvas, and the coordinates of the landing point are recorded.

[0064] Step S2343: Call the front-end open-source component to extract entity data and icon data from multiple icon templates.

[0065] According to embodiments of this disclosure, the front-end open-source component can obtain entity data and icon data from the icon template. Entity data includes, for example, the entity's ID and entity name. Icon data includes, for example, the icon name and the icon string obtained by the front-end open-source component.

[0066] Step S2344: Generate multiple nodes on the canvas based on the coordinates of the landing point and the extracted entity data and icon data.

[0067] According to embodiments of this disclosure, the front-end open-source component can generate nodes representing entities in code form based on the coordinates of the icon template's landing point on the canvas, the extracted entity data, and the icon data. The front-end open-source component can obtain the entity data, icon data, etc., from the encapsulated icon template, and then combine them with the landing point coordinates to generate editable nodes in the form of code blocks, thus enabling flexible configuration of node attributes.

[0068] Figure 5 A flowchart illustrating a method for connecting nodes according to an embodiment of this disclosure is shown schematically.

[0069] Figure 6 A schematic diagram illustrating a relational diagram according to an embodiment of the present disclosure is shown.

[0070] According to embodiments of this disclosure, such as Figure 5 As shown, for example, nodes are connected through steps S241 to S243 to form a relationship diagram.

[0071] Step S241: Based on the entity relationship data, obtain the initial node and the target node from multiple nodes.

[0072] According to embodiments of this disclosure, the connection relationships between entities can be determined through entity relationship data. These relationships can be one-to-one, one-to-many, or many-to-one. Then, based on this correspondence, relevant entity nodes are located. For example, the order of entity connections is determined according to the entity's hierarchy, resulting in initial and target nodes. This hierarchical relationship, from general to specific, could be, for example, core business area, VPC subnet, (WEB, application, ES) server cluster, virtual machine, etc. For instance, if a connection between a VPC subnet and an application server cluster is needed, the icon corresponding to the VPC subnet is the initial node, and the icon corresponding to the application server cluster is the target node.

[0073] Step S242: Based on the landing point coordinates of the initial node and the target node, obtain the coordinates of the midpoints of the four sides of the icons corresponding to the initial node and the target node.

[0074] According to embodiments of this disclosure, the icon corresponding to each entity is, for example, a square. After obtaining the canvas landing point coordinates corresponding to each node, the front-end open-source component can calculate the midpoint coordinates of the four sides of the icon corresponding to that node. Simultaneously, the width and height data of the icon can be customized. These midpoint coordinates, icon width, and height data can then be written into a code block to jointly generate the node icon. By obtaining the node coordinates, the boundary coordinates of the node icon can be calculated, thereby connecting the points on the boundary to form a relationship graph. The coordinates of the connection points can also be modified and called as connection data in the form of code, enhancing the flexibility of creating relationship graphs.

[0075] Step S243: Connect the initial node and the target node using any one of the coordinates of the midpoints of the four sides to obtain the relationship graph.

[0076] According to embodiments of this disclosure, icons can be connected by the midpoints of the four sides of a node icon. Based on the relative positions of the nodes, the corresponding point among the four midpoints can be selected for icon connection. Alternatively, the coordinates of the connection points on the initial and target node icons can be written into a code block. For easier identification, a connection ID, the names of the connection points on the initial and target nodes, the width of the connection line, and its color can be introduced into the code block for that connection line. The relationship diagram obtained by connecting the nodes is as follows: Figure 6 As shown.

[0077] Figure 7 A flowchart illustrating a method for restoring a relational diagram according to an embodiment of the present disclosure is shown schematically.

[0078] According to embodiments of this disclosure, such as Figure 7 As shown, for example, the relationship diagram is restored through steps S250~S260.

[0079] Step S250: Save entity data, icon data, and connection data between the initial node and the target node into an array.

[0080] According to embodiments of this disclosure, after generating the relationship graph, clicking can save the node data on the canvas and the connection relationships between the nodes, which can then be transferred to the database. The previously dragged and dropped graph can be restored using the saved data. For example, entity data and icon data can be saved to the nodes[] array. The nodes[] array mainly includes, for example, element (i.e., entity node) id (unique identifier of the element), element content name (content displayed on the page), element color color (color of the content displayed on the page), element width (width displayed on the page), element height (height displayed on the page), element img (whether the image icon is displayed on the page), element anchor Points (anchor points connecting the midpoints of the four sides of the element; each element is, for example, a square, and the midpoint of each side is assigned a coordinate to distinguish the sides of the connection), element x (x-axis coordinate information in the canvas), and element y (y-axis coordinate information in the canvas). The connection data between nodes is saved to an array of `edges[]` objects. This array contains, for example, the connection ID (a unique identifier for each line), the `source` (the ID of the starting node), the `target` (the node ID of the connected node), the `startPoint` (the coordinates at the start of the connection, including x-axis and y-axis coordinates), the `endPoint` (the coordinates at the end of the connection, including x-axis and y-axis coordinates), the `lineWidth` (the width of the connection), and the `stroke` (the color of the connection).

[0081] Step S260: Initialize the array and restore the relationship graph on the canvas.

[0082] According to embodiments of this disclosure, if the database stores historical entity and connection data related to relationship diagrams, the relationship diagram can be directly generated in the canvas by initializing the entity and connection data when the program starts. By reusing historical entity and connection data, the workload of generating relationship diagrams corresponding to the same entities and entity relationships is reduced, greatly improving the efficiency of relationship diagram production.

[0083] Based on the above data visualization method, this disclosure also provides a data visualization device. The following will be combined with... Figure 8 The device is described in detail.

[0084] Figure 8 A schematic block diagram of a data visualization apparatus according to an embodiment of the present disclosure is shown.

[0085] like Figure 8 As shown, the data visualization device 800 of this embodiment includes, for example, an acquisition module 810, a writing module 820, a calling module 830, and a connection module 840.

[0086] The acquisition module 810 is used to acquire form data and icon data, whereby the form data includes entity data and entity relationship data. In one embodiment, the acquisition module 810 can be used to perform the operation S210 described above, which will not be repeated here.

[0087] The writing module 820 is used to write code for entity data and icon data using a programming language, resulting in multiple source code blocks. The programming language includes a front-end programming language, and the multiple source code blocks include multiple first source code blocks containing entity data and second source code blocks containing icon data. In one embodiment, the writing module 820 can be used to perform the operation S220 described above, which will not be repeated here.

[0088] The calling module 830 is used to call the front-end open-source component and generate multiple nodes on the canvas based on multiple first source code blocks and second source code blocks. In one embodiment, the calling module 830 can be used to perform the operation S230 described above, which will not be repeated here.

[0089] The connection module 840 is used to connect multiple nodes based on entity relationship data to obtain a relationship graph. In one embodiment, the connection module 840 can be used to perform the operation S240 described above, which will not be repeated here.

[0090] According to embodiments of this disclosure, any multiple modules among the acquisition module 810, writing module 820, calling module 830, and connection module 840 can be combined into one module, or any one of these modules can be split into multiple modules. Alternatively, at least part of the functionality of one or more of these modules can be combined with at least part of the functionality of other modules and implemented in one module. According to embodiments of this disclosure, at least one of the acquisition module 810, writing module 820, calling module 830, and connection module 840 can be at least partially implemented as hardware circuitry, such as a field-programmable gate array (FPGA), a programmable logic array (PLA), a system-on-a-chip, a system-on-a-substrate, a system-on-package, an application-specific integrated circuit (ASIC), or implemented in hardware or firmware by any other reasonable means of integrating or packaging circuitry, or implemented in any one of software, hardware, and firmware methods, or in a suitable combination of any of these. Alternatively, at least one of the acquisition module 810, writing module 820, calling module 830, and connection module 840 can be at least partially implemented as a computer program module, which can perform corresponding functions when the computer program module is run.

[0091] Figure 9 A block diagram schematically illustrates an electronic device suitable for implementing a data visualization method according to an embodiment of the present disclosure.

[0092] like Figure 9 As shown, an electronic device 900 according to an embodiment of the present disclosure includes a processor 901, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 902 or a program loaded from a storage portion 908 into a random access memory (RAM) 903. The processor 901 may include, for example, a general-purpose microprocessor (e.g., a CPU), an instruction set processor and / or an associated chipset and / or a special-purpose microprocessor (e.g., an application-specific integrated circuit (ASIC)), etc. The processor 901 may also include onboard memory for caching purposes. The processor 901 may include a single processing unit or multiple processing units for performing different actions of the method flow according to an embodiment of the present disclosure.

[0093] RAM 903 stores various programs and data required for the operation of electronic device 900. Processor 901, ROM 902, and RAM 903 are interconnected via bus 904. Processor 901 performs various operations of the method flow according to embodiments of the present disclosure by executing programs in ROM 902 and / or RAM 903. It should be noted that the programs may also be stored in one or more memories other than ROM 902 and RAM 903. Processor 901 may also perform various operations of the method flow according to embodiments of the present disclosure by executing programs stored in said one or more memories.

[0094] According to embodiments of this disclosure, the electronic device 900 may further include an input / output (I / O) interface 905, which is also connected to a bus 904. The electronic device 900 may also include one or more of the following components connected to the I / O interface 905: an input section 906 including a keyboard, mouse, etc.; an output section 907 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 908 including a hard disk, etc.; and a communication section 909 including a network interface card such as a LAN card, modem, etc. The communication section 909 performs communication processing via a network such as the Internet. A drive 910 is also connected to the I / O interface 905 as needed. A removable medium 911, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on the drive 910 as needed so that computer programs read from it can be installed into the storage section 908 as needed.

[0095] This disclosure also provides a computer-readable storage medium, which may be included in the device / apparatus / system described in the above embodiments; or it may exist independently and not assembled into the device / apparatus / system. The computer-readable storage medium carries one or more programs, which, when executed, implement the data visualization method according to the embodiments of this disclosure.

[0096] According to embodiments of this disclosure, the computer-readable storage medium may be a non-volatile computer-readable storage medium, such as including, but not limited to: portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this disclosure, the computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. For example, according to embodiments of this disclosure, the computer-readable storage medium may include ROM 902 and / or RAM 903 and / or one or more memories other than ROM 902 and RAM 903 described above.

[0097] Embodiments of this disclosure also include a computer program product comprising a computer program containing program code for performing the methods shown in the flowchart. When the computer program product is run on a computer system, the program code enables the computer system to implement the data visualization methods provided in the embodiments of this disclosure.

[0098] When the computer program is executed by the processor 901, it performs the functions defined in the system / apparatus of this disclosure embodiments. According to embodiments of this disclosure, the systems, apparatuses, modules, units, etc., described above can be implemented by computer program modules.

[0099] In one embodiment, the computer program may rely on a tangible storage medium such as an optical storage device or a magnetic storage device. In another embodiment, the computer program may also be transmitted and distributed in the form of signals over a network medium, and downloaded and installed via the communication section 909, and / or installed from a removable medium 911. The program code contained in the computer program can be transmitted using any suitable network medium, including but not limited to: wireless, wired, etc., or any suitable combination thereof.

[0100] In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 909, and / or installed from the removable medium 911. When the computer program is executed by the processor 901, it performs the functions defined in the system of this disclosure embodiment. According to embodiments of this disclosure, the systems, devices, apparatuses, modules, units, etc., described above can be implemented by computer program modules.

[0101] According to embodiments of this disclosure, program code for executing the computer programs provided in embodiments of this disclosure can be written in any combination of one or more programming languages. Specifically, these computational programs can be implemented using high-level procedural and / or object-oriented programming languages, and / or assembly / machine languages. Programming languages ​​include, but are not limited to, languages ​​such as Java, C++, Python, "C", or similar programming languages. The program code can execute entirely on a user's computing device, partially on a user's device, partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0102] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0103] Those skilled in the art will understand that the features described in the various embodiments and / or claims of this disclosure can be combined or combined in various ways, even if such combinations or combinations are not explicitly described in this disclosure. In particular, the features described in the various embodiments and / or claims of this disclosure can be combined or combined in various ways without departing from the spirit and teachings of this disclosure. All such combinations and / or combinations fall within the scope of this disclosure.

[0104] The embodiments of this disclosure have been described above. However, these embodiments are for illustrative purposes only and are not intended to limit the scope of this disclosure. Although various embodiments have been described above, this does not mean that the measures in the various embodiments cannot be used advantageously in combination. The scope of this disclosure is defined by the appended claims and their equivalents. Various substitutions and modifications can be made by those skilled in the art without departing from the scope of this disclosure, and all such substitutions and modifications should fall within the scope of this disclosure.

Claims

1. A data visualization method, comprising: Obtain form data and icon data, wherein the form data includes entity data and entity relationship data; The entity data and the icon data are written using a programming language to obtain multiple source code blocks. The programming language includes a front-end programming language, and the multiple source code blocks include multiple first source code blocks containing the entity data and second source code blocks containing the icon data. The front-end open-source component is invoked to generate multiple nodes on the canvas based on the multiple first source code blocks and the second source code blocks; The multiple nodes are connected based on the entity relationship data to obtain a relationship graph; The step of calling the front-end open-source component and generating multiple nodes on the canvas based on the multiple first source code blocks and the second source code blocks includes: The second source code block references multiple icons, and the icon data of each of the multiple icons corresponds to an entity. The icon data includes icon link, icon name and icon path. The front-end open-source component is invoked to generate an icon string based on the multiple icons; The icon string is referenced by the multiple first source code blocks, and multiple icon templates are encapsulated based on a unified interface and calling method; Drag and drop the multiple icon templates onto the canvas to generate the multiple nodes; The step of dragging and dropping the multiple icon templates onto the canvas to generate the multiple nodes includes: Drag and drop the multiple icon templates onto the canvas; The coordinates of the landing points of the multiple icon templates on the canvas are obtained through the mouse hover event; The front-end open-source component is invoked to extract the entity data and icon data from the multiple icon templates; Based on the coordinates of the landing point and the extracted entity data and icon data, the multiple nodes are generated on the canvas.

2. The data visualization method according to claim 1, wherein connecting the plurality of nodes based on the entity relationship data to obtain a relationship graph includes: Based on the entity relationship data, obtain the initial node and the target node from the plurality of nodes; Based on the landing point coordinates corresponding to the initial node and the target node, the coordinates of the midpoints of the four sides of the icons corresponding to the initial node and the target node are obtained; The relationship graph is obtained by connecting the initial node and the target node using any one of the coordinates of the midpoints of the four sides.

3. The data visualization method according to claim 2 further includes: Save the entity data, the icon data, and the connection data between the initial node and the target node into an array; Initialize the array and reconstruct the relationship graph on the canvas.

4. A data visualization device, comprising: The acquisition module is used to acquire form data and icon data, wherein the form data includes entity data and entity relationship data; A writing module is used to write the entity data and the icon data respectively using a programming language to obtain multiple source code blocks, wherein the programming language includes a front-end programming language, and the multiple source code blocks include multiple first source code blocks containing the entity data and second source code blocks containing the icon data; The calling module is used to call front-end open-source components to generate multiple nodes on the canvas based on the multiple first source code blocks and the second source code blocks; and A connection module is used to connect the multiple nodes according to the entity relationship data to obtain a relationship graph; The step of calling the front-end open-source component and generating multiple nodes on the canvas based on the multiple first source code blocks and the second source code blocks includes: The second source code block references multiple icons, and the icon data of each of the multiple icons corresponds to an entity. The icon data includes icon link, icon name and icon path. The front-end open-source component is invoked to generate an icon string based on the multiple icons; The icon string is referenced by the multiple first source code blocks, and multiple icon templates are encapsulated based on a unified interface and calling method; Drag and drop the multiple icon templates onto the canvas to generate the multiple nodes; The step of dragging and dropping the multiple icon templates onto the canvas to generate the multiple nodes includes: Drag and drop the multiple icon templates onto the canvas; The coordinates of the landing points of the multiple icon templates on the canvas are obtained through the mouse hover event; The front-end open-source component is invoked to extract the entity data and icon data from the multiple icon templates; Based on the coordinates of the landing point and the extracted entity data and icon data, the multiple nodes are generated on the canvas.

5. An electronic device, comprising: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors perform the data visualization method according to any one of claims 1 to 3.

6. A computer-readable storage medium having executable instructions stored thereon, which, when executed by a processor, cause the processor to perform the data visualization method according to any one of claims 1 to 3.

7. A computer program product comprising a computer program that, when executed by a processor, implements the data visualization method according to any one of claims 1 to 3.

Images