Pie chart with image (pre-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: The font for all text in the pie chart. The default is Microsoft YaHei.

• Image: The image in the center of the pie chart. Hover over the image and click the delete icon to remove the current image. Click the image area to upload a local image. To use an image from a remote server, enter its URL.

• Label

  • Distance from Label to Center: The horizontal distance from the label to the center of the pie chart. The value must be between 0 and 1.

  • Distance from Axis to Center: The vertical distance from the label to the center of the pie chart. The value must be between 0 and 1. If this value is too small, the labels may overlap at the chart center.

  • Category: The style of the category text in the labels. Click the icon to show or hide the category.

    • Font size: The font size of the category text.

    • Color: The color of the category text.

    • Font weight: The font weight of the category text.

  • Value: The style of the value text in the labels. Click the icon to show or hide the value.

    • 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 real values instead of percentages.

• Polar axis: The style of the pie chart's polar axis.

  • Radius: The radius of the polar axis, as a proportion of the component's height. The value must be between 0 and 1.

  • Concentric lines: The style of the concentric lines on the polar axis. Click the icon to show or hide the concentric lines.

    Color: The color of the concentric lines.

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

  • Text

    • 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

    • Horizontal Interval: The horizontal distance between adjacent legend items. This option applies only when multiple series exist.

    • Vertical Interval: The vertical distance between the legend and the top or bottom border of the component.

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

• Tooltip: Configures the tooltip that appears when you hover over or click a chart sector. Click the icon to show or hide the tooltip.

  Figure 1. Tooltip panel

  Figure 2. Tooltip example

  • Trigger action: The action that triggers the tooltip. Options include Hover and Click.

  • Disappear Delay: The delay (in ms) for the tooltip to disappear after the trigger action ends.

  • Background box style: The style of the tooltip's background box.

    • Background color: The background color of the tooltip.

    • Custom background box size: The width and height of the tooltip in pixels (px).

    • Padding: The internal padding of the tooltip in pixels (px).

    • Horizontal offset: The horizontal offset of the tooltip relative to the cursor in pixels (px).

    • Vertical offset: The vertical offset of the tooltip relative to the cursor in pixels (px).

    • Border color: The border color of the tooltip.

    • Border width: The border width of the tooltip in pixels (px).

  • Text style: The style of the text within the tooltip.

    • Color: The color of the tooltip text.

    • Font: The font of the tooltip text.

    • Font size: The font size of the tooltip text.

    • Font weight: The font weight of the tooltip text.

• Series: Click the or icon on the right to add or delete a data series.

  • Color: The color of the sectors in this series. Solid and gradient fills are supported.

  • Inner radius: The inner radius of the sectors in this series, as a proportion of the pie chart's radius. The value must be between 0 and 1.

  • Outer radius: The outer radius of the sectors in this series, as a proportion of the pie chart's radius. The value must be between 0 and 1.

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

  • Initial Animation Duration: The duration of the initial animation when the component first renders, in milliseconds (ms).

  • Animate All from Zero Degrees: If enabled, sectors animate sequentially from the 0-degree position. If disabled, they animate simultaneously from their respective starting points.

  • Easing: The easing effect for the animation. The system provides several common easing effects for you to choose from.

  • Animate Series Sequentially: When enabled, animations for each series play sequentially. If disabled, they animate simultaneously.

  • Update Animation Duration: The duration of the animation when the component's data is updated, in milliseconds (ms).

  • Animate from Previous Position on Update: When enabled, the update animation starts from the previous data state. When disabled, the animation starts from the initial (zero) position.

Data

The following code is an example of the data format.

[
  {
    "x": "Goods 1",
    "y": "2325"
  },
  {
    "x": "Goods 2",
    "y": "6422"
  }
]

• x: The category for each sector, which corresponds to the series name.

• y: The value of each sector, which determines its proportional size in the chart.

Interaction

Select the Enable checkbox to enable component interactions. When a user clicks a pie chart sector, a data request is triggered and a callback value is emitted. This can be used to dynamically load data into other components. By default, the x and y values from the data are emitted. For more information, see Configure a Component Callback ID.

Blueprint Editor interaction

1. In the canvas editor, right-click the component and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the pie chart with image component in the Import Nodes pane. The component's configuration parameters appear on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When the pie chart with image API request is complete	This event is triggered after the data API request is complete and the data is processed by filters. It emits the processed data in JSON format. For a data example, see the Data section of this topic.
     When a data item is clicked	This event is triggered when a sector of the pie chart is clicked. It emits the data item corresponding to that sector.

   • Actions

     Action	Description
     Request data for pie chart with image	Triggers a new data request from the server. Data from upstream data processing nodes or layer nodes is passed as parameters. For example, if the component's API data source is set to http://api.test and the data passed to the Request data for pie chart with image action is { id: '1'}, the final API request will be http://api.test?id=1.
     Import data for pie chart with image	Imports and processes data to redraw the component, without making a new server request. For a data example, see the Data section of this topic.
     Highlight	Highlights the element corresponding to a data item. The following code is an example of the parameters. { data: { x: 'Shanghai' // You can list multiple highlight conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Unhighlight	Removes the highlight from an element corresponding to a data item. The following code is an example of the parameters. { data: { x: 'Shanghai' }, options: { mode: 'single' // When 'single', only one highlight is removed if multiple items match. When 'multiple', all highlights are removed if multiple items match. } }
     Clear Component	Clears the component's data. No parameters are required.
     Update Component Configuration	Dynamically updates the component's style configuration. In the Configuration panel, click Copy Configuration to Clipboard to get the configuration data. Then, use a data processing node in the Blueprint Editor to modify the required style field values.
     Show	Shows the component. No parameters are required.
     Hide	Hides the component. No parameters are required.
     Toggle Visibility	Toggles the visibility of the component.
     Move	Moves the component to a specified position. { // Movement type. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // The target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration in milliseconds. "animationDuration": 1000, // Animation curve. Options: 'linear', 'easeInOutQuad', 'easeInOutExpo'. "animationEasing": "linear" } }