You can add one or more arc bar charts to a project to view differences between the data more clearly.

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.
  • Chart
    • Inner Radius: To change the distance between the center point and the inner arc, enter a value or drag the slider. The value range is from 0 to 1.
    • Outer Radius: To change the distance between the center point and the outer arc, enter a value or drag the slider. The value range is from 0 to 1.
    • Arc Number: To change the number of arcs in the chart, enter a value, or click + or .
      Note If the number of arcs is greater than that of the data types, the excessive arc or arcs will be displayed transparently.
    • Radius Padding: To adjust the spacing between the arcs, enter a value, or click + or .
    • Max Angle: To change the maximum length of the outer arc, enter a value or drag the slider. If the value is 360, the outer arc becomes a circle.
    • Text Padding: To adjust the horizontal spacing between the text and the starting points of the arcs, enter a value, or click + or .

  • Gradient Options
    • Start Color: To change the start color of the arcs, see Color picker.
    • End Color: To change the end color of the outer arc, see Color picker.

  • Text Style
    • Font Family: To change the font of the displayed text, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
    • 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.
    • Font Weight: To change the font weight of the displayed text, click the drop-down arrow and select the target font weight.

  • Animation: To display the animation option, click the Eye icon.
    • Original Duration: To change the duration to which the widget renders the animation for the first time, enter a value, or click + or . The unit is milliseconds.
    • Easing: To set animation easing, click the drop-down arrow and select the target effect.
    • Animations of All Series in Sequence: If you select this option, the animations of all arcs in the chart are displayed in sequence. If you clear this option, the animations of all arcs in the chart are displayed at the same time.
    • Duration for Data Update: To change the animation duration when data changes, enter a value, or click + or . The unit is milliseconds.
    • Update from Latest Status: If you select this option, the animation begins from the arc where the data has changed. If you clear this option, the animation begins from the starting point.


Data

  • text: text corresponding to an arc.
  • value: a decimal number that corresponds to a percentage value. The maximum value is 1.

Interaction

This widget is not connected to any events yet.