This topic provides a general description of the components configuration items in the DataV Assets panel to help you quickly understand the common and non-common configuration items of each component. For more information, see the corresponding documentation.
In a DataV visual application, click a widget on the canvas. The configuration items panel appears on the right side of the canvas. The following three tabs are available: Configuration, Data, and Interaction.
In the Configuration panel, you can configure the Chart Size, Chart Position, Rotation Angle, Opacity, and other properties of the widget. The Chart Size, Chart Position, Rotation Angle, and Opacity fields apply to all widgets. For more information about how to configure these fields, see Basic Properties. Other properties vary based on the widgets.
NoteIf color-related configuration items are involved in the configuration of widget styles, see the color picker description below for configuration.
In the Data panel, you can copy widget data, edit widget data in full screen, and configure data sources for widgets. Copy data and Edit data in full screen apply to all widgets. For more information, see Copy data and Edit data in full screen. For more information about how to configure data sources, see the documentation of each widget.
In the Interaction panel, you can configure interaction events between widgets. For more information, see the documentation of each widget in this topic.
Basic Properties
In the Basic Attributes section, you can adjust the size, position, rotation angle, and opacity of the widget.
- Size: indicates the size of a widget, including its pixel width and height. You can click the 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.
- Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
- Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
- Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
- Drag the black dot in the icon.
- Click the icon to horizontally flip a widget.
- Click the icon to vertically flip a widget.
- Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.
Color selector description
You can use the color selector to configure attributes such as a widget's font color, axis color, grid line color, and border color. This document will show you two ways to change text color.
Click the Common Color Block icon and select a color.
The common color block function can help you quickly select the common colors in the system, which is simple and convenient, and can efficiently modify the colors of corresponding components.
Click the Color Picker icon to adjust the color transparency of the text, add or remove global colors, or select the most recently used color.
Adjust font color transparency: Drag the Transparency slider, or modify the A value to adjust the color transparency.
Add or remove a global color: Select a color from the drop-down list and click the + icon below Global Color to add the current color as a global color. Move the pointer over the added global color and drag it outside the Global Color section to delete the global color.
NoteColors selected through the <g id="1">Global Colors</g> parameter are applied throughout the entire project, and saved in the <g id="2">Recently Used</g> bar of every screen and widget for you convenience.
Select Recently Used Color: The system automatically records your recently used color and displays it in the Recently Used section. If you want to use the same color, click the color block to apply it to the widget.
Copy data
In the data source editing box, click the icon in the lower-right corner to copy all data in the current data editing box.
Edit data in full screen
In the data source editing box, click the icon in the lower-right corner to display the data in the current data box in full screen and edit the current data in full screen mode.