Single-value percentage pie chart

Chart style

Unlike a standard pie chart, it shows the proportion of a single category relative to a total. It does not support multiple data series.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Pie chart properties: Configures the basic styles for the pie chart.

  Parameter	Description
  Inner radius	The inner radius of the pie chart, expressed as a percentage of the component's height. The value must be between 0 and 1.
  Outer radius	The outer radius of the pie chart, expressed as a percentage of the component's height. The value must be between 0 and 1.
  Pie chart fill background	The background color of the chart area not covered by the colored sector. To modify the color, see Color Picker Guide.

• Sector configuration

  Parameter	Description
  Start color	The color at the sector's starting point (the top of the pie chart).
  End color	The fill is a gradient that transitions from the start color to the end color.
  Animation duration	The duration of the animation as the sector grows from the start point to the end point.

• Center percentage section: Configures the style of the percentage display in the chart's center.

  Parameter	Description
  Text style	The style of the text in the center, including font family, color, and weight.
  Bounding box ratio	The width of the center section, expressed as a ratio of the chart's outer radius. The value must be between 0 and 1. A small value may cause the number and symbol to wrap, while a very small value may cause them to overlap.
  Number font size	The font size of the numeric value.
  Decimal places	The number of decimal places to display for the numeric value.
  Percentage symbol	The unit symbol for the percentage value.
  Percentage font size	The font size of the percentage symbol.
  Percentage position	The position of the percentage symbol. You can select Prefix or Suffix.
  Percentage offset	The distance between the percentage symbol and the number.

Data panel

Value: The percentage of the pie chart occupied by the sector, as a decimal value where 1 represents 100%.

Interaction panel

This component has no configurable events in the Interaction panel. For advanced event handling, use the Blueprint Editor.

Blueprint Editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the single-value percentage pie chart component in the Import Nodes pane. The configuration parameters for the component appear on the canvas, as shown in the figure below.

   • Events

     Event	Description
     When the request for the single-value percentage pie chart API succeeds	An event is triggered after a data API request is returned and processed by a filter, providing the processed data in JSON format. For a data example, see the Data Response area on the Data tab of the component's configuration panel in the Canvas Editor.
     When the request for the single-value percentage pie chart API fails	This event is thrown when a data API request fails, for example, due to network issues or API errors. The event is triggered after the response is processed by a filter and includes the processed data in JSON format. For a data example, see the Data Response area on the Data tab of the configuration panel on the right side of the Canvas Editor.

   • Actions

     Action	Description
     Request data for single-value percentage pie chart	Re-requests data from the server, using the data output by upstream data processing nodes or layer nodes as parameters. For example, if a single-value percentage pie chart is configured with an API data source of https://api.test, and the data passed to the Request Single-Value Percentage Pie Chart Interface action is { id: '1'}, then the final request URL is https://api.test?id=1.
     Import data for single-value percentage pie chart	The data is processed in the format required by the component, and then the component is imported and redrawn. You do not need to request data from the server again. For a data example, see the Data Response area on the Data tab of the component's configuration panel in the Canvas Editor.
     Update component configuration	Dynamically updates the style configuration of the component. First, obtain the component configuration data by clicking Copy configuration to clipboard in the component's Configuration panel. Then, change the field values for the corresponding styles in the data processing node on the configuration page of the Blueprint Editor as needed.
     Show	Shows the component. Example: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. Example: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the component between shown and hidden. Example: return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. Example: return{ // Movement method. Absolute positioning: to. Relative positioning: by. Default value: to. "positionType": "to", // Target position. x-coordinate and y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation easing. Valid values: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }