Visual billboard and control method and system thereof

By using drag-and-drop chart component layout and automatic data binding, the problem of high barriers to big data visualization development has been solved, enabling the rapid construction and iteration of low-code visual dashboards, which are suitable for digital scenarios in multiple industries.

CN121900653APending Publication Date: 2026-04-21GUANGDONG CHICO ELECTRONIC INC +3
View PDF 0 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
GUANGDONG CHICO ELECTRONIC INC
Filing Date
2025-12-19
Publication Date
2026-04-21

AI Technical Summary

Technical Problem

Existing big data visualization development has a high barrier to entry, business personnel cannot participate directly, chart components are complex to bind with data, adjustment efficiency is low, and it is difficult to iterate quickly.

Method used

This paper provides a visual dashboard control method that automatically binds data and generates chart component event execution files by dragging and dropping chart components onto the canvas area. It supports user-defined event configuration, reduces the development threshold, and improves layout and interaction efficiency.

Benefits of technology

It enables non-technical personnel to quickly build big data visualization dashboards, reducing the learning cost, supporting rapid iteration and updates of digital scenarios in multiple industries, and eliminating the need for repeated code modifications to the layout and interaction of chart components.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN121900653A_ABST
    Figure CN121900653A_ABST
Patent Text Reader

Abstract

The invention relates to the technical field of data visualization, and discloses a visual billboard and a control method and system thereof, and the visual billboard and the control method thereof comprise the steps: responding to an operation of dragging a target chart component to a canvas region, and setting the target chart component in the canvas region; obtaining target data selected by a user in the visual interaction interface, and binding and adding the target data into a corresponding canvas chart component in the canvas area; in response to a chart component event set by a user on the visual interaction interface, generating a chart component event execution file according to the chart component event configuration operation; and executing a corresponding chart component event flow based on the chart component event execution file. According to the method, a user can set the chart components in a self-defined manner, the usability is high, the learning cost is low, the method is suitable for digital scenes of multiple industries, the visual board building efficiency is remarkably improved, codes do not need to be repeatedly modified for layout and interaction of different chart components, and rapid iteration updating of the visual board is achieved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of data visualization technology, and in particular to a visualization dashboard and its control method and system. Background Technology

[0002] With the widespread adoption of big data applications, enterprises and organizations increasingly need to display real-time data, such as production metrics, sales trends, and equipment status, through visual dashboards. Existing big data visualization development often relies on professional front-end engineers manually writing code to implement chart layouts, data binding, and interaction logic. However, this approach suffers from the following problems: high development barriers, as business personnel cannot directly participate and front-end developers are required; unintuitive configuration, with complex processes for binding chart components to data and events, and a lack of visualization tools; and low adjustment efficiency, as the layout and interaction of different chart components require repeated code modifications, hindering rapid iteration. Summary of the Invention

[0003] In view of this, embodiments of this application provide a visual dashboard and its control method and system, which can effectively solve the problems of high development threshold and complex binding of chart components with data and time in traditional visual dashboards.

[0004] In a first aspect, embodiments of this application provide a control method for a visual dashboard, the visual dashboard including a visual interactive interface, the control method comprising: In response to a user's action of dragging a target chart component to the canvas area in the visual interactive interface, the target chart component is set in the canvas area; Obtain the target data selected by the user in the visual interactive interface, bind the target data and add it to the corresponding canvas chart component in the canvas area; In response to a chart component event set by the user on the visual interactive interface, a chart component event execution file is generated based on the chart component event. Based on the chart component event execution file, the corresponding chart component event flow is executed in the visual interactive interface.

[0005] In a first possible embodiment of the first aspect, the visual interactive interface includes a chart component library, the chart component library including a plurality of draggable chart components, and setting the target chart component in the canvas area includes: Detect the relative position of the target chart component and the canvas chart component, and display the position layout guide line of the target chart component in the visualization interface based on the relative position; The system obtains the ending position where the user drags the target chart component in the canvas area with the help of the layout guide lines, and sets the target chart component at the ending position. In a second possible embodiment of the first aspect, setting the target chart component in the canvas area further includes: When it is detected that the boundary of the target chart component is within a first preset distance range from the boundary of the canvas chart component, the target chart component is controlled to move closer to the boundary of the canvas chart component.

[0006] In a third possible embodiment of the first aspect, the position layout guide lines include horizontal guide lines and vertical guide lines, and the step of displaying the position layout guide lines of the target chart component in the visualization interface based on the relative position includes: If the horizontal boundary of the target chart component is detected to be within a second preset distance range from the horizontal boundary of the canvas chart component, or if the horizontal center line of the target chart component is within a second preset distance range from the horizontal center line of the canvas chart component, the horizontal auxiliary line is displayed to assist in the horizontal alignment of the target chart component and the canvas chart component. If the vertical boundary of the target chart component is detected to be within a third preset distance range from the vertical boundary of the canvas chart component, or if the vertical center line of the target chart component is within a third preset distance range from the vertical center line of the canvas chart component, the vertical auxiliary line is displayed to assist in the vertical alignment of the target chart component and the canvas chart component.

[0007] In a fourth possible embodiment of the first aspect, binding and adding the target data to the corresponding canvas chart component in the canvas area includes: Based on the field type of the target data, bind the fields of the target data and add them to the fields of the canvas chart component with the same field type; When adding fields of the target data to fields of the canvas chart component, it is checked whether the field type of the canvas chart component is consistent with the field type of the target data. If they are inconsistent, an alarm message is issued.

[0008] In a fifth possible embodiment of the first aspect, the visual interactive interface includes an event editor sub-interface, which includes multiple selectable chart component trigger conditions and chart component actions. The step of generating a chart component event execution file based on the event configuration operation in response to a chart component event set by the user on the visual interactive interface includes: In response to the user configuring the target chart component trigger condition and target chart component action by dragging and dropping the connection in the event editor sub-interface, the target chart component trigger condition and target chart component action of the canvas chart component are saved in the chart component event execution file. In a sixth possible embodiment of the first aspect, the execution of the corresponding chart component event flow in the visual interactive interface based on the chart component event execution file includes: If the user triggers the trigger condition of the target chart component by triggering the canvas chart component, the event execution file of the chart component is read to obtain multiple target chart component actions associated with the trigger conditions of the canvas chart component and the target chart component. The actions of each target chart component are executed sequentially according to the order in which they are performed.

[0009] In a seventh possible embodiment of the first aspect, the visual interactive interface includes a chart component property setting sub-interface, and the control method further includes: In response to the user's animation configuration operation on the canvas chart component in the chart component property settings sub-interface, the animation configuration effect of the target chart component can be previewed or displayed in real time. The animation configuration operation includes setting the animation type and setting the animation configuration parameters.

[0010] Secondly, embodiments of this application provide a control system for a visual dashboard, the visual dashboard including a visual interactive interface, and the control system including: The chart component layout module is used to respond to the user's operation of dragging and dropping a target chart component to the canvas area in the visual interaction interface, and to set the target chart component in the canvas area. The data binding module is used to obtain the target data selected by the user in the visual interactive interface, bind the target data and add it to the corresponding canvas chart component in the canvas area. The event configuration module is used to respond to the chart component events set by the user on the visual interactive interface, and generate chart component event execution files according to the chart component events; The event execution module is used to execute the corresponding chart component event flow in the visual interactive interface based on the chart component event execution file.

[0011] Thirdly, embodiments of this application provide a visual dashboard, including: a visual interactive interface and a processor, wherein the processor is used to execute the above-described control method for the visual dashboard.

[0012] The embodiments of this application have the following beneficial effects: This embodiment provides a control method for a visual dashboard. The visual dashboard includes a visual interactive interface. The control method includes: responding to a user's operation of dragging and dropping a target chart component to a canvas area in the visual interactive interface, and setting the target chart component in the canvas area; obtaining the target data selected by the user in the visual interactive interface, binding the target data and adding it to the corresponding canvas chart component in the canvas area; responding to a chart component event set by the user in the visual interactive interface, generating a chart component event execution file according to the chart component event configuration operation; and executing the corresponding chart component event flow in the visual interactive interface based on the chart component event execution file. This application significantly improves the efficiency of visual dashboard construction through drag-and-drop chart component placement and chart component position layout. Target data is automatically bound and added to the corresponding canvas chart component. Non-technical personnel can complete the construction of big data visual dashboards. Users can customize chart component events, making it highly usable, with a low learning cost, and applicable to digital scenarios in multiple industries. The layout and interaction of different chart components do not require repeated code modifications, enabling rapid iterative updates of the visual dashboard. Attached Figure Description

