DataV:customized-background

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.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. 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 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.

  • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

    • 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.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 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: 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. 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: Set the border style of the customized background. You can click the icon on the left to control the display 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 different border types, 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:

  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: 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.

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	Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.