DocsICP FilingConsole
Documentation
Home Page DataV DataV User Guide Widget Guide Charts Pie Chart Doughnut chart (versions earlier than v3.0)

Doughnut chart (versions earlier than v3.0)

Updated at:
Copy as MD
Product
My Favorites

A doughnut chart is a type of pie chart. Compared to a basic pie chart, a doughnut chart allows you to customize the inner and outer radius for each series. This layering creates a more flexible visualization, clearly showing data proportions across multiple dimensions. This topic describes the configuration options for the doughnut chart.

Settings

Important

This topic describes the settings for the doughnut chart for versions earlier than v3.0. For v3.0 and later, see Doughnut Chart (v3.0 and later).

  • 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 Proportional resizing 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 rotation of the component around its center, in degrees (°).
    • Enter an angle value to rotate the component.
    • Drag the black dot inside the 圆圈旋转控制图标 icon to rotate the component.
    • Click the 左右翻转图标 icon to flip the component horizontally.
    • Click the 上下翻转图标 icon to flip the component vertically.
  • 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 family for all text in the chart. The default is Microsoft YaHei.

  • Outer ring color: The color of the outermost ring of the doughnut chart. For more information about how to select a color, see Color picker.外环颜色面板

  • Label: The style of the labels in the chart.

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

    • Inflection point distance to center: The distance from the inflection point of the label line to the center of the chart. The value must be between 0 and 1. If the value is too small, the lines may cluster around the 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 numeric value 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.

      • Decimal places: The number of decimal places to display for the value.

      • Font weight: The font weight of the value text.数值面板

      • Show real value: When enabled, displays the actual data value. When disabled, displays the value as a percentage.真是数值面板

  • Polar axis: The style of the polar axis of the chart.极轴面板

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

    • Grid lines: The style of the grid lines on the polar axis. Click the 眼睛图标 icon to show or hide the grid lines.

      Color: The color of the grid 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 spacing: The horizontal distance between adjacent legend items. This setting applies only when there are multiple series.

      • Vertical spacing: The vertical distance between the legend and the top and bottom borders 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: The style of the tooltip that appears when you hover over or click a sector in preview or published mode. 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.

    • Hide delay: The delay, in milliseconds (ms), before the tooltip hides after the trigger condition ends.

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

      • Background color: The background color of the tooltip.

      • Custom background 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 mouse pointer, in pixels (px).

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

      • Border color: The border color of the tooltip.

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

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

      • Color: The color of the tooltip text.

      • Font: The font family 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 to add or remove a 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 total chart 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 total chart radius. The value must be between 0 and 1.

  • Animation: The animation effects for the chart. Click the 眼睛图标 icon to enable or disable animation. 动画面板

    • Initial animation duration: The duration of the initial rendering animation, in milliseconds (ms).

    • Animate all sectors from zero degrees: When enabled, animates each sector sequentially from the zero-degree position. When disabled, animates all sectors simultaneously from their respective starting points.

    • Easing effect: The easing effect for the animation. You can choose from several common easing functions.

    • Animate series sequentially: When enabled, animates each series sequentially. When disabled, animates all series simultaneously.

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

    • Animate update from previous position: When enabled, the update animation starts from the data's previous position. When disabled, it starts from the zero position.

Data

Data panel The example JSON code in the figure above is as follows.

[
  {
    "x": "Product 1",
    "y": "14"
  },
  {
    "x": "Product 2",
    "y": "12"
  },
  {
    "x": "Product 3",
    "y": "18"
  },
  {
    "x": "Product 4",
    "y": "10"
  },
  {
    "x": "Product 5",
    "y": "20"
  },
  {
    "x": "Product 6",
    "y": "10"
  }
]

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

  • y: The value for each sector, which determines its proportion of the total.

Parameter

Description

Controlled mode

When enabled, the asset does not request data upon initialization. Data requests are triggered only through a callback ID or a method configured in the Blueprint Editor. When disabled, the asset can use automatic updates to request data. This switch is disabled by default.

Automatic update request