[0013] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0014] Figure 1 This paper illustrates a first flowchart of a control method for a visual dashboard according to an embodiment of this application. Figure 2 This illustration shows a schematic diagram of a visual interactive interface according to an embodiment of this application; Figure 3 This paper illustrates a second flowchart of the control method for the visual dashboard according to an embodiment of the present application. Figure 4 A schematic diagram of the control system of the visualization dashboard according to an embodiment of this application is shown.

[0015] Explanation of key component symbols: 200 - Control system for visual dashboards; 210 - Component layout module; 220 - Data binding module; 230 - Event configuration module; 240 - Event execution module. Detailed Implementation

[0016] The technical solutions in the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments.

[0017] The graphical components of the embodiments of this application described and illustrated herein can typically be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0018] In the following text, the terms "comprising," "having," and their cognates, which may be used in various embodiments of this application, are intended only to indicate a particular feature, number, step, operation, element, chart component, or combination of the foregoing, and should not be construed as primarily excluding the presence of one or more other features, numbers, steps, operations, elements, chart components, or combinations of the foregoing, or adding the possibility of one or more combinations of features, numbers, steps, operations, elements, chart components, or combinations of the foregoing. Furthermore, the terms "first," "second," "third," etc., are used only for distinguishing descriptions and should not be construed as indicating or implying relative importance.

[0019] Unless otherwise specified, all terms used herein (including technical and scientific terms) shall have the same meaning as commonly understood by one of ordinary skill in the art to which the various embodiments of this application pertain. Terms (such as those defined in commonly used dictionaries) shall be interpreted as having the same meaning as in their contextual meaning in the relevant technical field and shall not be construed as having an idealized or overly formal meaning, unless clearly defined in the various embodiments of this application.

[0020] The following detailed description of some embodiments of this application is provided in conjunction with the accompanying drawings. Unless otherwise specified, the following embodiments and features can be combined with each other.

[0021] Figure 1 A flowchart illustrating a control method for a visual dashboard according to an embodiment of this application is shown. Exemplarily, the visual dashboard includes a visual interactive interface that visualizes complex data across different chart components. Users can dynamically configure chart components and chart component events through clicking, dragging, double-clicking, etc. The control method for this visual dashboard includes the following steps: S110, responding to the user's operation of dragging the target chart component to the canvas area in the visual interactive interface, sets the target chart component in the canvas area.

[0022] The visual interactive interface includes a chart component library, which contains multiple draggable chart components, including charts, lists, and widgets. Charts include, but are not limited to, bar charts, line charts, pie charts, etc. Lists are used to display data in an itemized format, including, but are not limited to, basic tables, tree lists, card lists, editable tables, etc. Widgets are lightweight functional or information modules that can be used to display single key indicators, status prompts, etc. Widgets include, but are not limited to, text boxes, date pickers, drop-down selectors, etc.

[0023] In one implementation, such as Figure 3 As shown, the visual interface also includes a chart component drag-and-drop and layout interface. This interface includes charts, lists, and widgets. The layer control displays all chart components dragged onto the canvas, along with multiple corresponding chart components such as line charts, pie charts, and bar charts. Detailed configuration includes canvas details and component details. Canvas details include canvas size, color, background image, and overall theme settings for the canvas components. Component details allow for component, animation, data source selection, component field types, and component event settings. Component settings include, but are not limited to, component name, size, axis units, labels, and scales. In one embodiment, such as Figure 2 As shown, the positioning and layout of the target chart component includes the following steps: S111, detect the relative position of the target chart component and the canvas chart component, and display the position layout guide lines of the target chart component in the visual interactive interface based on the relative position.

[0024] In one embodiment, the canvas chart component is a chart component already placed on the canvas, and the position layout guidelines include horizontal guidelines and vertical guidelines. When it is detected that the horizontal boundary of the target chart component is within a second preset distance range from the horizontal boundary of the canvas chart component, or that the horizontal center line of the target chart component is within a second preset distance range from the horizontal center line of the canvas chart component, the horizontal guidelines are displayed to assist in the horizontal alignment of the target chart component and the canvas chart component.

