Image

Styles

This part describes style parameters of an image.

• Size/Position
  • W: width of the target, in pixels.
  • H: height of the target, in pixels.
  • X: position of the target on the canvas, in pixels.
  • Y: position of the target on the canvas, in pixels.
  • Opacity: Adjust the transparency of the target on the canvas using a slider or by manually entering a percentage. A higher percentage means lower transparency.
  Figure 1 Size/Position
  
• Global Style
  • Image: You can load an image to the screen in any of the following ways:
    1. Enter the address of the image in the url text box.
    2. Click the dotted-line box below Image to select an image.
    3. Drag an image to the dotted-line box below Image.

    After selecting an image, you can edit or delete it.

    

    Use this feature with caution as it may result in the leakage of your background image data.

  • Scale Mode: Select a zoom mode of the image from the drop-down list. The value can be Retain original image size, Proportional scaling, Cropping and Scaling, or Stretch scaling.
  • Image Position: Select a position of the image from the drop-down list. The value can be Align Center, Align Left, Align Right, Top alignment, or Bottom alignment.
  Figure 2 Global Style
  

Interactions

This section describes the parameters of media interactions. Only images support interaction settings.

1. Click Interactions.
2. Expand Interaction Definition and click Edit interaction event.
   Figure 3 Edit interaction
   
3. Set Event to Click.
4. Click Add Action to add an action. Actions can be changed between hidden and visible states, with different action values displayed depending on the selected widget.
5. Click OK to complete the setting of the interaction event.
   

   • Data filtering operators are categorized by string, number, and date types.
     • String operators support exact matches, inequalities, inclusions, exclusions, prefixes, suffixes, and checks for emptiness.
     • Number operators allow for equality, inequality, range comparisons, and checks for emptiness.
     • Date operators support equality and range comparisons.
   • Interactions support the use of SQL placeholders to bind datasets dynamically.
     • To enable global parameter effects, edit the SQL statements within the associated dataset and add dynamic parameters.
     • Go to the component editing page and click Interactions to set related parameters.

Chart Display

Figure 4 Image effect display