callout-comparison-pie-chart

Chart style

A callout comparison pie chart is a type of pie chart that supports switching between real values and percentage values, multi-series data configuration, and label, legend, and animation settings. It is suitable for displaying proportional data.

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 position of the widget. Unit: pixels. X-coordinate is the pixel distance from the upper-left corner of the widget to the left border of the canvas. Y-coordinate is the pixel distance from the upper-left corner of the widget to the top border of the canvas.

  • Rotate: Rotate the widget by a specified number of degrees.

    • Enter a value in the Rotation Angle spin box, or click the plus (+) 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.

• Chart name

  • Pie Chart Style

    Decoration Color: the decoration color of the outer circle and the center of the pie chart.

  • Value Label

    Parameter	Description
    Text	The font style, weight, size, and color of the numeric label text.
    Real Value	Turn on the switch to display actual data values. Turn off the switch to display percentage values.
    Number of decimal places	The number of decimal places for the displayed value. Available only when Real Value is turned off.

  • Category Label: the category label style. Click the icon to show or hide the category label.

    Text: the font style, weight, size, and color of the category label text.

  • Legend: the legend style of the chart. Click the icon to show or hide the legend.

    Parameter	Description
    Text	The font style, size, color, and weight of the legend text. For more information, see color picker instructions.
    Layout	The layout of the legends. Spacing Left and Right Spacing: The horizontal distance between adjacent legends. This parameter takes effect only when multiple series exist. Distance: the vertical distance between the legend and the widget boundaries. Position: the position of the legend relative to the start coordinates of the widget. You can select Top Left, Top Center, Top Right, Bottom Left, Bottom Center, or Bottom Right.

• Axis: the radial and angular axes of the pie chart.

  • Radial axis

    Parameter	Description
    Radius	The radius of the radial axis, as a proportion of the widget height. Valid values: 0 to 1.
    Grid Line	The grid line style of the radial axis. Click the icon to show or hide the grid line. Color: the color of the grid lines.

  • Angle Axis

    Start Angle Offset: the offset of the start angle of the pie chart. Default value: auto.

• Edition

  data series: Click the or icon to add or delete a data series. Click the or icon to reorder data series. Click the icon to duplicate a data series with the same configurations.

  Color: the color of the sector in this series.

• Remarks

  Emotion Animation: the animation style of the pie chart. Click the icon to enable or disable the animation.

  Parameter	Description
  Animation Settings	EASING: the easing effect of the animation. Multiple common easing effects are available. Sequential Animation of Each Series: If the switch is turned on, sector animations play sequentially by series. If the switch is turned off, all sector animations play simultaneously. Start at Zero: If you turn on the switch, each sector animates from zero during the initial render. If you turn off the switch, all sectors animate from their starting positions simultaneously during the initial render.
  Admission Animation	The duration of the initial animation. Unit: ms.
  Update Animation	Update Animation Duration: the duration of the animation when the widget data is updated. Unit: ms. Start From Previous Position: If you turn on the switch, the animation starts from the previous position on data update. If you turn off the switch, the animation starts from the initial position on data update.

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 callout comparison pie chart interface request is completed	Triggered after a data interface request is completed and the response is processed by a filter. The processed JSON data is returned. For data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.

   • Action

     Action	Description
     Import Labels to Compare Pie Chart	Redraws the widget with pre-processed data without requesting server data again. For data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     Request labeling comparison pie chart interface	Requests server data again, using data from an upstream data processing node or layer node as the parameter. For example, if the API data source is set to https://api.test and the data passed to the Request Labeling Comparison Pie Chart API is set to { id: '1'}, the final request interface is https://api.test?id=1.
     Clear components	Clears the widget. No parameters are required.
     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 of Blueprint Editor.