The pie chart with indicator widget allows you to customize the pie chart style, the goal fulfillment, 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.
- Text Area
- Font Family: To set the font of the top and bottom label text, 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 top and bottom label text, see Color picker.
- Goal Text: You can customize the text of the bottom label.
- Current Progress Text: You can customize the text of the top label.
- Font Size: To change the font size of the top and bottom label text, enter a value or drag the slider. The value range is from 12 to 100.
- Font Weight: To set the font weight of the top and bottom label text, click the drop-down arrow and select the target font weight.
- Chart
- Progress Color
- Solid fill
- Gradient fill: You can select two colors as the gradient colors. To change the gradient angle, enter a value or drag the slider. The value range is from 0 to 360.
- Progress Background Color: To change the color of the target circle, see Color picker.
Note The target circle is under the progress circle.
- Excess Color: To change the color of the cross-boundary circle, see Color picker.
Note A cross-boundary circle appears when the actual value exceeds the target value.
- Inner Color: To change the color of the inner circle, see Color picker.
- Inner Line Color: To change the color of the inner line, see Color picker.
- Inner Label Color: To change the color of the percentage value in the inner circle, see Color picker.
- Font Size: To change the font size of the percentage value in the inner circle, enter a value or drag the slider. The value range is from 12 to 100.
- Border Size: To set the weight of the inner and outer borders, enter a value, or click + or –.
- Margin
- Top: To set the distance between the pie chart and the top label, enter a value, or click + or –.
- Bottom: To set the distance between the pie chart and the bottom label, enter a value, or click + or –.
- Progress Color
- 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.
- 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 segment where the data has changed. If you clear this option, the animation begins from the starting point.
Data
- aims: target value
- actual: progress value (actual data value)
Interaction
This widget is not connected to any events yet.