[0025] The horizontal boundaries refer to the top and bottom boundary lines of the chart component in the horizontal direction of the canvas, while the horizontal center line refers to the center horizontal line of the chart component in the horizontal direction of the canvas. When a user drags a target chart component onto the canvas, the system monitors its horizontal position relative to other chart components already on the canvas in real time. If it detects that one or both top and bottom edges of the target component are close to the corresponding edges of another component, or that the horizontal center line of the target component is close to the horizontal center line of another component, a horizontal guideline is automatically displayed. This guideline can be the top boundary line, bottom boundary line, or horizontal center line, indicating to the user that the chart is currently in an alignmentable state, thus helping them to accurately place the components and achieve a visually neat arrangement.

[0026] In another embodiment, when it is detected that the vertical boundary of the target chart component is within a third preset distance range from the vertical boundary of the canvas chart component, or when the vertical center line of the target chart component is within a third preset distance range from the vertical center line of the canvas chart component, a vertical auxiliary line is displayed to assist in the vertical alignment of the target chart component and the canvas chart component.

[0027] Vertical boundaries refer to the left and right boundary lines of a chart component in the vertical direction of the canvas, while the vertical center line refers to the center vertical line of the chart component in the vertical direction of the canvas. When a user drags a target chart component onto the canvas, the vertical positional relationship between the target chart component and other chart components already on the canvas is monitored in real time. If it is detected that one or both sides of the target component are close to the corresponding edges of another component, or that the vertical center line of the target component is close to the vertical center line of another component, a vertical guideline is automatically displayed. This guideline can be the left boundary line, right boundary line, or vertical center line, indicating to the user that the components are currently in an alignment state, thus helping them to accurately place the components and achieve a visually neat arrangement.

[0028] S112, obtain the end position of the target chart component dragged by the user in the canvas area with the help of the position layout guide lines, and set the target chart component at the end position.

[0029] As an example, the placement of the target chart component in the canvas area is user-defined, and horizontal and vertical guides are used to help the user align the target chart component with the canvas chart component when placing it.

[0030] S113, under the condition that the boundary of the target chart component is detected to be within a first preset distance range from the boundary of the canvas chart component, control the target chart component to move closer to the boundary of the canvas chart component.

[0031] In this embodiment, the boundaries of the target chart component include an upper boundary, a lower boundary, a left boundary, and a right boundary. The distances between the upper, lower, left, and right boundaries of the target chart component and the upper, lower, left, and right boundaries of the canvas chart component are determined to be within a first preset distance range, thus determining whether to trigger automatic alignment. For example, if the distance between the upper boundary of the target chart component and the upper boundary of the canvas component is within the first preset distance range, the upper boundary of the target chart component can be automatically aligned close to the upper boundary of the canvas chart component, achieving intelligent snap-fit ​​alignment. The first, second, and third preset distance ranges can be set according to actual conditions and are not limited here.

[0032] S120: Obtain the target data selected by the user in the visual interactive interface, bind the target data and add it to the corresponding canvas chart component in the canvas area.

[0033] For example, the target data includes multiple data sources, including but not limited to static data, SQL databases, API interfaces, and real-time streaming data. The visual interactive interface includes a data source panel where users can select a data source to obtain the target data. The target data includes multiple fields, each with a unique field type. Field types include, but are not limited to, categorical fields, such as region or date; and numeric fields, such as the population range corresponding to a region, or the amount for a specific date.

[0034] In one embodiment, based on the field type of the target data, the fields of the target data are bound and added to the fields of a canvas component with the same field type. For example, if the target data returned by the API interface includes January sales of 120 and February sales of 200, this target data is bound and added to a canvas component containing sales and date fields. When adding the fields of the target data to the fields of the canvas component, it is checked whether the field type of the canvas component is consistent with the field type of the target data. If they are inconsistent, an alarm message is issued. In this embodiment, the field type validation checks whether the type of the field data added to the canvas component is consistent with the field type defined by the canvas component. If they are inconsistent, a type mismatch message is displayed to avoid chart anomalies caused by incorrect field types and improve the accuracy of data configuration.

[0035] S130, responding to the chart component event configuration operation set by the user in the visual interactive interface, generates a chart component event execution file based on the chart component events.

[0036] In one embodiment, the visual interactive interface includes an event editor sub-interface, which includes multiple selectable component trigger conditions and component actions. The component trigger conditions include, but are not limited to, clicking a component, double-clicking a component, mouse hovering in and out, etc., and the component actions include, but are not limited to, expanding a table, refreshing chart data, etc.

