DataV:The Table Bar Chart - 11.11 Global Shopping Festival widget(Component offline)

• General settings
  • Font Family: The font of the displayed text. The default font is Microsoft YaHei.
  • Row Padding: The spacing between the bars. The unit is pixels.
  • Quantity: The number of displayed bars. You can also set the number of displayed bars on the Data plane. If the number you set on the Data plane is larger than or equal to the value of Quantity, the value of Quantity takes precedence. Otherwise, if the number set on the Data plane is smaller, then that value takes effect.
  • Height: The height of each bar. The unit is pixels.
  • Loop: Determines whether text in each bar is automatically displayed in a sequence.
    Note The loop function will take effect a few seconds after you select the Loop check box.
  • Flip: Determines whether the flip transition animation is displayed. The configuration takes effect only after you select the Loop check box.
  • Flip Animation Duration: The duration of the flip transition animation. The unit is milliseconds. The configuration takes effect only after you select the Loop and Flip check boxes.
  • Flip Animation Stop Time: The interval of the flip transition animation. The unit is milliseconds. The configuration takes effect only after you select the Loop and Flip check boxes.
  • Next Frame: The interval of the flip transition animation between two bars. The value of Next Frame is usually a decimal number.
  • Playback Interval: The overlap duration between two frames. The value of Playback Interval is usually a decimal number.
• Index Numbers: The index number of each bar. To display the index numbers, click the Eye icon.
  • Text Style: The text style of the index numbers.
    • Font Size: The font size of the index numbers.
    • Font Color: The font color of the index numbers. For information about how to set the font color, see Color picker.
    • Right Margin: The horizontal spacing between the index numbers and the displayed text. The unit is pixels.
    • Width: The width of the index number blocks. The unit is pixels.
    • Border Radius: The border radius of the index number blocks. The unit is pixels.
    • Background Color: The background color of the index number blocks. For information about how to set the background color, see Color picker.
    • Number Format: The format of the index numbers. The available formats are 1, No., and (1).
• Content: The displayed text in each bar.
  • Text Style
    • Font Size: The font size of the displayed text.
    • Font Color: The font color of the displayed text.
  • Marquee: Determines whether to display text that exceeds the bar width. To display the marquee effect, click the Eye icon.
    • Animation Duration: The period of time that the scrolling text (seen when text exceeds the bar width) is displayed. The unit is milliseconds.
• Bars: The style of each bar.
  • Gradient Colors: The gradient colors of each bar. To add a color, click +, and to delete a color, click the Trash icon. The colors of a bar change from left to right.
    • Position: The scale of a color in a bar. The value ranges from 0 to 1.
    • Color: One of the gradient colors in a bar.
  • Border Radius: The border radius of a bar. The unit is pixels.
  • Gradient Coverage: The gradient range of the colors of a bar. The available options are Bar Only and Full Width.
• Light Sweep: The light sweep animation.
  • Animation Duration: The light sweep duration. The unit is milliseconds.
  • Light Sweep Pause Time: The light sweep interval. The unit is milliseconds.
• Background Color: The background style of each bar.
  • Color: The background color of each bar.
    Note If the value you set in the Data plane is smaller than the maximum value of Color, the difference between the two values is filled with this color.
  • Border Radius: The border radius of a background bar. The unit is pixels.

[
  {
    "value": "314529403.31",
    "content": "This is a long string. This is a long string. This is a long string. This is a long string."
  },
  {
    "value": "293711093.03",
    "content": "This is a long string. This is a long string. This is a long string."
  },
  {
    "value": "293691138.91",
    "content": "This is a long string. This is a long string."
  },
  {
    "value": "193711093.03",
    "content": "This is a long string."
  },
  {
    "value": "193711093.03",
    "content": "This is a string."
  }
]

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