carousel-pie-chart

Chart style

A carousel pie chart displays the percentage or value of each category in a rotating sequence. You can show either percentage values or actual values to highlight data proportions or changes on a dashboard.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for configuration items 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 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.

  • Rotate: Rotate the widget by degrees.

    • Directly 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, and a value of 1 fully displays it. Default value: 1.

• Pie Chart Attributes: the basic attributes of a pie chart.

  Parameter	Description
  Inner radius	The inner radius of the pie chart. The value is a percentage of the widget height. Valid values: 0 to 1.
  Outer radius	The outer radius of the pie chart. The value is a percentage of the widget height. Valid values: 0 to 1.
  Animation Duration	The amount of time, in ms, that it takes for the sectors of each category to protrude outward from the pie chart.
  Carousel Interval	The amount of time, in ms, for the pie chart of one category to finish, to retract, and to start the fan-out animation of the next category.
  Default Color	The default color of the pie chart. For more information, see color picker description.

• Middle Percentage Portion: the style of the middle percentage portion of the pie chart.

  Parameter	Description
  Text Style	The font, color, and weight of the middle percentage text.
  Enable	Turn on the switch to automatically wrap text in the middle percentage area when it exceeds the available width. If disabled, the text overflows.
  Show real values	Turn on the switch to display actual data values instead of system-calculated percentage values. Note By default, percentage values are displayed.
  Percent sign	The unit symbol for the percentage value.
  Percent Font Size	The font size of the percentage unit text.
  Percent Position	The position of the percent sign. Valid values: Prepended and Postpended.
  Percent Offset Value	The distance between the percent sign and the percentage value. Note The preceding four percent sign settings apply only when Show True Values is disabled.
  Number of decimal places	The number of decimal places for both percentage and actual values. Valid values: 0 to 10.
  Frame Proportion	The width of the middle percentage area as a proportion of the outer radius. Valid values: 0 to 1. A small value causes numbers and symbols to wrap to two lines or overlap.
  Digit Proportion	The height of the middle percentage area as a proportion of the outer radius. Valid values: 0 to 1.
  Digital Font Size	The size of the numeric text.
  Description Font Size	The size of the category name text under the number.

• Legend: The legend style of the chart. You can 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: the layout style of the legend.

    • Spacing: the spacing style of the legend.

      Parameter	Description
      Left and Right Spacing	The horizontal distance between adjacent legends. This setting applies only when there are multiple series.
      Upper and lower interval	The vertical distance between the legend and the widget boundaries.

    • Position: The position of the legend relative to the widget. Valid values: Top Center, Top Left, Top Right, Bottom Center, Bottom Left, and Bottom Right.

• Custom Category: Click the or icon to add or remove a custom category. Click the or icon to configure the arrangement style of multiple categories. Click the icon to copy the configuration of the selected category and add a custom category with the same configuration.

  Labels

  Background Color: the color of the sector in the pie chart.

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 carousel pie chart interface request is completed	Triggered after a data interface request is responded to and processed by a filter, returning the processed JSON data. For details, see the Data Response Result section of the Data Source tab in the canvas editor configuration panel.

   • Action

     Action	Description
     Import a carousel pie chart	Imports processed data to redraw the widget without re-requesting server data. For details, see the Data Response Result section of the Data Source tab in the canvas editor configuration panel.
     Request carousel pie chart operation	Requests server data again, using data from an upstream processing node or layer node as a parameter. For example, if the API data source is https://api.test and the data passed to the request carousel operation is { id: '1'}, the final request is https://api.test?id=1.
     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" } }
     Switch Display /Hide	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 for the data processing node in Blueprint Editor.