This topic describes how to operate widgets in the canvas editor. It covers basic features such as dragging, scaling, rotating, and shortcut keys, along with advanced features such as batch configuration and carousel containers, to help you work with widgets more efficiently in dashboards.
Prerequisites
You have created a dashboard. You can create a dashboard from a template, or create a dashboard from a blank canvas.
Access the canvas editor
Access the DataV console.
On the Workspace page, in the Dashboard section, hover over the target dashboard and click Edit to access the canvas editor page of the dashboard.
On this page, you can perform basic operations, batch configuration, group operations, create carousel containers, and other operations as needed.
Basic features
Operation | Description |
Drag | Select one or more widgets from the Widget Library on the left, and hold the left mouse button to drag them.
|
Scale | After selecting one or more widgets, move the mouse to the edge of the bounding box. When the scaling icon appears, hold the left mouse button and drag. |
Rotate | Select one or more widgets, and move the mouse to the white dot near the top edge of the widget. When the rotation icon appears, hold the left mouse button to rotate the widget. |
Widget Lock | For more information, see Layer management. |
Widget Layer Position Movement | Right-click a widget in the dashboard canvas or layer panel. In the pop-up menu, perform operations such as Bring To Front, Send To Back, Bring Forward, or Send Backward. |
Generate Iterator | For more information, see Layer management. |
Enter Blueprint Editor | Enter the blueprint editor and directly locate the current widget node to implement complex interaction effects through low-code editing. |
Widget Hide | For more information, see Layer management. |
Widget Rename | For more information, see Layer management. |
Copy ID | Copy the current widget ID value, which can be used for quick search in the canvas editor and blueprint editor. |
Widget Copy | For more information, see Layer management. |
Widget Delete | For more information, see Layer management. |
Widget Favorite | For more information, see Layer management. |
Thumbnail | DataV provides a thumbnail feature in the lower-left corner of the canvas. You can use this feature to adjust the layout of widgets on the canvas.
|
Shortcut Keys | Canvas shortcut keys
|
icon in the lower-left corner of the canvas to turn the thumbnail on or off.Batch configuration
Operation | Description |
Batch Configuration | After selecting multiple widgets, you can make the following batch configurations in the right panel.
|
Group operations
Operation | Description |
Group Operations |
Note If you need the carousel feature, click Use Carousel Container. For specific operations, see Carousel container. |
in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see 
icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
icon.
icon to horizontally flip a widget.
icon to vertically flip a widget.
icon to enable the 3D transformation feature for the group.Carousel container
A carousel container can gather multiple widgets in a fixed area and dynamically switch between them through various animation effects such as sliding and flipping. If your screen space is limited but you need to display a large amount of data or information, you can use a carousel container.
Create a carousel container
Access the canvas editor, select all widgets that need to be included in the carousel, right-click any widget, and select Use Carousel Container to create a carousel container. After creation, all widgets in the carousel container will be displayed as a whole in the carousel.
You can create multiple carousel containers in a dashboard, but each widget can only be added to one carousel container.
If you no longer need to use the carousel container, you can right-click the carousel container and select Remove Carousel Container. After removal, the widgets in the carousel container will return to their independent state.
Configure a carousel container
Click the carousel container to configure its basic style, interaction events, and global variables in the right panel.
Style configuration
In the Style panel, you can configure the animation effect, background color, carousel duration, and other information for the carousel container. The related configuration items are described below.
NoteYou can also click the
icon to quickly locate the desired configuration item through keyword search, which supports fuzzy match. For more information, see Search for configuration items.Configuration item
Description
Screenshot
Global Configuration
Defines the position distribution, transparency, and interaction penetration of the widget in the data dashboard.
Opacity: The smaller the value, the more transparent the widget. The value range is within
0~1.Interaction Penetration: When enabled, the mouse can penetrate this widget to avoid the widget blocking the interaction between the mouse and the underlying widget when there are many widgets on the dashboard.
Carousel style configuration
Define the animation effect of the carousel:
Quick Style: Quickly switch between carousel styles, supporting various styles such as sliding, fade in/out, and flipping.
Animation Configuration: Configure the carousel style, the arrangement of widgets in the carousel container (horizontal or vertical), and the carousel duration (in ms).
Basic Style Configuration
Define the background, padding and margin, visible count, carousel count, widget spacing, carousel direction, centering effect, and shadow effect of the carousel container. The main descriptions are as follows:
Background: Support changing the background color, or uploading a local image as the background.
Padding And Margin: Set the distance between the currently displayed widget in the carousel container and the four borders (top, bottom, left, and right).
Visible Count: The number of widgets that can be visible at the same time in the carousel container.
NoteThis only takes effect when the carousel style is configured as Slide or Showcase.
Carousel Count: The number of widgets in each carousel.
NoteThis is typically used when Visible Count is greater than 1, and only takes effect when the carousel style is configured as Slide or Showcase.
Spacing: The distance between two widgets in the carousel container.
NoteThis only takes effect when the carousel style is configured as Slide or Showcase.
Autoplay And Parallax
Define the display of autoplay and parallax effects:
Delay: Set the interval between two transition animations during autoplay (can be considered as the display duration of a widget), in ms.
Pause On Hover: When enabled, autoplay will pause when the mouse hovers over the carousel container.
Parallax: Configure the transparency of widgets in the carousel container and the scaling ratio of widgets relative to the carousel container.
Others
Click the corresponding button to quickly start, pause, or cancel (remove the carousel container) the carousel container.
Advanced configuration
In the Advanced panel, you can define the interaction and data transfer relationships between the carousel container and other widgets. The related configuration items are described below.
Configuration item
Description
Screenshot
Interaction Events
Define interaction configurations with other widgets to achieve widget linkage. Click the
icon to define related interaction events and actions.
Global Variables
You can associate global parameters in the carousel container to achieve parameter transfer between widgets for widget interaction.
Click the
icon to enable the corresponding instruction and associate the required global variables for that instruction. When Carousel To A Page, a temporary variable will be thrown, which by default throws the indexfield value of the carousel container.