All Products
Search
Document Center

DataV:Customized Background

Last Updated:May 12, 2023

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. image..png

Settings Panel

image..png
  • 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 Proportional resizing 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 Rotation control icon icon.
    • Click the Horizontal flip icon to horizontally flip a widget.
    • Click the Vertical flip 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 image..pngor image..pngicon on the right to add or remove a style. Click the image..pngor image..pngicon to configure the arrangement of multiple styles. Click the image..pngicon 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 image..pngicon 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:

    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 image..pngicon to control whether to open the current hyperlink in a new window.

Note

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

  1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. 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. image..png

    • 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"
        }
      };