All Products
Search

This Product

    DataV:carousel-pie-chart

    Document Center

    DataV:carousel-pie-chart

    Last Updated:Dec 02, 2024

    This topic describes the meaning of each configuration items when you select the full number of pie charts in a carousel.

    Chart style

    A carousel pie chart is a type of pie chart. Compared with other types of pie charts, a carousel pie chart allows you to display the percentage or value of each type in a carousel. You can customize the percentage or actual value to display the percentage or change of data in a more vivid manner on a data dashboard. 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.

    • Pie Chart Attributes: the basic attributes of a pie chart.

      Parameter

      Description

      Inner radius

      The inner radius of the pie chart. The value is a percentage of the widget height. Valid values: 0 to 1.

      Outer radius

      The outer radius of the pie chart. The value is a percentage of the widget height. Valid values: 0 to 1.

      Animation Duration

      The amount of time, in ms, that it takes for the sectors of each category to protrude outward from the pie chart.

      Carousel Interval

      The amount of time, in ms, for the pie chart of one category to finish, to retract, and to start the fan-out animation of the next category.

      Default Color

      The default color of the pie chart. For more information, see color picker description.

    • Middle Percentage Portion: the style of the middle percentage portion of the pie chart.

      Parameter

      Description

      Text Style

      The text style of the middle percentage part, including the text font, color, and weight.

      Enable

      If you turn on the switch, when the text in the middle percentage part exceeds its width, the content will wrap automatically. Otherwise, the text will overflow.

      Show real values

      Turn on the switch to display the real value of the data; turn off the switch to display the percentage value of the data automatically calculated by the system.

      Note

      By default, the percentage value is displayed. If you turn on the switch, the actual data value is displayed.

      Percent sign

      The unit symbol for the percentage value.

      Percent Font Size

      The text size in units of percent values.

      Percent Position

      The position of the unit symbol of the percentage value. Valent values: Prepended and Postpended.

      Percent Offset Value

      Percent sign and percentage distance.

      Note

      The preceding configurations of the four percent signs are valid only when Show True Values is disabled.

      Number of decimal places

      The number of decimal places, percentage and real data are applicable, and the value range is 0 to 10.

      Frame Proportion

      The width of the middle percentage. The value is the percentage of the outer radius of the pie chart. Valid values: 0 to 1. If the setting is small, the numbers and symbols will be displayed in two lines. If the setting is too small, the numbers and symbols will be squeezed together.

      Digit Proportion

      The height of the middle percentage. The value is the percentage of the outer radius of the pie chart. Valid values: 0 to 1.

      Digital Font Size

      The size of the numeric text.

      Description Font Size

      The size of the category name text under the number.

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

      • Text: the text style of the legend.

        Parameter

        Description

        Font size

        The size of the legend text.

        Color

        The color of the legend text.

        Font weight

        The font weight of the legend text.

      • Layout: the layout style of the legend.

        • Spacing: the spacing style of the legend.

          Parameter

          Description

          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.

          Upper and lower interval

          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 Center, Top Left, Top Right, Bottom Center, Bottom Left, or Bottom Right.

    • Custom Category: Click the imageor imageicon to add or remove a custom category. Click the imageor imageicon to configure the arrangement style of multiple categories. Click the imageicon to copy the configuration of the selected category and add a custom category with the same configuration.

      Labels

      Background Color: the color of the sector in the pie chart.

    Data Sources panel image.png

    Column

    Description

    type

    Distinguishes different categories and corresponds to the category name in the category.

    value

    The category value.

    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

    This widget does not support interaction events.

    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 carousel pie 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.

      • Action

        Action

        Description

        Import a carousel pie chart

        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 carousel pie chart operation

        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, if the API data source is https://api.test and the data passed to the request carousel operation is { id: '1'}, the final request operation is https://api.test?id=1.

        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 /Hide

        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

        Hide the component. 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.