[0037] In one embodiment, in response to a user configuring target component trigger conditions and target component actions for a canvas component via drag-and-drop in the event editor sub-interface, the target component trigger conditions and target component actions for the canvas component are saved in the component event execution file. Users can associate canvas components, target component trigger conditions, and target component actions one-to-one via drag-and-drop connections. Target component actions can include multiple component actions. Storing the target component trigger conditions and multiple target component actions for the canvas component in the component event execution file allows for the execution of multiple target component actions on the target component when the target component trigger conditions are subsequently detected.

[0038] S140, based on the chart component event execution file, executes the corresponding chart component event flow in the visual interactive interface.

[0039] In one implementation, when it is detected that the user triggers the target component trigger condition on the canvas component, the component event execution file is read to obtain multiple target component actions associated with the canvas component and the target component trigger condition; and the target component actions are executed sequentially according to the order of their respective actions.

[0040] In this embodiment, a click event listener can be used to monitor whether the user triggers the target component trigger condition. When the user triggers the target component trigger condition, the component event is executed according to the target component action in the component event execution file. Alternatively, the target component actions can be executed in the order that the user-defined target component actions are.

[0041] In one embodiment, the visual interactive interface includes a component property setting sub-interface. The control method further includes: responding to the user's animation configuration operation on the canvas component in the component property setting sub-interface to preview or display the animation configuration effect of the target component in real time. The animation configuration operation includes setting the animation type and setting the animation configuration parameters. The property setting sub-interface includes multiple selectable animation types and animation configuration parameters. The animation types include, but are not limited to, fade-in, fly-in, and numerical scrolling; the animation configuration parameters include, but are not limited to, animation duration and animation triggering conditions.

[0042] In this embodiment, this application constructs a low-code big data visualization dashboard generation platform through drag-and-drop component layout, visual data binding, parameterized animation configuration, and event logic editing. This greatly reduces the user's threshold for use and achieves the technical effects of visual development, rapid construction, data-driven approach, and enhanced interaction.

[0043] Figure 4 A schematic diagram of a control system 200 for a visual dashboard according to an embodiment of this application is shown. Exemplarily, the control system 200 for the visual dashboard includes: The component layout module 210 is used to respond to the user's operation of dragging the target component to the canvas area in the visual interactive interface, and to control the position layout of the target component in the canvas area.

[0044] The data binding module 220 is used to obtain the target data selected by the user in the visual interactive interface, bind the target data and add it to the corresponding canvas component in the canvas area.

[0045] The event configuration module 230 is used to respond to the component event configuration operations set by the user in the visual interactive interface and generate component event execution files according to the component event configuration operations.

[0046] The event execution module 240 is used to execute the corresponding component event flow in the visual interactive interface based on the component event execution file.

[0047] It is understood that the system in this embodiment corresponds to the control method of the visual dashboard in the above embodiment, and the options in the above embodiment are also applicable to this embodiment, so they will not be described again here.

[0048] This application also provides a visual dashboard, including: a visual interactive interface and a processor, wherein the processor is used to execute the control method of the visual dashboard of the above embodiments.

[0049] The processor can be an integrated circuit chip with signal processing capabilities. The processor can be a general-purpose processor, including at least one of a Central Processing Unit (CPU), Graphics Processing Unit (GPU), Network Processor (NP), Digital Signal Processor (DSP), Application-Specific Integrated Circuit (ASIC), Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware diagram components. The general-purpose processor can be a microprocessor or any conventional processor, capable of implementing or executing the methods, steps, and logic block diagrams disclosed in the embodiments of this application.

[0050] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can also be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the flowcharts and block diagrams in the accompanying drawings show the architecture, functionality, and operation of possible implementations of apparatus, methods, and computer program products according to various embodiments of this application. 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 alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. For example, two consecutive 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 the block diagram and / or flowchart, and combinations of blocks in the block diagram and / or flowchart, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0051] In addition, the functional modules or units in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0052] If the aforementioned functions are implemented as software functional modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a smartphone, personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application.

[0053] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application.

Claims

1. A control method for a visual dashboard, characterized in that, The visualization dashboard includes a visual interactive interface, and the control method includes: In response to a user's action of dragging a target chart component to the canvas area in the visual interactive interface, the target chart component is set in the canvas area; Obtain the target data selected by the user in the visual interactive interface, bind the target data and add it to the corresponding canvas chart component in the canvas area; In response to a chart component event set by the user on the visual interactive interface, a chart component event execution file is generated based on the chart component event. Based on the chart component event execution file, the corresponding chart component event flow is executed in the visual interactive interface.

