customized-background

Chart style

A customized background is a media component that supports custom colors, borders, and filter effects. You can add a background block to a visualization application or one of its modules to enhance the visual appearance.

Style Panel

• Search Configuration: Click the icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate is the pixel distance from the upper-left corner of the widget to the left border of the canvas. Y-coordinate is the pixel distance from the upper-left corner of the widget to the upper border of the canvas.

  • Rotate: Rotates the widget around its center. Unit: degrees.

    • Enter the degrees in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the value.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget. A value of 1 fully displays the widget. Default value: 1.

• Fillet: the fillet style of the widget. Fillets become invalid when a gradient or image border is applied.

  • 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. The rounded corners include 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: the border style of the customized background. Click the icon on the left to toggle the border display.

  • Border Type: the border type. Valid values: Solid Color, Gradient, and Image.

  • Border Configuration: the available settings vary by border type. When Image is selected, the border configuration differs based on the configuration method.

• filter: the blurring degree of the widget border. Unit: pixels.

• Background Filter: the blur degree of the widget background. Unit: pixels. This option takes effect only when Experimental Web Platform features is enabled in Chrome.

  To enable Experimental Web Platform features in Chrome:

  1. Enter the chrome://flags/#enable-experimental-web-platform-features in your Chrome browser.

  2. Click the drop-down list to the right of the first Experimental Web Platform features and select Enabled.

  3. Restart your browser.

• Hyperlink Configuration: Click an image to navigate to the specified hyperlink.

  • Hyperlink: the hyperlink.

  • Open Window: Click the icon to toggle whether the hyperlink opens in a new window.

Data Sources panel

This component does not support data configuration.

Advanced Panel

There are no global variable events associated with this component.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event: The earth layer does not support events.

   • Action

     Action	Notes
     Move	Move a widget to a specified location. For more information, see the data example. { // 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" } }
     Switch Display /Display	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Display the widget. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hide the component. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates the style configurations of the widget. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data, then modify the style field for the data processing node in Blueprint Editor.