When enabled, you can set a polling frequency for dynamic data updates. When disabled, data is not updated automatically. Instead, you must manually refresh the page or trigger an update through the Blueprint Editor or a callback ID event.

Data source

Click Configure Data Source. In the Set Data Source panel, you can change the data source type, modify the data query code, preview the returned data, and view the data response. For more information, see Configure asset data.

Data filter

A data filter allows for data transformation, filtering, and simple calculations. Click Add Filter to configure a data filter script in the Set Data Source panel. For more information, see Filters.

Data response

Displays the response from the data request. When the data source changes, you can click the 刷新图标 icon on the right to view the real-time data response.

Interaction

Select Enable to enable the component interaction feature. When you click a slice of the doughnut chart, a data request is triggered, a callback value is emitted, and the data for the selected slice is dynamically loaded. By default, the callback value contains the x and y values from the data. For more information about the settings, see Component callback ID configuration.

Blueprint editor interaction

  1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.

  3. On the Blueprint Editor configuration page, click the doughnut chart component in the imported nodes pane. The configuration parameters for the doughnut chart in the Blueprint Editor appear on the canvas, as shown in the following figure.节点编程面板

    • Events

      Event

      Description

      When the doughnut chart API request is complete

      This event triggers after the API data request is complete and any filters have processed the data. The event emits the processed data in JSON format. For a data sample, see the Data section in this topic.

      When a data item is clicked

      This event triggers when a chart sector is clicked. It emits the data item for that sector.

    • Actions

      Actions

      Description

      Request doughnut chart data

      Triggers a new data request to the server. Data passed from upstream nodes is appended to the request as URL parameters. For example, if the chart's data source URL is http://api.test and the data passed to the Request doughnut chart data action is { id: '1'}, the final request URL is http://api.test?id=1.

      Import data to doughnut chart

      Imports data to redraw the component without making a new server request. For the required data format, see the Data section in this topic.

      Highlight

      Highlights the element corresponding to a data item. The following code provides a data sample.

      {
  data: {
    x: '2010/01/01' // You can list multiple highlight conditions, similar to a filter.
  },
  options: {
    style: {
      fill: 'red'
    },
    selectMode: 'single',
    cancelHighlightFirst: true
  }
}

      Cancel highlight

      Removes the highlight from a chart element that corresponds to the specified data. The following code provides a data sample.

      {
  data: {
    x: '2010/01/01'
  },
  options: {
    mode: 'single' // If mode is 'single', only one highlight is canceled if multiple data items match. If mode is 'multiple', all matching highlights are canceled.
  }
}

      Update component configuration

      Dynamically updates the component's style settings. To use this action, first copy the component's configuration data from the Settings panel by clicking Copy Configuration to Clipboard. Then, use a data processing node in the Blueprint Editor to modify the style fields.

      Show

      Shows the component. No parameters are required.

      Hide

      Hides the component. No parameters are required.

      切换显隐状态

      切换组件显示或者隐藏。参考数据示例如下。

          {
      // 显示为true，隐藏为false。
      "status": true,
      // 显示动画。
      "animationIn": {
        // 动画方式，可选fade，不填无动画。
        "animationType": "fade",
        // 显示延时，单位为ms。
        "animationDuration": 1000,
        // 显示动画函数，可选linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      },
      // 隐藏动画。
      "animationOut": {
        // 动画方式，可选fade，不填无动画。
        "animationType": "fade",
        // 隐藏延时，单位为ms。
        "animationDuration": 1000,
        // 隐藏动画函数，可选linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }

      移动

      将组件移动到指定位置。参考数据示例如下。

          {
      // 移动方式。绝对定位：to，相对定位：by。默认值：to。
        "positionType": "to",
      // 指定位置。x坐标，y坐标。
      "attr": {
        "x": 0,
        "y": 0
      },
      // 动画方式。
      "animation": {
        "enable": false,
        // 动画延时。
        "animationDuration": 1000,
        // 动画曲线。可选值为：linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }
Previous：The Exploded Doughnut Chart widgetNext：Metric percentage pie chart