Carousel Chart

Pattern

Figure 1 Carousel chart

• Size/Position
  • Size: width and height of the component. Unit: pixel.
  • Position: position where the component is located in the canvas. Unit: pixel.
• Global Style

  In Global Style, you can set the font and font size of an image title.

• Animation
  • Pause: image pause duration.
  • Speed: image switch speed.
  • Special Effect: image switch effect. The value can be Horizontal scrolling or Vertical scrolling.
• Image

  You can set Display Mode of an image to Default, Proportion, Crop, or Stretch.

• Description
  • Background Color: background color of the image title.
  • Font Color: font color of the image title.
  • Font Width: font width of the image title.
  • Length (%): length of the image title.
  • Width (%): width of the image title.
  • Top Margin (px): spacing between the image title and the upper edge of the image.
  • Left Margin (px): spacing between the image title and the left edge of the image.
  • Alignment: alignment mode of the image title. The value can be Align center, Align left, or Align right.
• Dot
  • Dot Color: color of the dot in the lower part of the image that will be displayed.
  • Current Color: color of the dot in the lower part of the image that is currently displayed.

Data

The example data in the preceding figure is as follows:

[
  {
"description": "Description of the first image",
    "url": "images/carousel/img1.png"
  },
  {
"description": "Description of the second image",
    "url": "images/carousel/img2.png"
  },
  {
"description": "Description of the third image",
    "url": ""
  }
]

• description: description of an image.
• url: image URL address. Image addresses in the OBS bucket are supported. The public read policy must be set for images in the OBS bucket.
• Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
• Converter: Select a converter to convert data into the data that meets the display requirements. For details, see Using a Converter.
• Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
• Preview Result: Click Preview Result to view the information about the selected data source. You can click Update Query to manually update the component data when the data source changes.

Interaction

For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.