The widget of table bar chart — 11.11 Global Shopping Festival allows you to add one or more table bar charts to a project to display data of different products during 11.11 Global Shopping Festival.

Style

  • Basic Attributes
    • Size: Set the size of the widget by adjusting its width and height.
    • Position: Set the position of the widget by adjusting its abscissa and ordinate.
    • Others: Set the rotation angle and opacity of the widget.
  • General
    • Font Family: To set the font of the displayed text, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
    • Row Padding: To adjust the spacing between the bars, enter a value, or click + or .
    • Quantity: To change the number of displayed bars, enter a value, or click + or .
    • Height: To change the height of each bar, enter a value, or click + or .
    • Loop
      • If you select this option, text in each bar is automatically displayed in sequence.
      • If you clear this option, text in each bar is not automatically displayed in sequence.
      Note The loop function will take effect a few seconds after you select this option.
    • Flip
      • If you select this option, the flip transition effect is displayed.
      • If you clear this option, the flip transition effect is not displayed, and only data on the first page is displayed.
    • Flip Animation Duration: To change the duration of the flip transition, enter a value, or click + or . The unit is milliseconds.
    • Flip Animation Stop Time: To change the interval of the flip transition, enter a value, or click + or . The unit is milliseconds.
    • Next Frame: To change the interval of the flip transition between two bars, enter a value, or click + or .
    • Playback Interval: To change the overlap duration between two frames, enter a value, or click + or .

  • Index Numbers – Text Style: To display the index numbers, click the Eye icon.
    • Font Size: To change the font size of the index numbers, enter a value, or click + or .
    • Font Color: To change the font color of the index numbers, see Color picker.
    • Right Margin: To adjust the horizontal spacing between the index numbers and the displayed text, enter a value, or click + or .
    • Width: You can customize the width of the index number blocks as needed. The unit is pixels.
    • Border Radius: You can customize the border radius of the index number blocks as needed. The unit is pixels.
    • Background Color: To change the background color of the index number blocks, see Color picker.
    • Number Format: To set the format of the index numbers, click the drop-down arrow and select the target format. The format can be 1, No., 1, or (1).

  • Content
    • Text Style
      • Font Size: To change the font size of the displayed text, enter a value, or click + or .
      • Font Color: To change the font color of the displayed text, see Color picker.
    • Marquee: To display the marquee effect, click the Eye icon.
      • Animation Duration: To change the time for displaying the scrolling text (seen when text exceeds the bar width), enter a value, or click + or . The unit is milliseconds.


  • Bars: To display the chart style, click the Eye icon.
    • Gradient Colors: To add or delete a color, click + or click the Trash icon. The colors of a bar change from left to right.
      • Position: To change the scale of a color in a bar, enter a value or drag the slider.
      • Color: To change a color in a bar, see Color picker.
    • Border Radius: You can customize the border radius of a bar as needed. The unit is pixels.
    • Gradient Coverage: To adjust the gradient range, click the drop-down arrow and select the target range.
      • Bar only
      • Full width


  • Light Sweep: To display the light sweep option, click the Eye icon.
    • Animation Duration: To change the light sweep duration, enter a value, or click + or . The unit is milliseconds.
    • Light Sweep Pause Time: To change the light sweep interval, enter a value, or click + or .

  • Background Color
    • Color: To change the background color of each bar, see Color picker.
      Note If the value in the data pane is smaller than the maximum value, the difference between the two values is filled with this color.
    • Border Radius: You can customize the border radius of a background bar as needed. The unit is pixels.

Data

  • value: width of a bar. The larger the weight, the greater the proportion of a bar.
  • content: text displayed in each bar.

Interaction

This widget is not connected to any events yet.