Construction method and device of visual data display interface, equipment and storage medium
By using adaptive layout technology, the target card components and their arrangement order are obtained. By utilizing a tree structure and dynamic layout engine, the problem of low efficiency in building traditional visualization data display interfaces is solved, and efficient card component layout and dynamic content loading are achieved.
Patent Information
- Application Number
- CN202511698252.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-11-18
- Publication Date
- 2026-02-10
AI Technical Summary
Traditional methods for building data visualization interfaces are inefficient, requiring manual dragging and dropping to adjust card positions, resulting in high construction and maintenance costs and difficulty in dynamically loading different content.
By acquiring the target card components and their arrangement order, and based on the basic configuration information and layout parameters of the visualization data display interface, the position information of each target card component and its subordinate cards is adaptively determined to generate the visualization data display interface. The interface is then adaptively laid out using a tree-structured relationship and a dynamic layout engine.
It eliminates the need for manual drag-and-drop configuration of positioning cards during the construction or secondary development of visual data display interfaces, improving construction efficiency, reducing maintenance costs, and supporting dynamic loading of different content.
Smart Images
Figure CN121501404A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of data visualization technology, and in particular to a method, apparatus, computer device, computer-readable storage medium, and computer program product for constructing a visual data display interface. Background Technology
[0002] The visual data display interface integrates scattered data from multiple channels such as business systems, databases, and data interfaces, and presents core business indicators in real time on a large screen in an intuitive form such as digital dashboards, line charts, and maps. It aims to solve the pain points of scattered information, difficult interpretation, and delayed response in traditional data viewing, and help teams or managers quickly grasp the overall business status.
[0003] The traditional method of building a visual data display interface (such as a large screen dashboard) is to manually drag and drop to configure and adjust the position of cards. Each card position is stored according to the absolute positioning of the current configuration position, and the configuration position of each card is fixed. The front end loads and displays the cards according to the absolute positioning of the configuration position.
[0004] However, when building a visual data display interface, each card and component needs to be manually dragged, resized, and positioned by the implementers, resulting in low efficiency in building the visual data display interface. Summary of the Invention
[0005] Therefore, it is necessary to provide a method, apparatus, computer device, computer-readable storage medium, and computer program product for constructing a visual data display interface to address the aforementioned technical problems.
[0006] Firstly, this application provides a method for constructing a visual data display interface, including:
[0007] Retrieve the target card components and their arrangement order;
[0008] Based on the basic configuration information and layout parameters of the visualization data display interface, each target card component is laid out according to the arrangement order of the target components to obtain the target position information of each target card component.
[0009] Based on the target location information of each target card component, determine the target location information of the corresponding lower-level card for each target card component;
[0010] The visualization data display interface is generated based on the target location information of each target card component and the corresponding subordinate card.
[0011] In one embodiment, obtaining the arrangement order of the target components includes:
[0012] In response to the user's selection order of the target card components, the initial component arrangement order of the target card components is displayed, and the initial component arrangement order is used as the target component arrangement order;
[0013] Alternatively, in response to the user's selection order of the target card components, the initial component arrangement order of the target card components is displayed; in response to the user's adjustment operation on the initial component arrangement order, the initial component arrangement order is adjusted to obtain the target component arrangement order.
[0014] In one embodiment, the step of laying out each target card component according to the target component arrangement order based on the basic configuration information and layout parameters of the visualization data display interface to obtain the target position information of each target card component includes:
[0015] Based on the basic configuration information and layout parameters of the visualization data display interface, determine the initial placement position of the components;
[0016] Based on the initial placement position of the components, the compatibility of each target card component is evaluated sequentially according to the arrangement order of the target components to obtain the target position information of each target card component.
[0017] In one embodiment, the step of sequentially evaluating the accommodability of each target card component according to the arrangement order of the target components to obtain the target position information of each target card component includes:
[0018] Each target card component is selected as the current target card component in the order they are arranged.
[0019] Based on the size information of the placed target card components and the spacing parameters between the placed target card components, determine the width used in the current row, and then determine the remaining space in the current row;
[0020] Based on the sum of the width of the current target card component and the required interval, and the remaining space of the current row, the fit between the remaining space of the current row and the current target card component is obtained;
[0021] If the remaining space in the current row is not compatible with the capacity of the current target card component, a line break operation is triggered to start the space capacity assessment for the next row.
[0022] If the remaining space in the current row is compatible with the current target card component, determine the coordinate position of the current target card component to obtain the target position information of the current target card component.
[0023] In one embodiment, determining the target location information of the lower-level card corresponding to each target card component based on the target location information of each target card component includes:
[0024] Based on the target position information and original position information of each target card component, the position offset information of each target card component is obtained;
[0025] Based on the original position information of the subordinate card corresponding to each target card component and the position offset information, the target position information of the subordinate card corresponding to each target card component is determined.
[0026] In one embodiment, determining the target location information of the lower-level card corresponding to each target card component based on the target location information of each target card component includes:
[0027] Obtain the relative positional relationship between each target card component and its corresponding lower-level cards;
[0028] Based on the target location information of each target card component and the relative positional relationship, the target location information of the subordinate card corresponding to each target card component is determined.
[0029] Secondly, this application also provides a device for constructing a visual data display interface, comprising:
[0030] The component and arrangement order acquisition module is used to acquire the target card components and the arrangement order of the target components.
[0031] The component target location information acquisition module is used to lay out each target card component according to the target component arrangement order based on the basic configuration information and layout parameters of the visualization data display interface, and obtain the target location information of each target card component.
[0032] The card target location information acquisition module is used to determine the target location information of the lower-level card corresponding to each target card component based on the target location information of each target card component.
[0033] The visualization data display interface generation module is used to generate the visualization data display interface based on the target position information of each target card component and the corresponding subordinate card of each target card component.
[0034] Thirdly, this application also provides a computer device. The computer device includes a memory and a processor, the memory storing a computer program, and the processor executing the above-described method.
[0035] Fourthly, this application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program thereon, the computer program being executed by a processor using the methods described above.
[0036] Fifthly, this application also provides a computer program product. The computer program product includes a computer program that is executed by a processor using the methods described above.
[0037] The aforementioned method, apparatus, computer equipment, computer-readable storage medium, and computer program product for constructing a visual data display interface obtain target card components and their arrangement order; based on the basic configuration information and layout parameters of the visual data display interface, each target card component is laid out according to its arrangement order to obtain target position information for each target card component; based on the target position information of each target card component, the target position information of the corresponding lower-level cards is determined; and based on the target position information of each target card component and its corresponding lower-level cards, a visual data display interface is generated. This application lays out each target card component according to its arrangement order to obtain target position information for each target card component, and determines the target position information of the corresponding lower-level cards based on this target position information to generate a visual data display interface. This allows for adaptive layout of target card components and their lower-level cards, eliminating the need for manual drag-and-drop configuration of each card position during the construction or secondary development of the visual data display interface, thus improving construction efficiency. Attached Figure Description
[0038] To more clearly illustrate the technical solutions in the embodiments of this application or related technologies, the drawings used in the description of the embodiments of this application or related technologies will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.
[0039] Figure 1 This is an application environment diagram of a method for constructing a visualization data display interface in one embodiment;
[0040] Figure 2 This is a flowchart illustrating a method for constructing a visual data display interface in one embodiment;
[0041] Figure 3 This is a schematic diagram of the configuration process for constructing a visualization data display interface in one embodiment;
[0042] Figure 4 This is a schematic diagram of the structure of a method for constructing a visualization data display interface in one embodiment;
[0043] Figure 5 This is a flowchart illustrating the dynamic layout engine processing in one embodiment.
[0044] Figure 6 This is a timing diagram illustrating the dynamic layout engine processing in one embodiment.
[0045] Figure 7 This is a structural block diagram of a device for constructing a visualization data display interface in one embodiment;
[0046] Figure 8 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation
[0047] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.
[0048] It should be noted that the terms "comprising" and "having," and any variations thereof, as used in this application, are intended to cover non-exclusive inclusion. The term "multiple" as used in this application refers to two or more. The term "and / or" as used in this application refers to one of the solutions, or any combination of multiple solutions.
[0049] The method for constructing a visual data display interface provided in this application embodiment can be applied to, for example, Figure 1 In the application environment shown, terminal 102 communicates with server 104 via a network. A data storage system can store the data that server 104 needs to process. The data storage system can be integrated onto server 104 or placed on a cloud or other network server. Terminal 102 can obtain the target card components and their arrangement order; based on the basic configuration information and layout parameters of the visual data display interface, it arranges each target card component according to the arrangement order to obtain the target position information of each target card component, thereby determining the target position information of the corresponding lower-level cards and generating the visual data display interface. Terminal 102 can be, but is not limited to, various personal computers, laptops, smartphones, tablets, drones, low-altitude aircraft, IoT devices, and portable wearable devices. Server 104 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing cloud computing services.
[0050] In one exemplary embodiment, such as Figure 2 As shown, a method for constructing a visual data display interface is provided, which can be applied to... Figure 1 Taking terminal 102 as an example, the explanation includes the following steps 202 to 208. Wherein:
[0051] Step 202: Obtain the target card components and their arrangement order.
[0052] A hierarchical tree structure can be established between card components and cards. For example, the tree structure can be as follows: Visual data display interface — Card component — N-level sub-card.
[0053] Among them, a visual data display interface is a data visualization tool, such as a large-screen dashboard.
[0054] The card component is a tree-structured component, with each card component containing N levels of sub-cards. N is a natural number. The card component can be published as a public component library.
[0055] For example, when constructing a visual data display interface, that is, when building a visual data display interface or performing secondary development on a visual data display interface that has already been built, the terminal can obtain standard card components selected by the user from the component library, or it can obtain custom card components created by the user and select the custom card components as card components referenced in constructing the visual data display interface; the card components referenced in constructing the visual data display interface can be called target card components.
[0056] The order in which the target card components are referenced can be used to determine the arrangement of the target components.
[0057] Step 204: Based on the basic configuration information and layout parameters of the visualization data display interface, lay out each target card component according to the order of the target components to obtain the target position information of each target card component.
[0058] Basic configuration information may include at least one of the following: the name, size, and background of the visual data display interface.
[0059] Layout parameters can include the spacing between card components and the margins of the container edges in the data visualization interface.
[0060] For example, when constructing a visual data display interface, the terminal can adaptively and dynamically lay out each target card component according to the target component arrangement order based on the basic configuration information and layout parameters of the visual data display interface input by the user, and calculate the relative position and size of each target card component in the visual data display interface in real time to obtain the target position information of each target card component.
[0061] Step 206: Determine the target location information of the lower-level card corresponding to each target card component based on the target location information of each target card component.
[0062] Each target card component has overall consistency, and the relative positions of each target card component and its subordinate cards remain fixed.
[0063] Based on the fact that the relative positions of each target card component and its subordinate cards are fixed, and the target position information of each target card component, the target position information of the subordinate cards corresponding to each target card component can be determined.
[0064] Step 208: Generate a visual data display interface based on the target location information of each target card component and the corresponding lower-level card of each target card component.
[0065] In the above-mentioned method for constructing a visual data display interface, each target card component is laid out according to the order of the target components to obtain the target position information of each target card component. Based on the target position information of each target card component, the target position information of the corresponding sub-cards of each target card component is determined to generate a visual data display interface. This method can achieve adaptive layout of target card components and their sub-cards. In the case of building or secondary development of the visual data display interface, there is no need to manually drag and drop to configure the position of each card, which can improve the construction efficiency.
[0066] In an exemplary embodiment, obtaining the target component arrangement order may include: in response to the user's selection order of the target card components, displaying the initial component arrangement order of the target card components, and using the initial component arrangement order as the target component arrangement order; or, in response to the user's selection order of the target card components, displaying the initial component arrangement order of the target card components; and in response to the user's adjustment operation on the initial component arrangement order, adjusting the initial component arrangement order to obtain the target component arrangement order.
[0067] When building a visual data display interface, that is, when setting up a visual data display interface or performing secondary development on a visual data display interface that has already been built, users can choose standard card components from the component library, or create a new custom card component and select that custom card component as the target card component for building the visual data display interface.
[0068] The terminal can respond to the user's selection order of target card components, displaying the initial component arrangement order, which can then be used as the target component arrangement order. It automatically generates the target component arrangement order based on the order in which the user selects the cards, saving user operations and improving interaction efficiency.
[0069] Alternatively, the terminal can respond to the user's selection order of the target card components by displaying the initial component arrangement; it can also respond to the user's adjustment of the initial component arrangement by adjusting the initial component arrangement to obtain the target component arrangement. Users can adjust the selected initial component arrangement, allowing for easy correction and resulting in a more accurate target component arrangement.
[0070] When performing secondary development on an already built visualization data display interface, the system can display the order of the added components in the interface and respond to user adjustments to the order of the added components to obtain the target component order.
[0071] In summary, when adding, deleting, or modifying components or cards, users do not need to manually drag and drop to configure the position of each card. They only need to change the arrangement order of the components according to the actual needs to obtain the target component arrangement order, thereby adjusting the position layout of the target card components, which can reduce maintenance costs.
[0072] In this embodiment, the initial component arrangement order or the initial component arrangement order after user adjustment is used as the target component arrangement order; the position layout of the target card components can be adjusted by changing the target component arrangement order.
[0073] In an exemplary embodiment, based on the basic configuration information and layout parameters of the visualization data display interface, each target card component is laid out according to the target component arrangement order to obtain the target position information of each target card component. This may include: determining the initial placement position of the component based on the basic configuration information and layout parameters of the visualization data display interface; and performing a fit and adaptability assessment on each target card component according to the target component arrangement order based on the initial placement position of the component to obtain the target position information of each target card component.
[0074] The terminal can establish a virtual coordinate system starting from the upper left corner of the container in the visualization data display interface. Based on the basic configuration information and layout parameters of the visualization data display interface, the edge spacing is reserved to determine the starting placement position of the components.
[0075] The compatibility of each target card component can be evaluated sequentially from the initial placement position of the component, according to the order of the target components.
[0076] For example, the terminal can determine whether the current line can accommodate the target card component. If the current line cannot accommodate the target card component, a line break operation is triggered, and the terminal continues to determine whether the next line can accommodate the target card component, and so on, to determine the coordinate position of each target card component, thereby obtaining the target position information of each target card component.
[0077] After the terminal determines the target location information of all target card components, it can calculate the total height of the container for the visualization data display interface based on the bottom position of the last row, ensuring that the container height can just accommodate all target card components.
[0078] In this embodiment, based on the initial placement position of the components, the compatibility assessment of each target card component is performed sequentially according to the arrangement order of the target components to obtain the target position information of each target card component. This enables the adaptive layout of the target card components and improves the construction efficiency.
[0079] In an exemplary embodiment, the accommodation adaptability assessment of each target card component is performed sequentially according to the arrangement order of the target components to obtain the target position information of each target card component. This may include: sequentially assigning each target card component as the current target card component according to the arrangement order; determining the used width of the current row based on the size information of the placed target card components and the component spacing parameters between the placed target card components to determine the remaining space of the current row; obtaining the accommodation adaptability between the remaining space of the current row and the current target card component based on the sum of the width of the current target card component and the required spacing, as well as the remaining space of the current row; triggering a line break operation and starting the accommodation adaptability assessment of the next row if the remaining space of the current row and the current target card component are not compatible; and determining the coordinate position of the current target card component if the remaining space of the current row and the current target card component are compatible to obtain the target position information of the current target card component.
[0080] The terminal can obtain the size information of the placed target card components and get the width of the placed target card components; it can determine the width used in the current row based on the sum of the width of the placed target card components and the spacing parameters between the placed target card components.
[0081] The remaining space in the current row can be determined based on the width already used in the current row.
[0082] If the sum of the width of the current target card component and the required spacing is less than or equal to the remaining space in the current row, it can be determined that the current row's remaining space is compatible with the current target card component; if the sum of the width of the current target card component and the required spacing is greater than the remaining space in the current row, it can be determined that the current row's remaining space is not compatible with the current target card component.
[0083] If the remaining space in the current row is not compatible with the capacity of the current target card component, a line break operation is triggered. When breaking a line, the coordinates are moved vertically downwards by a distance equal to the height of the tallest card component in the current row plus the line spacing. The horizontal coordinates are then reset to the far left of the container, and the space capacity assessment for the next row is initiated.
[0084] If the remaining space in the current row is compatible with the current target card component, determine the coordinate position of the current target card component and record the space occupied by the current target card component to obtain the target position information of the current target card component.
[0085] In this embodiment, based on the sum of the width of the current target card component and the required interval, as well as the remaining space in the current row, the fit between the remaining space in the current row and the current target card component is obtained, thereby obtaining the target position information of the current target card component. This enables adaptive layout of the target card component and improves construction efficiency.
[0086] In an exemplary embodiment, determining the target position information of the subordinate card corresponding to each target card component based on the target position information of each target card component may include: obtaining the position offset information of each target card component based on the target position information and the original position information of each target card component; and determining the target position information of the subordinate card corresponding to each target card component based on the original position information and the position offset information of the subordinate card corresponding to each target card component.
[0087] When the terminal is building a visual data display interface, that is, when building a visual data display interface or when performing secondary development on a visual data display interface that has already been built, it can obtain the position offset information of each target card component based on the difference between the target position information and the original position information of each target card component.
[0088] Based on the original position information of the subordinate cards corresponding to each target card component, the same position offset as the target card component can be made to obtain the target position information of the subordinate cards corresponding to each target card component.
[0089] In cases where the target card component includes multiple levels of sub-cards, each level of card can be processed sequentially downwards.
[0090] In this embodiment, the position offset information of each target card component is obtained based on the target position information and the original position information of each target card component; the target position information of the lower-level card corresponding to each target card component is determined based on the original position information and the position offset information of the lower-level card corresponding to each target card component. This allows for the quick and accurate acquisition of the target position information of the lower-level card corresponding to each target card component, enabling adaptive layout of the lower-level cards and improving construction efficiency.
[0091] In an exemplary embodiment, determining the target location information of the subordinate card corresponding to each target card component based on the target location information of each target card component may include: obtaining the relative positional relationship between each target card component and the subordinate card corresponding to each target card component; and determining the target location information of the subordinate card corresponding to each target card component based on the target location information of each target card component and the relative positional relationship.
[0092] When constructing a visual data display interface, either during the setup of the interface or during secondary development of an existing one, the terminal can determine the target position information of the subordinate cards corresponding to each target card component based on the target position information of each target card component and the relative positional relationships between each target card component and its corresponding subordinate cards. Where the target card component includes multiple levels of subordinate cards, each level of cards can be processed sequentially downwards.
[0093] For example, the relative positional relationship between the target card component A and its corresponding subordinate cards B, C, and D is as follows: Card B is positioned 150px to the right and 0px above the target card component A; Card C is positioned 150px to the right and 80px below the target card component A; Card D is positioned 150px to the left and 0px above the target card component A.
[0094] If the target location information of target card component A is (700, 400), then the target location information of card B is: 700+150=850, 400+0=400→(850, 400), the target location information of card C is: 700+150=850, 400+80=480→(850, 480), and the target location information of card D is: 700-150=550, 400+0=400→(550, 400).
[0095] In this embodiment, based on the target position information of each target card component and the relative positional relationship between each target card component and its corresponding lower-level card, the target position information of the lower-level card corresponding to each target card component can be obtained quickly and accurately, enabling adaptive layout of the lower-level cards and improving construction efficiency.
[0096] To better understand the above method, the following describes in detail an application example of the method for constructing a visualization data display interface according to this application.
[0097] The traditional method of building a visual data display interface (such as a large screen dashboard) is to manually drag and drop to adjust the position of the cards and configure them. Each card position is stored according to the absolute positioning of the current configuration position, and the configuration position of each card is fixed. The front end loads and displays the cards according to the absolute positioning of the configuration position.
[0098] The traditional process for building a visual data display interface is as follows: Create a new page for the visual data display interface; drag and drop cards (elements) onto the canvas to configure the cards; determine whether the configuration of all cards is complete. If the configuration is not complete, return to step 3 of the card configuration. If the configuration is complete, save the configuration and obtain the card absolute positioning data; save the card absolute positioning data to the database; read the card absolute positioning data when loading the visual data display interface; render the cards according to the card absolute positioning data on the front end to generate the visual data display interface.
[0099] Traditional methods for building visual data display interfaces suffer from the following technical drawbacks because they store card configuration information based on absolute positioning without any adaptation mechanism:
[0100] (1) High implementation cost: When redeveloping the visual data display interface that has been built, each card and component needs to be manually dragged, resized and positioned by the implementers. This process is extremely time-consuming, tedious and prone to errors, resulting in low construction efficiency of the visual data display interface.
[0101] (2) Difficult to maintain: When it is necessary to add, delete or adjust a card or component, the layout of the visualization data display interface needs to be adjusted, and all cards need to be manually dragged and repositioned, resulting in high maintenance costs.
[0102] (3) Difficulty in dynamically loading different content: Different people have different indicators of interest, but the visualization data display interface is difficult to dynamically load different content, and may need to configure many different visualization data display interfaces.
[0103] To address the aforementioned issues, this embodiment provides a method for constructing a visual data display interface. The method establishes a hierarchical tree-structured relationship between the cards in the visual data display interface and the card components. For example, the tree-structured relationship could be as follows: Visual data display interface – Card component – N-level lower-level cards.
[0104] Among them, a visual data display interface is a data visualization tool, such as a large-screen dashboard.
[0105] The card component is a tree-structured component, with each card component containing N levels of subordinate cards. N is a natural number. The tree-structured relationship between the card component and its subordinate cards allows the child nodes to calculate their corresponding positions based on the position changes of their parent nodes, ensuring the overall consistency of the card component. Relative to the published state, the positions of the subordinate cards within the entire card component remain fixed.
[0106] Build a standard card component structure and publish it as a public component library. All published card components are nodes in a tree structure, which makes it easy to select card components from the component library when building a visual data display interface.
[0107] When building a visual data display interface for a terminal, you can first perform the following steps: Figure 3 The configuration process is shown below.
[0108] Step 302: Begin building the visual data display interface.
[0109] The terminal receives the user's creation command and begins to build a visual data display interface.
[0110] Step 304: Set the basic configuration information for the visualization data display interface.
[0111] The terminal obtains the basic configuration information of the user-set visual data display interface.
[0112] Step 306: Enter layout editing mode.
[0113] Step 308: Select the operation type, which includes three types: adding card components from the component library, adjusting the order of added card components, and configuring layout parameters.
[0114] The terminal proceeds to the corresponding steps based on the operation type selected by the user.
[0115] When you choose to add a card component from the component library, proceed to step 310 to add the card component from the component library.
[0116] Step 316, browse the component library.
[0117] Step 318: Select component type.
[0118] The terminal proceeds to the corresponding steps based on the component type selected by the user.
[0119] When the standard card component is selected, proceed to step 320 to use the standard card component.
[0120] When you select to create a new custom card component, proceed to step 322 to create a new custom card component;
[0121] Step 324: Design the internal structure of the card component and add / configure N-level cards.
[0122] Based on the user's settings, the terminal determines the internal structure of the card component and adds / configures N-level cards.
[0123] Step 326: Save the newly created custom card component to the component library.
[0124] Step 328: Select an existing card component from the list as the target card component.
[0125] Step 330: Add the target card component to the current visualization data display interface.
[0126] When you select to adjust the order of the added card components, proceed to step 312 to adjust the order of the added cards.
[0127] The terminal adjusts the order of added cards based on the user's adjustment operation.
[0128] Step 332: Adjust the order of the card components to obtain the target component order.
[0129] Based on the user's adjustment operation, the terminal adjusts the arrangement order of the card components to obtain the target component arrangement order.
[0130] When you select to configure layout parameters, proceed to step 314 to configure layout parameters.
[0131] The terminal obtains the layout parameters set by the user.
[0132] Step 334: Set layout parameters such as spacing and margins.
[0133] The terminal obtains layout parameters such as spacing and margins set by the user.
[0134] Step 336 allows you to preview the layout effect in real time based on the basic configuration information, the added target card components, the order of the target card components, and the configuration layout parameters.
[0135] The terminal can display the layout effect in real time based on the basic configuration information, the added target card components, the arrangement order of the target card components, and the configuration layout parameters. Users can preview the layout effect in real time.
[0136] Step 308: Determine whether the configuration is complete based on the real-time preview layout effect.
[0137] Users can judge whether the configuration is complete by previewing the layout in real time; the terminal can obtain the user's judgment result.
[0138] If the configuration is not completed, re-enter step 306 to enter layout editing mode.
[0139] Once the configuration is complete, proceed to step 340 to save the configuration.
[0140] Step 342: Generate layout data, establish component reference relationships, and obtain configuration information.
[0141] Step 344: Store the configuration information in the database.
[0142] This involves adding the target card component from the component library, i.e., referencing the selected target card component. The specific reference structure is as follows: Figure 4 As shown.
[0143] The terminal can reference card components 1, 2, and 3 stored in the component library 4032 in the database 4022 of the data persistence layer 402, based on the storage configuration relationship and the card components 1, 2, and 3 selected by the user when constructing the visual data display interface 401. Specifically, the subordinate cards corresponding to card component 1 include card 1, card 2, and card 3; the subordinate cards corresponding to card component 2 include card 1 and card 2; and the subordinate cards corresponding to card component 3 include card 1. The component library management system 403 can manage the component library 4032.
[0144] After completing the configuration process, the terminal can obtain the configuration information and execute actions such as... through the dynamic layout engine. Figure 5 The process is shown below.
[0145] Step 502: Request to load the visualization data display interface.
[0146] Step 504: Read the basic configuration information of the visualization data display interface.
[0147] Step 506: Obtain the list of unique identifiers for the referenced target card components.
[0148] Step 508: Obtain the target card component definition from the component library based on the target card component's unique identifier.
[0149] Step 510: Parse the target card component tree structure.
[0150] Convert the target card component and its subordinate cards into a tree structure that the program can recognize.
[0151] Step 512, layout calculation engine, including steps 5122-5128; wherein, step 5122, calculate the total height of the canvas, step 5124, calculate the target position information of each target card component, step 5126, calculate the target position information of the subordinate cards of each target card component, and step 5128, apply layout parameters.
[0152] Step 514: Generate layout data.
[0153] Step 516: Return to front-end rendering.
[0154] Step 518: The front end calculates and renders the target card component and its sub-cards.
[0155] Step 520: Generate a visual data display interface.
[0156] This changes the approach from "how to place (HOW-TO)" to "what to place (WHAT-TO)", making the construction of the data visualization interface more flexible.
[0157] In calculating the target position information of each target card component's subordinate cards, complex multi-level coordinate transformations and inheritance are implemented. The original position information of the target card component is stored in the database. For subordinate cards of a card component, the original position information of the target card component is not related to it; it is usually the offset information relative to its associated target card component. The target position information of the subordinate cards is then calculated. Specifically, the offset position of each subordinate card relative to its parent card on the rendering canvas needs to be calculated in the backend.
[0158] A reliable traversal mechanism can be established through recursive / loop calculations. Starting from the target card component, each lower-level card is processed level by level, with the offset position of the parent card used as input for the calculation of the child card. The offset position of the child card remains consistent with that of the parent card, thus maintaining the relative positional relationship between each target card component and its corresponding lower-level card.
[0159] When dealing with unknown levels, nested levels can be designed to flexibly handle uncertainties.
[0160] Furthermore, during the calculation process, it is necessary to maintain a "currently calculated total height and remaining width of the current row" to dynamically determine the position of the next card. This state management must be accurate; otherwise, card overlap or spacing errors may occur.
[0161] The detailed processing steps of the dynamic layout engine are as follows:
[0162] The streaming layout calculation engine employs an intelligent arrangement algorithm that simulates the thought process of manually placing cards, automatically determining the optimal position for each target card component. The entire process is divided into a preparation phase, a core calculation phase, and a result processing phase.
[0163] (1) Preparation stage: Obtain the basic configuration information and layout parameters of the visualization data display interface required for the layout; read the fixed width size of the container of the visualization data display interface; obtain all target card components to be arranged and their size information; set the spacing parameters between target card components and the margin parameters of the container edge; determine the order of the target card components, that is, determine the order of the target components.
[0164] (2) Core computing stage:
[0165] A virtual coordinate system can be established starting from the top left corner of the container in the visualization data display interface. Based on the basic configuration information and layout parameters of the visualization data display interface, reserve edge spacing, and determine the starting placement position of the components.
[0166] The compatibility of each target card component is evaluated sequentially according to the order of the target components, and the following judgment logic is executed:
[0167] Space checking mechanism: Based on the size information of the placed target card components and the component spacing parameters between the placed target card components, determine the width used in the current row to determine the remaining space in the current row; based on the sum of the width of the current target card component and the required spacing, and the remaining space in the current row, determine the fit between the remaining space in the current row and the current target card component.
[0168] Line break decision process: If the remaining space in the current line is not compatible with the current target card component, a line break operation is triggered. When breaking a line, the coordinates are moved vertically downwards by a distance equal to the height of the tallest card component in the current line plus the line spacing. The horizontal coordinates are then reset to the far left of the container, and the space capacity assessment for the next line is initiated.
[0169] Position Determination and Recording: Assuming the remaining space in the current row is compatible with the current target card component, determine the coordinates of the current target card component and record the space it occupies to obtain its target position information. Update the cumulative width and maximum height of the current row.
[0170] Container height calculation: After all card components are placed and the target position information of all target card components is determined, the total height of the container for the visualization data display interface can be calculated based on the bottom position of the last row to ensure that the container height can just accommodate all target card components.
[0171] Relative position preservation processing: For each target card component and its corresponding lower-level card, the relative positional relationship between each target card component and its corresponding lower-level card remains unchanged. The target position information of each target card component is used as a reference point, and the target position information of the corresponding lower-level card is calculated through relative coordinate transformation to ensure that the internal layout structure of each target card component is completely consistent with the original.
[0172] The timing diagram for the dynamic layout engine processing in this embodiment is as follows: Figure 6 As shown in the image. The client, layout service, data warehouse, and streaming layout calculator are all located on the terminal.
[0173] Step 602: Request calculation of the flow layout.
[0174] Step 604: Obtain basic configuration information.
[0175] Step 606, return to dynamic screen configuration.
[0176] Step 608: Obtain the list of unique identifiers for the target card component.
[0177] Step 610, return to the list.
[0178] Returns a list of unique identifiers for the target card component.
[0179] Step 612: Batch acquire element data.
[0180] Batch retrieve each target card component and its sub-cards.
[0181] Step 614: Return the element data.
[0182] Returns each target card component and its child cards.
[0183] Step 616: Construct the element tree structure.
[0184] Each target card component and its subordinate cards are converted into an element tree structure that the program can recognize.
[0185] Step 618 returns the structured element data.
[0186] Step 620: Initialize layout parameters.
[0187] Step 622, parameter initialization complete.
[0188] Step 624: For each target card component, check the current row space.
[0189] Step 626 returns whether the current row can be placed.
[0190] Step 628: There is insufficient space on the current line, so a line break operation is performed.
[0191] Step 630: Return to the new line position.
[0192] Step 632: Calculate the position of the current card component.
[0193] Step 634: Return to the calculation location.
[0194] Step 636: Update the current row status.
[0195] Step 638: Return to the updated current row state.
[0196] Step 640: Calculate the position of the child card of the current card component.
[0197] Step 642: Return the calculated position of the next-level card.
[0198] Step 644: Calculate the total height of the container.
[0199] Step 646: Return the calculated total height of the container.
[0200] Step 648: Save the layout result.
[0201] Step 650, Confirm successful saving.
[0202] Step 652: Return the calculated layout data.
[0203] The method for constructing a visual data display interface provided in this embodiment requires seamless integration with traditional systems and an extension of the data consistency model. Traditional visual data display interface data tables need to add new fields to identify "this is a dynamic visual data display interface" or "the layout of this card is dynamically calculated," which is done in real-time each time the visual data display interface configuration is requested. The advantage is that the data is always up-to-date; when the referenced card components change, the dynamic visual data display interface can also be dynamically loaded and adaptively redesigned according to the latest card component layout.
[0204] When an administrator modifies the configuration of the dynamic visualization data display interface, a calculation is triggered, and the calculation results (the latest absolute positioning of all elements calculated by the calculation engine) are persisted to the database. The advantage is fast front-end retrieval, as it doesn't require engine calculation during loading, making it indistinguishable from a regular visualization data display interface. The disadvantage is that if the content of the source section changes (e.g., the height changes), a mechanism is needed to notify and refresh the persisted data, requiring a recalculation.
[0205] The method for constructing a visual data display interface provided in this embodiment has the following beneficial effects:
[0206] (1) Improved implementation efficiency: It can achieve adaptive layout of target card components and their subordinate cards. In the case of building a visual data display interface or secondary development, there is no need to manually drag and drop to configure the position of each card, reducing the construction efficiency from the level of days to the level of minutes.
[0207] (2) Extremely low maintenance cost: Adding, deleting or modifying card components or cards only requires modifying the configuration list and refreshing with one click. There is no need to manually drag and drop the configuration to position each card.
[0208] (3) Building technological barriers: It has achieved the upgrade from functionality to intelligence and differentiated competition.
[0209] (4) Supports a truly dynamic and visual data display interface: the content is variable and the layout is adaptive, opening up new application scenarios.
[0210] (5) Configurable Portal: Users can customize the sequence of card components they want to see. Users can select the card components they want to see in the configurable portal according to their needs and habits, and set the display order of the card components. This will automatically generate a portal page that meets the user's requirements based on the user's configuration, thereby improving the user's personalized experience.
[0211] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages in other steps. It is understood that the steps in different embodiments can be freely combined as needed, and all non-contradictory solutions formed by such combinations are within the scope of protection of this application.
[0212] Based on the same inventive concept, this application also provides a device for constructing a visual data display interface to implement the above-described method for constructing a visual data display interface. The solution provided by this device is similar to the solution described in the above method. Therefore, the specific limitations of one or more embodiments of the device for constructing a visual data display interface provided below can be found in the limitations of the method for constructing a visual data display interface described above, and will not be repeated here.
[0213] In one exemplary embodiment, such as Figure 7 As shown, a device for constructing a visual data display interface is provided, wherein:
[0214] The component and arrangement order acquisition module 702 is used to acquire the target card components and the arrangement order of the target components;
[0215] The component target location information acquisition module 704 is used to lay out each target card component according to the target component arrangement order based on the basic configuration information and layout parameters of the visualization data display interface, and obtain the target location information of each target card component.
[0216] The card target location information acquisition module 706 is used to determine the target location information of the lower-level card corresponding to each target card component based on the target location information of each target card component.
[0217] The visualization data display interface generation module 708 is used to generate the visualization data display interface based on the target position information of each target card component and the corresponding lower-level card of each target card component.
[0218] In one embodiment, the component and arrangement order acquisition module 702 is configured to: display the initial component arrangement order of the target card components in response to the user's selection order of the target card components, and use the initial component arrangement order as the target component arrangement order; or, display the initial component arrangement order of the target card components in response to the user's selection order of the target card components; and adjust the initial component arrangement order in response to the user's adjustment operation on the initial component arrangement order to obtain the target component arrangement order.
[0219] In one embodiment, the component target position information acquisition module 704 is used to: determine the initial placement position of the component based on the basic configuration information and layout parameters of the visualization data display interface; and, based on the initial placement position of the component, perform a fit and adaptability assessment on each target card component in the order of the target components to obtain the target position information of each target card component.
[0220] In one embodiment, the component target position information acquisition module 704 is configured to: sequentially select each target card component as the current target card component according to the arrangement order of the target components; determine the used width of the current row based on the size information of the placed target card components and the interval parameters between the placed target card components, so as to determine the remaining space of the current row; obtain the accommodation adaptability between the remaining space of the current row and the current target card component based on the sum of the width of the current target card component and the required interval, and the remaining space of the current row; if the accommodation adaptability between the remaining space of the current row and the current target card component is not compatible, trigger a line break operation and start the space accommodation evaluation of the next row; if the accommodation adaptability between the remaining space of the current row and the current target card component is compatible, determine the coordinate position of the current target card component to obtain the target position information of the current target card component.
[0221] In one embodiment, the card target location information acquisition module 706 is used to: obtain the position offset information of each target card component based on the target location information and the original location information of each target card component; and determine the target location information of the lower-level card corresponding to each target card component based on the original location information of the lower-level card corresponding to each target card component and the position offset information.
[0222] In one embodiment, the card target location information acquisition module 706 is used to: acquire the relative positional relationship between each target card component and the corresponding lower-level card of each target card component; and determine the target location information of the corresponding lower-level card of each target card component based on the target location information of each target card component and the relative positional relationship.
[0223] Each module in the aforementioned visualization data display interface construction device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device in hardware form, or stored in the memory of a computer device in software form, so that the processor can call and execute the operations corresponding to each module.
[0224] In one exemplary embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 8As shown, the computer device includes a processor, memory, input / output interfaces (I / O), and a communication interface. The processor, memory, and I / O interfaces are connected via a system bus, and the communication interface is also connected to the system bus via the I / O interfaces. The processor provides computational and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage medium. The database stores data from embodiments of a method for constructing a visual data display interface. The I / O interfaces are used for exchanging information between the processor and external devices. The communication interface is used for communicating with external terminals via a network connection. When the computer program is executed by the processor, it implements a method for constructing a visual data display interface.
[0225] Those skilled in the art will understand that Figure 8 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.
[0226] In one embodiment, a computer device is also provided, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps in the above method embodiments.
[0227] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon that, when executed by a processor, implements the steps in the above method embodiments.
[0228] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, implements the steps in the above method embodiments.
[0229] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of the relevant data must comply with relevant regulations.
[0230] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, artificial intelligence (AI) processors, etc., and are not limited to these.
[0231] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.
[0232] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.
Claims
1. A method for constructing a visual data display interface, characterized in that, The method includes: Retrieve the target card components and their arrangement order; Based on the basic configuration information and layout parameters of the visualization data display interface, each target card component is laid out according to the arrangement order of the target components to obtain the target position information of each target card component. Based on the target location information of each target card component, determine the target location information of the corresponding lower-level card for each target card component; The visualization data display interface is generated based on the target location information of each target card component and the corresponding subordinate card.
2. The method according to claim 1, characterized in that, Obtain the order of the target components, including: In response to the user's selection order of the target card components, the initial component arrangement order of the target card components is displayed, and the initial component arrangement order is used as the target component arrangement order; Alternatively, in response to the user's selection order of the target card components, the initial component arrangement order of the target card components is displayed; in response to the user's adjustment operation on the initial component arrangement order, the initial component arrangement order is adjusted to obtain the target component arrangement order.
3. The method according to claim 1, characterized in that, The step involves arranging each target card component according to its arrangement order based on the basic configuration information and layout parameters of the visual data display interface, thereby obtaining the target position information of each target card component, including: Based on the basic configuration information and layout parameters of the visualization data display interface, determine the initial placement position of the components; Based on the initial placement position of the components, the compatibility of each target card component is evaluated sequentially according to the arrangement order of the target components to obtain the target position information of each target card component.
4. The method according to claim 3, characterized in that, The process of sequentially evaluating the compatibility of each target card component according to the arrangement order of the target components to obtain the target position information of each target card component includes: Each target card component is selected as the current target card component in the order they are arranged. Based on the size information of the placed target card components and the spacing parameters between the placed target card components, determine the width used in the current row, and determine the remaining space in the current row based on the width used in the current row; Based on the sum of the width of the current target card component and the required interval, and the remaining space of the current row, the fit between the remaining space of the current row and the current target card component is obtained; If the remaining space in the current row is not compatible with the capacity of the current target card component, a line break operation is triggered to start the space capacity assessment for the next row. If the remaining space in the current row is compatible with the current target card component, determine the coordinate position of the current target card component to obtain the target position information of the current target card component.
5. The method according to claim 1, characterized in that, The step of determining the target location information of the lower-level card corresponding to each target card component based on the target location information of each target card component includes: Based on the target position information and original position information of each target card component, the position offset information of each target card component is obtained; Based on the original position information of the subordinate card corresponding to each target card component and the position offset information, the target position information of the subordinate card corresponding to each target card component is determined.
6. The method according to claim 1, characterized in that, The step of determining the target location information of the lower-level card corresponding to each target card component based on the target location information of each target card component includes: Obtain the relative positional relationship between each target card component and its corresponding lower-level cards; Based on the target location information of each target card component and the relative positional relationship, the target location information of the subordinate card corresponding to each target card component is determined.
7. A device for constructing a visual data display interface, characterized in that, The device includes: The component and arrangement order acquisition module is used to acquire the target card components and the arrangement order of the target components. The component target location information acquisition module is used to lay out each target card component according to the target component arrangement order based on the basic configuration information and layout parameters of the visualization data display interface, and obtain the target location information of each target card component. The card target location information acquisition module is used to determine the target location information of the lower-level card corresponding to each target card component based on the target location information of each target card component. The visualization data display interface generation module is used to generate the visualization data display interface based on the target position information of each target card component and the corresponding subordinate card of each target card component.
8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 6.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 6.
10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 6.