This topic describes the chart style of a button widget and the meaning of each configuration items.
Chart Style
A customized background is a type of media component that supports customized background colors, borders, and filter effects. It supports adding a custom background block to a visualization application or a module of a visualization application, which can make the visualization application display more beautiful.
Settings Panel
- Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for asset configurations.
- 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.
Fillet: specifies the fillet style of the widget. When a gradient border or an image border is applied, the fillet becomes invalid.
Fillet Control: Set the fillet control mode, including Overall and Custom.
Angle: the angle of the fillet. If you select Whole, you can set the angles of the four corners at the same time. If you select Custom, you can set the sizes of the rounded corners of the widget, including the upper-left corner, lower-left corner, upper-right corner, and lower-right corner.
Fill: Set the fill style of the customized background. Click the or icon on the right to add or remove a style. Click the or icon to configure the arrangement of multiple styles. Click the icon to copy the selected style configuration and add a style with the same configuration.
Border: Set the border style of the customized background. You can click the icon on the left to control the display or hiding of the border style.
Border Type: Set the border type. The border type can be Solid Color, Gradient, or Image.
Border Configuration: If you select a border type, the configuration items will change. If you set Border Type to Image, different border configurations are displayed based on the configuration method.
filter: the blurring degree of the widget border. Unit: pixels.
Background Filter: the degree to which the background of the widget is blurred. Unit: pixels. This option takes effect only after Experimental Web Platform features is enabled in the Chrome browser.
Perform the following steps to open the Experimental Web Platform features of the Chrome browser:
Enter the chrome://flags/#enable-experimental-web-platform-features in your Chrome browser.
Click the drop-down list to the right of the first Experimental Web Platform features and select Enabled.
Restart your browser.
Hyperlink Configuration: You can click an image to go to the specified hyperlink.
Hyperlink: the hyperlink.
Open Window: Click the icon to control whether to open the current hyperlink in a new window.
You can also adjust the width of the component and stretch it to use as a line.
Data Panel
This component does not support data configuration.
Interaction Panel
This widget does not support interaction events.
Configure interactions in Blueprint Editor
- In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
- Click the icon in the upper-left corner of the page.
In Blueprint Editor, click customized background in the Added Nodes pane. You can view the customized background parameters in the canvas, as shown in the following figure.
Event: The earth layer does not support events.
Policy Action
Policy Action
Description
Update component configurations
Style configurations of widgets are dynamically updated. Before this action is executed, you must click the widget in Canvas Editor, click the Settings tab in the right-side panel, and click Copy Configurations to... to obtain widget configurations. After that, change the style field for the data processing node in Blueprint Editor.
Display
Displays the widget. The following example shows the reference data.
return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
Hide
The following example shows how to hide a widget.
return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
Switch to the hidden state
Specifies whether to show or hide a widget. The following example shows the reference data.
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
Move
Move a widget to a specified location. The following example shows the reference data.
return { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } };