progress-donut-chart-exploded

Chart style

A progress donut chart (exploded) is a type of pie chart that displays either the percentage of a current metric relative to its target or the actual metric value. It does not support displaying both the metric value and the target value simultaneously, and does not support multi-series data configuration.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis coordinates of the widget. Unit: pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left edge of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the top edge of the canvas.

  • Rotate: the rotation angle of the widget in degrees.

    • Enter the degrees in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the value.

    • Click the icon to flip the widget horizontally.

    • Click the icon to flip the widget vertically.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget. A value of 1 makes the widget fully visible. Default value: 1.

• Font: the font family for all text in the pie chart. Default value: Microsoft Yahei.

• Margin

  Parameter	Description
  Top	The distance between the pie chart and the upper boundary of the widget.
  Bottom	The distance between the pie chart and the lower boundary of the widget.
  Left-side navigation pane	The distance between the pie chart and the left boundary of the widget.
  Right-side tabs	The distance between the pie chart and the right boundary of the widget.

• Value: the style of the displayed value in the pie chart. Click the icon to show or hide the value.

  Parameter	Description
  Font size	The size of the value.
  Color	The color of the value.
  Font weight	The thickness of the numeric text.
  Number of decimal places	The number of decimal places to display for the value.
  Real Value	Turn on the switch to display the actual data value. Turn off the switch to display the percentage value.

• Fan: the fan-shaped sector style in the pie chart.

  Parameter	Description
  title	The text title displayed below the pie chart.
  Color	The color of the title. See color picker to modify.
  Background color	The color of the background ring beneath the fan.
  out-of-bounds color	The color of the out-of-bounds ring, which appears when the progress exceeds the target.
  Inner radius	The inner radius ratio of the sector. Valid values: 0 to 1. A value that is too small may cause the inner ring to be covered.

• Inner Ring: the style of the inner ring, which typically forms a complete circle.

  Parameter	Description
  Color	The color of the inner ring.
  Inner radius	The inner radius ratio of the inner ring. Valid values: 0 to 1.
  Outer radius	The outer radius ratio of the inner ring. Valid values: 0 to 1.

• Polar Axis: the style of the polar axis.

  Network Line: the style of the polar axis network line. Click the icon to show or hide the network line.

  Color: the color of the polar axis line.

• Angle Axis

  Angle Offset: the starting offset angle of the sector. Default value: auto (offset is 0).

• Legend: the legend style of the chart. Click the icon to show or hide the legend.

  • Text: the text style of the legend.

    Parameter	Description
    Font size	The size of the legend text.
    Color	The color of the legend text.
    Font weight	The font weight of the legend text.

  • Layout

    • Spacing: the spacing style of the legend.

      Parameter	Description
      Left and Right Spacing	The horizontal distance between adjacent legends. This parameter takes effect only when multiple series exist.
      Upper and lower interval	The vertical distance between the legend and the upper and lower boundaries of the widget.

    • Position: the position of the legend relative to the start coordinates of the widget. You can select Top Center, Top Left, Top Right, Bottom Center, Bottom Left, or Bottom Right.

• Animation: the animation effect of the pie chart. Click the icon to enable or disable the animation effect.

  Parameter	Description
  Initial Animation Duration	The duration of the initial rendering animation. Unit: ms.
  Easing Effect	The easing effect of the animation. Multiple common easing effects are available.
  Update the animation duration	The animation duration when widget data is updated. Unit: ms.
  Whether to update from previous position	If turned on, the animation starts from the previous data position. If turned off, the animation starts from 0.

Data Sources panel

Advanced Panel

This widget does not support interaction events.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the progress donut chart (exploded) interface request is completed	Triggered after a data interface request is completed and processed by a filter, with the processed JSON data as output. For data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.

   • Action

     Action	Description
     Import progress donut chart (exploded) Interface	After widget data is formatted for rendering, it is imported for redrawing without re-requesting server data. For data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     Request progress donut chart (exploded) Interface	Requests server data again, using data from an upstream processing node or layer node as parameters. For example, if the API data source is configured as https://api.test and the data passed to request progress donut chart (exploded) interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Clear components	Clears the widget data. No parameters are required.
     Move	Moves the widget to a specified location. See the data example below. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Toggle Display	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Displays the widget. See the data example below. { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. See the data example below. { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data, then modify the style field in the data processing node of Blueprint Editor.