Metric percentage pie chart

Chart style

The Metric Percentage Pie Chart displays a metric's value as either a percentage of its target or its actual numeric value. It cannot display both values simultaneously. This chart is ideal for visualizing a metric's completion status and does not support multi-series data.

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.

• Font: The font family for all text in the pie chart. The default is Microsoft YaHei.

• Padding

  Parameter	Description
  Top	Distance from the pie chart to the component's top border.
  Bottom	Distance from the pie chart to the component's bottom border.
  Left	Distance from the pie chart to the component's left border.
  Right	Distance from the pie chart to the component's right border.

• Value: Sets the style for the numeric value in the chart. Click the icon to toggle its visibility.

  Parameter	Description
  Font Size	The font size of the numeric value.
  Color	The color of the numeric value.
  Font Weight	The font weight of the numeric value.
  Decimal Places	The number of decimal places to display for the value.
  Actual Value	If enabled, displays the actual data value. If disabled, displays the percentage.

• Sector: Sets the style of the sector in the pie chart.

  Parameter	Description
  Title	The title displayed below the pie chart.
  Color	The color of the title. For more information, see Color Picker Guide.
  Background Color	The color of the background ring behind the metric sector.
  Out-of-bounds Color	The color of the ring that appears when the progress exceeds the target.
  Inner Radius	The ratio of the sector's inner radius, from 0 to 1. A value that is too small may cause the sector to overlap the inner ring.

• Inner Ring: Sets the style for the inner ring, which is typically a full circular ring.

  Parameter	Description
  Color	The color of the inner ring.
  Inner Radius	The ratio of the inner ring's inner radius, from 0 to 1.
  Outer Radius	The ratio of the inner ring's outer radius, from 0 to 1.

• Polar Axis: The style of the polar coordinate axis.

  Grid Lines: The style of the polar axis grid lines. Click the icon to toggle their visibility.

  Color: The color of the polar axis grid lines.

• Angle Axis

  Angle Offset: The offset of the metric sector's starting angle. The default is auto, which is an offset of 0 degrees.

• Legend: Sets the style of the chart legend. Click the icon to toggle its visibility.

  • Text: The style of the legend text.

    Parameter	Description
    Font Size	The font 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 of the legend items.

      Parameter	Description
      Horizontal Spacing	The horizontal distance between adjacent legend items. This setting only applies when there are multiple series.
      Vertical Spacing	The distance between the legend and the top and bottom borders of the component.

    • Position: The position of the legend relative to the component. Options include Top Center, Top Left, Top Right, Bottom Center, Bottom Left, and Bottom Right.

• Animation: The animation effects for the pie chart. Click the icon to enable or disable animation effects.

  Parameter	Description
  Initial Animation Duration	The duration of the animation when the component is first rendered, in milliseconds (ms).
  Easing	The easing effect for the animation. Choose from various built-in easing effects.
  Update Animation Duration	The duration of the animation when the component's data is updated, in milliseconds (ms).
  Update from Previous Position	If enabled, the animation for a data update starts from the previous data position. If disabled, the animation starts from zero.

Data panel

Fields

Interaction panel

This component has no interaction events.

Blueprint Editor interactions

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 page, click the Metric Percentage Pie Chart component in the imported nodes pane to display its configuration parameters on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When Metric Percentage Pie Chart API Request Is Completed	Triggered after a data request completes successfully and the response is processed by the data filter. The event payload is the processed data in JSON format. For a data sample, see the data response area on the data panel in the Canvas Editor.
     When Metric Percentage Pie Chart API Request Fails	Triggered if the data request fails due to issues such as network problems or API errors. The event payload contains the error information. For a data sample, see the data response area on the data panel in the Canvas Editor.

   • Actions

     Action	Description
     Request Metric Percentage Pie Chart API	Requests data from the server again. The data output by upstream data processing nodes or layer nodes is used as parameters. For example, if a Metric Percentage Pie Chart is configured with the API data source http://api.test and the data passed to the Request Metric Percentage Pie Chart API action is { id: '1'}, then the final request URL is http://api.test?id=1.
     Import Metric Percentage Pie Chart Data	Imports and redraws the component with the provided data, without making a new server request. The data must match the component's required format. For a data sample, see the data response area on the data panel in the Canvas Editor.
     Clear component	Clears all data from the component. This action does not require any parameters.
     Update component configuration	Dynamically updates the component's style configuration. To do this, copy the component's configuration data by clicking Copy Configuration to Clipboard in the component's configuration panel. Then, use a data processing node in the Blueprint Editor to modify the desired style fields.
     Show	Shows the component. See the following sample configuration. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. See the following sample configuration. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle	Toggles the visibility of the component. See the following sample configuration. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. See the following sample configuration. return{ // The movement type. Can be 'to' for absolute positioning or 'by' for relative positioning. Default: 'to'. "positionType": "to", // The target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Options: 'linear', 'easeInOutQuad', 'easeInOutExpo'. "animationEasing": "linear" } }