This topic describes the configuration items of the Arc Bar Chart widget and how to use this widget. This widget can be used to display differences between data on a project.

Settings

  • Basic Attributes
    • Size: The width and height of the widget. The unit is pixels.
    • Position: The position of the widget. You can set the widget position by adjusting its x-axis and y-axis. The unit is pixels.
    • Others: The rotation angle and opacity of the widget.
  • Chart: The style of the arcs in the chart.
    • Inner Radius: The distance between the center point and the inner arc. The value ranges from 0 to 1.
    • Outer Radius: The distance between the center point and the outer arc. The value ranges from 0 to 1.
    • Arc Number: The number of arcs in the chart.
      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: The spacing between the arcs. The unit is pixels.
    • Max Angle: The maximum length of the outer arc. If the value is 360, the outer arc becomes a circle.
    • Text Padding: The horizontal spacing between the text and the starting points of the arcs. The unit is pixels.
  • Gradient Options: The color style of the arcs in the chart.
    • Start Color: The start color of the arcs. For information about how to set the color, see Color picker.
    • End Color: The end color of the outer arc.
  • Text Style: The style of text in the chart.
    • Font Family: The font of the displayed text. The default font is Microsoft YaHei.
    • Font Size: The font size of the displayed text.
    • Font Color: The font color of the displayed text.
    • Font Weight: The font weight of the displayed text.
  • Animation: The animation of the arcs. To display the animation option, click the Eye icon.
    • Original Duration: The period of time needed for the first time the widget renders the animation. The unit is milliseconds.
    • Easing: The animation easing. You can select an easing effect as needed.
    • Animations of All Series In Sequence: If you select this check box, the animations of all arcs in the chart are displayed in a sequence. If you clear this check box, the animations of all arcs in the chart are displayed at the same time.
    • Duration for Data Update: The period of time needed for the widget to render the animation after data is updated. The unit is milliseconds.
    • Update from Latest Status: If you select this check box, the animation begins from the arc where the data is updated. If you clear this check box, the animation begins from the starting point.

Data

The JSON example in the preceding figure is as follows:
[
  {
    "text": "label_1",
    "value": 1
  },
  {
    "text": "label_2",
    "value": 0.3
  },
  {
    "text": "label_3",
    "value": 0.5
  },
  {
    "text": "label_4",
    "value": 0.452
  },
  {
    "text": "label_5",
    "value": 0.2
  }
]
  • text: The text corresponding to an arc.
  • value: The decimal number that corresponds to a percentage value. The maximum value is 1. You can change the percentage by setting the Max Angle under the Chart configuration item on the Settings plane.

Interaction

This widget is not connected to any events yet.