2. The control method for the visual dashboard according to claim 1, characterized in that, The visual interactive interface includes a chart component library, which includes multiple draggable chart components. Setting the target chart component in the canvas area includes: The relative position of the target chart component and the canvas chart component is detected, and a position layout guide line of the target chart component is displayed in the visualization interface based on the relative position. The system obtains the ending position where the user drags the target chart component in the canvas area with the help of the layout guide lines, and sets the target chart component at the ending position.

3. The control method for the visual dashboard according to claim 2, characterized in that, Setting the target chart component in the canvas area further includes: When it is detected that the boundary of the target chart component is within a first preset distance range from the boundary of the canvas chart component, the target chart component is controlled to move closer to the boundary of the canvas chart component.

4. The control method for the visual dashboard according to claim 2, characterized in that, The position layout guide lines include horizontal guide lines and vertical guide lines. The step of displaying the target chart component in the visual interactive interface based on its relative position using the position layout guide lines includes: If the horizontal boundary of the target chart component is detected to be within a second preset distance range from the horizontal boundary of the canvas chart component, or if the horizontal center line of the target chart component is within a second preset distance range from the horizontal center line of the canvas chart component, the horizontal auxiliary line is displayed to assist in the horizontal alignment of the target chart component and the canvas chart component. If the vertical boundary of the target chart component is detected to be within a third preset distance range from the vertical boundary of the canvas chart component, or if the vertical center line of the target chart component is within a third preset distance range from the vertical center line of the canvas chart component, the vertical auxiliary line is displayed to assist in the vertical alignment of the target chart component and the canvas chart component.

5. The control method for the visual dashboard according to claim 1, characterized in that, The step of binding the target data and adding it to the corresponding canvas chart component in the canvas area includes: Based on the field type of the target data, bind the fields of the target data and add them to the fields of the canvas chart component with the same field type; When adding fields of the target data to fields of the canvas chart component, it is checked whether the field type of the canvas chart component is consistent with the field type of the target data. If they are inconsistent, an alarm message is issued.

6. The control method for the visual dashboard according to claim 1, characterized in that, The visual interactive interface includes an event editor sub-interface, which includes multiple selectable chart component trigger conditions and chart component actions. The system responds to chart component events set by the user on the visual interactive interface, generating a chart component event execution file based on the event configuration, including: In response to the user configuring the target chart component trigger condition and target chart component action by dragging and dropping the connection in the event editor sub-interface, the target chart component trigger condition and target chart component action of the canvas chart component are saved in the chart component event execution file.

7. The control method for the visual dashboard according to claim 6, characterized in that, The execution of the corresponding chart component event flow in the visual interactive interface based on the chart component event execution file includes: If the user triggers the trigger condition of the target chart component by the canvas chart component, the event execution file of the chart component is read to obtain multiple target chart component actions associated with the trigger conditions of the canvas chart component and the target chart component. The actions of each target chart component are executed sequentially according to the order in which they are performed.

8. The control method for the visual dashboard according to claim 1, characterized in that, The visual interactive interface includes a sub-interface for setting chart component properties, and the control method further includes: In response to the user's animation configuration operation on the canvas chart component in the chart component property settings sub-interface, the animation configuration effect of the target chart component can be previewed or displayed in real time. The animation configuration operation includes setting the animation type and setting the animation configuration parameters.

9. A control system for a visual dashboard, characterized in that, The visualization dashboard includes a visual interactive interface, and the control system includes: The chart component layout module is used to respond to the user's operation of dragging and dropping a target chart component to the canvas area in the visual interaction interface, and to set the target chart component in the canvas area. The data binding module is used to obtain the target data selected by the user in the visual interactive interface, bind the target data and add it to the corresponding canvas chart component in the canvas area. The event configuration module is used to respond to the chart component events set by the user on the visual interactive interface, and generate chart component event execution files according to the chart component events; The event execution module is used to execute the corresponding chart component event flow in the visual interactive interface based on the chart component event execution file.

10. A visual dashboard, characterized in that, include: A visual interactive interface and a processor, the processor being used to execute the control method for the visual dashboard as described in any one of claims 1-8.