The Doughnut Chart widget

Chart Style

A doughnut chart is a type of pie chart that displays the proportion of each category within a ring. It supports labels at multiple positions inside and outside the chart, indicator card display, and multi-series data configuration.

Settings Panel

• 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.

• Chart

  • Margins: Click the icon to set custom margins, which control the distance between the chart area and the widget boundaries. Unit: px.

  • Pie: The pie chart style.

    Parameter	Description
    Stroke Color	The stroke color of the pie chart.
    Stroke Width	The stroke width of the pie chart.

  • Value Label: The value label style. Click the icon to show or hide value labels.

    Parameter	Description
    Position	The display position of the label text. Valid values: Inside, Outside, and Spider.
    Guide Style	The leader line style, including color and width. Available only when you set Position to Spider.
    Text Style	The font, weight, size, and color of value label text.

  • Value Box: The indicator card style. Click the icon to show or hide the card.

    Note

    When the indicator card is enabled, the tooltip style does not take effect.

    Parameter	Description
    Trigger Mode	The trigger mode of the indicator card. Valid values: Hover and Click.
    Title Style	The indicator card title style, including font, weight, size, and color.
    Value Style	The indicator card value style, including font, weight, size, and color.

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

    Parameter	Description
    Paging Allowed	Turn on to enable pagination when legends exceed the available space.
    Layout	The position of the legend relative to the start coordinate of the widget. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right.
    Legend Mark	The marker shape and size displayed to the left of each legend item. Available shapes:hyphen, circle, square, triangle, diamond, hexagon, butterfly, cross, mark, and positive
    Legend Text	The font, weight, size, and color of legend text.

• Coordinate Axis: the radial axis style of the ring chart.

  • Inner Radius: the inner radius of the ring.

  • Outer Radius: the outer radius of the ring.

• Series

  • 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
    Mapping Between	name Field Value: The value of the name field in the data mapping. If not specified, the name field values in the component data are used as mapped field names. If specified, you must ensure the correct order of returned data. Category Name: The display name of the data series. You can customize this value.
    Color	The sector color for this data series in the doughnut chart.

  • Category Mapping: When enabled, this setting takes effect if the data contains series name values. You can set the color of a specific category by using Mapping Between. When disabled, the Mapping Between configuration is unavailable.

• Other

  Tooltip: The tooltip style that appears when you hover over or click a segment on the preview or published page. Click the icon to enable or disable the tooltip.

  Note

  The tooltip style takes effect only when the indicator card is disabled.

  Parameter	Description
  Text Style	The tooltip text style, including font, weight, size, and color.
  Background Box	The tooltip background style. Background Color: The background color of the tooltip. Padding: The inner padding of the tooltip. Unit: pixels. Border Border Width: The border width of the tooltip. Unit: pixels. Border Color: The border color of the tooltip.

Data Panel

Configuration field description

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Interaction Panel

Interaction Description

Configure interactions in Blueprint Editor

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. In Blueprint Editor, click the Doughnut Chart widget in the Import Nodes pane. You can view the parameters of the Rings widget on the canvas, as shown in the following figure.

   • Event

     Event	Description
     On Completion of Data Interface Request	Triggered after a data interface request is returned and processed by a filter, with the processed JSON data. For more information, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.
     On Failure of Data Interface Request	Triggered when a data interface request fails due to network issues or interface errors and is processed by the filter. The processed JSON data is also returned. For more information, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.
     On Click of Data Item	Triggered when a ring segment is clicked. Returns the data item of the corresponding sector.
     On Click of Legend	Triggered when a legend item is clicked. Returns the data item of the corresponding legend entry.

   • Action

     Action	Description
     Request Data Interface	Re-requests server data, using data from an upstream processing node or layer node as parameters. For example, if the API data source is https://api.test and the data passed to the Request Data Interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Import Data Interface	Imports pre-processed data in the widget's drawing format for redrawing, without re-requesting server data. For more information, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.
     Highlight	Highlights the element that corresponds to the data item. Reference data example: return { "data": {}, "options": { "style": { "stroke": "#f00", "fill": "" }, "selectMode": "single", "cancelHighlightFirst": false } }
     Cancel Highlight	Cancels the highlighting of the element that corresponds to the data item. Reference data example: return { "data": {}, "options": { "mode": "single" } }
     Update Widget Configurations	Dynamically updates widget style configurations. In the Configuration panel, click Copy Configuration to Clipboard to obtain the configuration data, then modify the style field for the data processing node in Blueprint Editor.
     Show	The following example shows the widget. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	The following example shows the widget. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide/Show	The following example shows whether to show or hide a widget. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves a widget to a specified position. Reference data example: return{ // 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 duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }