target-proportion-pie-chart

Chart style

A stacked donut chart is a type of pie chart that displays both the expected target value and the current progress, along with the percentage of current progress relative to the target. It is suitable for showing task completion status.

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 of the component. Unit: pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: Rotate the widget by 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 style.

    • Click the icon to flip the widget style.

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

• Container: the container size of the pie chart.

  Pin Margin: the distance between the lower end of the pie chart and the upper and lower edges of the container.

• Text: the style of the upper and lower labels in the pie chart. Click the icon to enable or disable text styling.

  Parameter	Description
  Font	The font family for label text. Default value: Microsoft YaHei.
  The font color. For more information, see Color setting parameters.	The color of the label text above and below the pie chart.
  Target Copy	The label text displayed below the pie chart.
  Current Progress Copy	The label text displayed above the pie chart.
  Font size	The size of the label text above and below the pie chart. Valid values: 12 to 100.
  Font weight	The thickness of the label text above and below the pie chart.

• Chart name

  Parameter	Description
  Inner radius	The inner edge radius of the donut ring.
  Outer radius	The outer edge radius of the donut ring.
  Progress Ring Color	The color of the progress ring. Solid color and gradient fills are supported. For more information, see color picker.
  Target Ring Color	The color of the target ring (the background ring beneath the progress ring). For more information, see color picker.
  Out-of-bounds ring color	The color of the out-of-bounds ring. When the progress exceeds the target, the chart displays an out-of-bounds ring. For more information, see color picker.
  Inner Ring Color	The color of the inner ring. For more information, see color picker.
  Ring Inner Slash Color	The color of the slash in the ring. For more information, see color picker.
  Ring Indicator Color	The color of the indicator text in the ring. For more information, see color picker.
  Font size	The size of the indicator text in the ring. Valid values: 12 to 100.
  Font weight	The thickness of the indicator text in the ring.
  Circle thickness	The thickness of the inner ring. Unit: px.
  Margin	The distance between the outer ring and the upper and lower labels. Top Margin: the distance between the outer ring of the pie chart and the top label. Unit: pixels. Bottom Margin: the distance between the outer ring of the pie chart and the lower label. Unit: pixels.
  Automatic Decimal Places	When enabled, the number of decimal places is determined automatically. When disabled, you can customize the number of decimal places.
  Number of decimal places	The number of decimal places for the target percentage value.

• Animation: the animation effect style of the widget. You can click the icon to enable or disable the animation effect.

  Parameter	Description
  Initial Animation Duration	The duration of the first animation rendered by the component. Unit: ms.
  Easing Effect	The easing effect of the animation. Multiple common easing effects are available.
  Update the animation duration	The animation duration when the widget data is updated. Unit: ms.
  Whether to update from previous position	When enabled, the animation starts from the previous data position when data is updated. When disabled, the animation starts from the initial position.

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 stacked donut chart interface request is completed	Triggered after a data interface request is completed and processed by a filter. The processed JSON data is passed with the event. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.

   • Action

     Action	Description
     Import stacked donut chart Interface	Imports pre-processed data in the widget's drawing format for redrawing without requesting server data again. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     Request stacked donut chart Interface	Requests server data again, using data from an upstream data processing node or layer node as a parameter. For example, if the API data source is configured as https://api.test and the data passed to request stacked donut chart interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Move	Moves the widget to a specified location. See the following data example: { // 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" } }
     Switch Display /Display	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Displays the widget. See the following data example: { "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 following data example: { "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 in Blueprint Editor.