Pie chart

Step 1: Add the component

1. Create a mobile application. For details, see Create a mobile application.

2. In the mobile application editor, click the Components icon on the far left.

3. (Optional) Add a column component to configure the page layout. For details, see Horizontal and Vertical Columns.

4. Above the component list on the left side of the canvas, enter Pie Chart in the search box, find the component, and drag it onto the canvas.

   For more information about adding components, see Add a component.

Step 2: Configure the data source

1. On the right side of the mobile application editor, in the Style panel, click Configure Data Source next to Display Data.

2. On the Data Source Configuration page, select a data source type and complete the configuration.

   Available data source types include API, data table resource, Static Data, and Application Push.

3. Click OK to complete the configuration.

   On the left side of the Data Display tab, the name of the configured data source appears in the Data Source section. The Dimension and Measure sections list the fields that are automatically parsed from the data source.

   Note

   Data source attribute field matching rules:

   • Dimension: Boolean, string, and time fields.

   • Measure: Numeric fields.

4. (Optional) Click Data Table in the upper-left corner to view all data from the configured data source.

Step 3: Configure the data display

On the Data Display tab, configure the data and style for the pie chart.

1. Drag a field from the Dimension section to the Horizontal Axis box to represent data categories. Drag a field from the Measure section to the Vertical Axis box to represent data proportions.

   Note

   To change the default system colors, use the Properties or Style tab on the right side of the Data Display page.

2. (Optional) In the Horizontal Axis and Vertical Axis boxes, click the drop-down arrow next to a field to perform the following operations.

   Actions	Description
   Aggregation method	Options: Sum (default), Average, Maximum, Minimum, and Count. This feature is available only for measure fields. The configured aggregation method appears before the field name. After you set an aggregation method for a measure field, you can configure filter conditions again to display specific data. Note This feature is available only when the component's data source type is data table resource.
   Filter	Add a field to the Filter section and configure conditions based on the field to filter the displayed data. You can add up to 10 filters. You can also click the drop-down arrow next to a field in the Dimension or Measure section to add the field to the Filter section. Note This feature is available only when the component's data source type is data table resource. For more information, see Filter Configuration.
   Set display name	Edit the display name of the field.

3. On the right side of the Data Display tab, click Style to configure the component's display style.

   Parameter	Description
   Global style	Set the font and inner radius percentage. Note You can create a donut chart by adjusting the inner radius percentage. By default, the inner radius percentage is 0, creating a pie chart.
   Title	Choose whether to display the item. If you do, you can configure its style.
   Legend
   Label
   Background
   Border
   No data tip

4. Click Complete Configuration to return to the mobile application editor and view the configured component data.

5. Adjust the component's layout on the page. For details, see General Styles.

Step 4: Configure interactions

1. On the Interaction tab on the right side of the mobile application editor, click Add Interaction to set an Event and an Action.

   Supported events include Click and Double-click. For example, you can set the Click event on the component to trigger the Refresh Component action, which refreshes a specified component's content.

   For details, see Interaction Configuration.

2. Preview and debug the data and style of the component. For details, see Preview and Debug.