All Products
Search

This Product

    DataV:donut-chart

    Document Center

    DataV:donut-chart

    Last Updated:Dec 02, 2024

    This topic describes the meaning of each configuration items when Full Select is donut chart.

    Chart style

    A donut chart chart is a type of pie chart. Compared with a basic pie chart, the donut chart allows you to customize the radius of each series. This makes the data display more hierarchical and more clear and flexible. image.png

    Style Panel image.png

    • Search Configuration: Click the Search configuration items icon imagein the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. 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 of the component. Unit: pixels. 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.

    • Rotate: Rotate the widget by degrees.

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

      • Click the imageicon to flip the widget style.

      • Click the imageicon 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 the true value of the data; turn off the switch to display the percentage value of the data.

        Number of decimal places

        The number of decimal places to display for the value. This parameter can be configured only when the 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. If it is set too small, it will be surrounded to the center of the circle.

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

        Parameter

        Description

        Text

        Set the style of the legend text, including the text font style, font size, font color, and font weight. See color picker to modify the text color.

        Layout

        The positional relationship between the legends.

        • Spacing

          • Left and Right Spacing: The distance between the left and right sides of adjacent legends. This configuration items is only valid 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 imageor imageicon on the right to add or delete a data series. Click the imageor imageicon to configure the arrangement style of multiple data series. Click the imageicon 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 lower sector in this series. The value is the proportion of the radius of the pie chart. Valid values: 0 to 1.

      Outer radius

      The outer radius of the lower sector in this series. The value is the proportion of the radius of the pie chart. 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 the switch is turned on, the animation of each series of sectors is played in sequence. If the switch is turned off, the animation of all sectors is played at the same time.

        • Start at Zero: If you turn on the switch, each sector is played from zero when the component renders the animation for the first time. If you turn off the switch, the component plays the animation from the start point of each sector at the same time when the component renders the animation for the first time.

        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 you turn on the switch, the animation starts from the previous position when the widget data is updated. If you turn off the switch, the animation starts from the initial position when the widget data is updated.

      • dialog box: The style of the dialog box that appears when you move the pointer over or click a fan on the preview or publish page. Click 开关图标the icon to turn the dialog box on or off.

        Parameter

        Description

        Disappearing Delay Time

        When the trigger condition is not met, the dialog box will disappear. This configuration items sets the delay time before the dialog box disappears, in ms.

        Trigger

        Trigger Action: dialog box the action to be triggered. This field is optional, including 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 image.png

    Column

    Description

    x

    The category of each sector, which corresponds to the name of the series.

    y

    The value of each sector, which determines the percentage of each sector in the entire pie chart.

    Configure data items

    Description

    DataSource

    You can use the code editor or visual editor to view the data fields contained in the widget. You can also modify the Data Type parameter to flexibly configure the component data.

    Data Mapping

    If you need to customize chart field configurations, you can set different field mapping content in the Data Mapping module and field mapping these content to the corresponding fields of the widget. This allows you to match data without modifying the fields in the data source. You can also click the imageicon to configure the field style.

    Configure a filter

    Turn on Filter, select an existing data filter or create a data filter, and configure a data filter script to filter data. For more information, see Manage data filters.

    Data Response Result

    The Data Response Result section displays widget data in real time. If the data source of the widget changes, this section displays the latest data. If the system response is delayed, you can click the imageicon on the right to view the data response result. You can also click the imageicon on the right to obtain the latest data of the widget. You can also click View Example to view an example of the response result of the current component.

    Forbid Loading

    If you select the check box, you will not see the loaded content during component initialization when you update the component and preview the data kanban. If you select the check box, the opposite is true. By default, the status is deselected.

    Controlled Mode

    If you select the check box, the component does not request data in the initialized state, and only requests data by using global variables or the method configured in Blueprint Editor. If you clear the check box, you can use automatic update to request data. By default, the status is deselected.

    Auto Data Request

    Select the check box to manually enter the time frequency of polling to set dynamic polling. If you clear the page, the page is not automatically updated. You need to manually refresh the page or use Blueprint Editor and global variable events to trigger a request to update data.

    Advanced Panel image.png

    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, a temporary variable is thrown, and the data of different sectors is dynamically loaded. By default, the x and y values in the data are thrown. For more information, see Component interaction configuration.

    Blueprint Interaction

    1. Click the imageicon 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. image.png

      • Event

        Event

        Description

        When the donut chart interface request is completed

        The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. 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

        After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. 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

        This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, donut chart the API data source is configured as https://api.test and the data transferred to the request donut chart interface is { id: '1'}, the final request interface 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

        Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.