donut-chart

Chart style

A donut chart is a type of pie chart that allows you to customize the inner and outer radius of each series, providing a more layered and flexible view of multi-dimensional data proportions.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration item you want to find. 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 coordinates of the component. Unit: pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left edge of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the top edge of the canvas.

• Rotate: Rotate the widget by degrees.

  • Enter the rotation angle directly 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. 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.

• Chart name

  • Pie Chart Style

    Outer Ring Color: the color of the outermost circle in the pie chart. For more information, see color picker.

  • Value Label: Click the icon to enable the label style.

    Parameter	Note
    Text	The font style, text weight, font size, and color of the numeric label text.
    Real Value	Turn on the switch to display actual values; turn it off to display percentage values.
    Number of decimal places	The number of decimal places for the displayed value. This parameter is available only when Real Value is disabled.

  • Category Label: the style of the category in the label. You can click the icon to display or hide the category label.

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

  • Label Guide: the position of the label guide in the pie chart. You can click the icon to control the display of the label guide line.

    Parameter	Description
    Distance from label to center	The horizontal distance between the label and the center of the pie chart. Valid values: 0 to 1.
    wheelbase center	The vertical distance between the label and the center of the pie chart. Valid values: 0 to 1. A value that is too small causes labels to overlap near the center.

  • Legend: the legend style of the chart. You can click the icon to display or hide the legend.

    Parameter	Description
    Text	The font style, weight, size, and color of the legend text. See color picker to modify the text color.
    Layout	The spatial arrangement of the legends. Spacing Left and Right Spacing: The horizontal spacing between adjacent legends. This setting takes effect only when there are multiple series. Distance: the distance between the legend and the upper and lower boundaries of the widget. 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 axis style of the pie chart.

  Parameter	Description
  Radius	The radius of the radial axis. The value is the proportion of the component height. Valid values: 0 to 1.
  Grid Line	The grid line style of the polar axis. You can click the icon to control the display of the grid line. Color: the color of the grid lines.

• Edition

  data series: Click the or icon on the right to add or delete a data series. Click the or icon to configure the arrangement style of multiple data series. Click the icon to copy the selected data series configurations and add a data series with the same configurations.

  Parameter	Description
  Color	The color of the sector under this series.
  Inner radius	The inner radius of the sector in this series, as a proportion of the pie chart radius. Valid values: 0 to 1.
  Outer radius	The outer radius of the sector in this series, as a proportion of the pie chart radius. Valid values: 0 to 1.

• Remarks

  • Ease Animation: the animation effect style of the pie chart. You can click the icon to enable or disable the animation effect.

    Parameter	Description
    Animation Settings	Ease Effect: the easing effect of the animation. The system provides a variety of common easing effects for you to choose from. Sequential Animation of Each Series: If turned on, series animations play sequentially. If turned off, all sector animations play simultaneously. Start at Zero: If turned on, each sector animates from zero on the initial render. If turned off, all sectors animate from their respective start points simultaneously.
    Admission Animation	The duration of the first animation rendered by the component. 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 turned on, the update animation starts from the previous position. If turned off, it starts from the initial position.

  • dialog box: The tooltip style that appears when you hover over or click a sector on the preview or publish page. Click the icon to enable or disable the tooltip.

    Parameter	Description
    Disappearing Delay Time	The delay in milliseconds before the dialog box disappears after the trigger condition is no longer met.
    Trigger	Trigger Action: the action that triggers the dialog box. Options: Hover and Click.
    Text Style	The style of the text in the dialog box, including the font style, weight, font size, and color.
    Background Box Style	The background box style of the dialog box. Background Color: the background color of the dialog box. Custom: the width and height of the dialog box. Unit: pixels. Click the icon to turn custom dialog box on or off. Pin: the inner margin of the dialog box. Unit: pixels. Offset Horizontal Offset: the horizontal offset of the dialog box relative to the mouse arrow. Unit: px. Vertical Offset: the vertical offset of the dialog box relative to the mouse arrow. Unit: px. Borders Border: the border thickness of the dialog box. Unit: pixels. Border Color: The border color of the dialog box.

Data Sources panel

Advanced Panel

When you click a data item: Turn on the switch to enable widget interaction. When a donut chart sector is clicked, a data request is triggered and a temporary variable is emitted, allowing you to dynamically load data for different sectors. By default, the x and y values from the data are emitted. For more information, see Component interaction configuration.

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 donut chart interface request is completed	Triggered after a data interface request is completed and processed by the filter, returning the processed JSON data. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     When a data item is clicked	The event that is raised when a donut chart sector is clicked, along with the data item corresponding to that sector.

   • Action

     Action	Description
     Import donut chart Interface	Imports pre-processed data in the widget's drawing format for redrawing, without re-requesting server data. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     Request donut chart Interface	Requests server data again, using data from an upstream processing node or layer node as parameters. For example, if the donut chart API data source is https://api.test and the data passed to request donut chart interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Highlight	data: the data item to be highlighted. { x: 'Cargo 1' } Reference data example { "data": {}, "options": {} }
     Unhighlight	data: the data item that needs to be unhighlighted. When the data field is not saved, all the highlighted data is unhighlighted. { x: 'Cargo 1' } Reference data example { "data": {}, "options": {} }
     Clear components	Clear component data. No parameters are required.
     Move	Move a widget to a specified location. For more information, see the 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	Display the widget. For more information, see 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	Display the widget. For more information, see 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.