Carousel pie chart

Chart style

A carousel pie chart is a type of pie chart. Unlike other pie charts, it cycles through categories, displaying the proportion or value of each. You can customize the chart to display either percentages or actual values, making it an effective tool for visualizing data proportions or changes.

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: The basic style properties of the pie chart.

  Parameter	Description
  inner radius	The ratio of the inner radius to the component's height, from 0 to 1.
  outer radius	The ratio of the outer radius to the component's height, from 0 to 1.
  Animation duration	The time it takes for a category's slice to pop out from the pie chart. Unit: ms.
  Carousel interval	The interval (in ms) from the end of one slice's animation to the start of the next. This duration includes the slice's retraction time.
  Default color	The default color of the pie chart slices. For more information, see Color Picker Description.

• Center display: The style of the text in the center of the pie chart.

  Parameter	Description
  Text style	The style of the text in the chart's center, including font family, color, and weight.
  word wrap	When enabled, text that exceeds the width of the center area automatically wraps to the next line. Otherwise, the text overflows.
  Show actual value	When enabled, the chart displays the actual data values. When disabled, it displays the calculated percentage for each data point. Note This option is disabled by default.
  Percentage sign	The unit symbol for the percentage value.
  Percentage sign font size	The font size of the percentage sign.
  Percentage sign position	The position of the percentage symbol. The options are Prefix and Suffix.
  Percentage sign offset	The distance between the percentage sign and the number. Note The configurations for the four percentage signs above are effective only when Show Actual Values is turned off.
  decimal places	The number of decimal places to display for values. This applies to both percentages and actual values. The value can range from 0 to 10.
  Outer frame ratio	The width of the central text area, expressed as a ratio (0 to 1) of the chart's outer radius. A small value may cause the number and symbol to display on two lines, and a very small value may cause them to overlap.
  Number ratio	The height of the central text area, expressed as a ratio (0 to 1) of the chart's outer radius. Figure 1. Number proportion: 0.5, Outer frame proportion: 1 Figure 2. The number and the outer frame each have a ratio of 0.5 Figure 3. Number proportion: 0, Outer frame proportion: 0.5
  Number font size	The font size of the numeric value.
  Description font size	The font size for the category name, which appears below the numeric value.

• Legend: The style of the chart's legend. Click the icon to toggle the legend's 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: The layout style of the legend.

    • Spacing: The spacing style of the legend.

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

    • Position: The position of the legend relative to the origin of the component. The available options are Top Center, Top Left, Top Right, Bottom Center, Bottom Left, and Bottom Right.

• Custom categories: Click the or icon to add or delete a custom category. Click the or icon to reorder the categories. Click the icon to duplicate the selected category and its configuration.

  Tag

  Background color: The color of the slice for this category in the pie chart.

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 configuration page, click the Carousel Pie Chart component in the import node bar. On the canvas, you can see the Blueprint Editor configuration parameters for the carousel pie chart, as shown in the following figure.

   • Events

     Event	Description
     When data request succeeds	This event is emitted after a data interface request returns and is processed by a filter, and it provides 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 data request fails	When a data API request fails (for example, due to network issues or API errors), an event that includes the processed data in JSON format is triggered after the response is processed by a filter. For a specific data example, see the Data tab of the Configuration panel on the right side of the component in the Canvas Editor, in the Data Response area.

   • Actions

     Actions	Description
     Request data	Re-requests server-side data, using the data output by upstream data processing nodes or layer nodes as parameters. For example, if a carousel pie chart has its API data source set to https://api.test, and the data passed to the Request Carousel Pie Chart API action is { id: '1'}, the final request URL is https://api.test?id=1.
     Import data	After the data is processed in the format required by the component, import the component and redraw it. 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	To dynamically update the style configuration of a component, first click Copy configuration to clipboard in the component's Configuration panel to obtain the component configuration data. Then, change the field values for the corresponding styles in the data processing node on the configuration page of the Blueprint Editor.
     Show	Shows the component. See the following data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. See the following data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the visibility of the component. See the following data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. See the following data example. return{ // Movement type. Absolute positioning: "to"; Relative positioning: "by". Default: "to". "positionType": "to", // The target x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration in milliseconds. "animationDuration": 1000, // Easing function. Options: "linear", "easeInOutQuad", "easeInOutExpo". "animationEasing": "linear" } }