Comparison pie chart II (versions earlier than v3.0)

Configuration

• 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 family: Sets the font family for all text in the chart. The default is Microsoft YaHei.

• Decoration color: Sets the color of the circular border and the center dot of the pie chart. For more information, see Color picker.

• Value: Configures the style of the numerical values displayed in the chart.

  Parameter	Description
  Font size	The font size of the value text.
  Color	The color of the value text.
  Font weight	The font weight of the value text.
  Number of decimal places	The number of decimal places to display for the value.
  Real value	Enable to display the real value. Disable to display the percentage value.

• Polar axis: Configures the style of the polar axis of the pie chart.

  Parameter	Description
  Radius	Sets the radius of the polar axis as a proportion of the component's height, ranging from 0 to 1.
  Concentric lines	Sets the style of the concentric grid lines. Click the icon to toggle their visibility. Color: The color of the concentric lines.

• Angle axis: Configures the style of the angle axis of the pie chart.

  Angle offset: Sets the starting angle for the first sector, in degrees. The default, auto, is 0 degrees.

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

  • 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

    Parameter	Description
    Horizontal spacing	The horizontal spacing between adjacent legend items. This setting applies only when there are multiple series.
    Vertical spacing	Sets the vertical space between the legend and the component's top and bottom borders.
    Position	The position of the legend relative to the component's origin. Options: Top Center, Top Left, Top Right, Bottom Center, Bottom Left, and Bottom Right.

• Series: Click the icon to add a series or the icon to delete one. Click the or icon to change the order of multiple series.

  Color: The color of the sectors in this series.

• Animation: Sets the animation effects for the pie chart. Click the icon to toggle animations.

  Parameter	Description
  Initial animation duration	The duration of the initial rendering animation in milliseconds (ms).
  Start all from zero degrees	When enabled, each sector's animation starts sequentially from 0 degrees. When disabled, all sector animations play simultaneously from their respective start angles.
  Easing	Sets the easing effect for the animation.
  Animate series sequentially	When enabled, animations for each series play sequentially. When disabled, they play simultaneously.
  Update animation duration	Sets the animation duration for data updates, in milliseconds (ms).
  Update from latest status	When enabled, update animations start from the previous data state. If disabled, they start from the 0 position.

Data

The following code provides an example of the JSON format.

[
  {
    "x": "Building Materials",
    "y": "12"
  },
  {
    "x": "Food",
    "y": "32"
  }
]

Table 1. Field descriptions

Interaction

This component has no interaction events.

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 Comparison pie chart II component in the Imported Nodes pane. The component's configuration nodes appear on the canvas.

   • Events

     When the comparison pie chart II API request is complete: Triggered after a data request completes and any filters have been applied. This event provides the final, processed data in JSON format. For the data structure, see the Data example.

   • Actions

     Action	Description
     Request comparison pie chart II API	Re-requests data from the server. Data emitted from upstream data processing nodes or layer nodes is used as a parameter. For example, if the API data source is configured as http://api.test and the data passed to the Request comparison pie chart II API action is { id: '1'}, the final request URL is http://api.test?id=1.
     Import comparison pie chart II API	Redraws the component with the provided data, bypassing a new server request. The data must be in the required format. For the data structure, see the Data example.
     Clear component	Clears all data from the component.
     Update component configuration	Dynamically updates the component's configuration. To use this action, first copy the component's configuration data by clicking Copy configuration to clipboard in the Configuration panel. Then, use a data processing node to modify the values before passing them to this action.
     Show	Makes the component visible.
     Hide	Makes the component invisible.
     Toggle visibility	Toggles the visibility of the component.
     Move	Moves the component to a specified position. The following code shows an example of the data format. { // The movement type. "to" for absolute positioning, "by" for relative positioning. Default: "to". "positionType": "to", // The target position. x-coordinate and y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // The animation easing curve. Valid values: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }