The carousel pie chart widget allows you to customize the pie chart style, animation, the percentage of displayed content, and other options as needed.

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 Properties
    • Inner Radius: To change the length of the inner radius, enter a value or drag the slider. The value range of the inner radius is from 0 to 1.
    • Outer Radius: To change the length of the outer radius, enter a value or drag the slider. The value range of the outer radius is from 0 to 1.

    • Animation Duration: To change the time for which a segment moves outward, enter a value, or click + or .
    • Carousel Interval: To change the interval of moving outward between two segments, enter a value, or click + or .
    • Default Color: To change the default color of the pie chart, see Color picker.

  • Percentage Display Options
    • Text Style
      • Font Family: To set the font of the percentage value and the type description, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
      • Font Color: To change the font color of the percentage value and the type description, see Color picker.
      • Font Weight: To set the font weight of the percentage value and the type description, click the drop-down arrow and select the target font weight.
      • Wrap Automatically: If you select this option, the percentage value and the type description are wrapped automatically. If you do not select this option, the percentage value and the type description are not wrapped automatically.

      • True Value: If you select this option, the real data value is displayed. If you do not select this option, the percentage value is displayed by default.

      • Percent Sign: You can set the percent sign that follows the numerical value when the real data value is displayed as the percentage value.
      • Percent Sign Font Size: To set the font size of the percent sign, enter a value, or click + or .
      • Percent Position: To set the position of the percent sign, click the drop-down arrow and select the target position.
        • Front
        • End
      • Percent Offset: To adjust the spacing between the percent sign and the numerical value, enter a value, or click + or .
        Note The settings of the preceding four options are valid only when True Value is not selected.


      • Number of Decimal Places: To change the number of digits to the right of the decimal point, enter a value or drag the slider. This is applicable to both the percentage value and the real data value. The value range is from 0 to 10.

      • Border Width: To change the border width, enter a value or drag the slider. The value range is from 0 to 1. If the value is too small, the numerical value and the percent sign will overlap or will be displayed in two rows.
      • Vertical Alignment: To set the height of the displayed content and the distance between the percentage value and the type description, enter a value or drag the slider. The value range is from 0 to 1.



      • Number Font Size: To set the font size of the numerical value, enter a value, or click + or .
      • Description Font Size: To set the font size of the type description under the percentage value, enter a value, or click + or .

  • Legend: To display the legend items, click the Eye icon.
    • Text Style
      • Font Size: To set the font size of the legend text, enter a value, or click + or .
      • Font Color: To change the color of the legend text, see Color picker.
      • Font Weight: To set the font weight of the legend text, click the drop-down arrow and select the target font weight.

      • Horizontal Interval: To set the horizontal distance between the legend items, enter a value, or click + or .
      • Vertical Interval: To set the vertical distance between the legend items, enter a value, or click + or .
      • Position: To set the position of the legend items, click the drop-down arrow and select the target position.
        • Top center
        • Top left
        • Top right
        • Bottom center
        • Bottom left
        • Bottom right


  • Series: To add or delete a series, click + or click the Trash icon.
    Series
    • Background Color: To set the color of a legend block, see Color picker.

Data

  • type: type name, which corresponds to a legend item
  • value: type value, which corresponds to a real data value

Interaction

This widget is not connected to any events yet.