Pie chart

Chart style

A pie chart divides a circle into blocks based on the proportion of each category. The entire circle represents the total data. You can compare categories by arc size to quickly understand proportion distribution.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

• Size: the width and height of the widget, in pixels.

• Positioning: the x-axis and y-axis coordinates of the widget, in pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

• Rotate: rotates the widget around its center, in degrees.

  • Directly enter the degrees in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the value.

  • Click the icon to flip the widget style.

  • Click the icon to flip the widget style.

• Opacity: valid values: 0 to 1. A value of 0 hides the widget. A value of 1 fully displays the widget. Default value: 1.

• Graphics

  Metric	description
  Chart Margins	Click the icon to toggle chart margins. When enabled, you can set the distance between the pie chart area and the four boundaries of the widget, in px.
  Pie Chart Radius	The radius of the pie chart, including the inner diameter and outer diameter, in %.
  Pie Chart Color	For more information about the color of the pie chart, see Use the color mapper.
  Pie Stroke	The stroke style of the pie chart, including the type, weight value, and color of the stroke line. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.
  Pie Chart Glow	The lighting style of the pie chart. Click the icon to toggle the lighting configuration. Emitting Color: includes a following-sector switch and opacity. When following sector is turned off, the luminous color can be set separately. Blur Coefficient: the blur coefficient of the pie chart glow. Valid values: 0 to 50. A larger value increases the blur range between pie slices.
  Decimal Merge	Limits the number of displayed slices and merges the remaining slices into a total slice. You can also set the name of the merged category. Click the icon to toggle decimal consolidation.
  Center Content	The text content in the center of the pie chart. Displayed only when the inner diameter of the pie chart radius is greater than 0. Click the icon to toggle center content. Area Type: the type of the center content area. Valid values: text type and graphic type. Title: the title of the content. Title Text: the font style, weight, size, and color of the title text. Title Offset: the horizontal and vertical offset of the content, in pixels. Value Format: the value format of the center content. Valid values: Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more data display formats, see Data display formats. Content Prefix and Suffix: the prefix and suffix of the content. Content Text: the font style, weight, size, and color of the center content. Content Offset: the horizontal and vertical offset of the center content, in pixels. Image Link: the image link of the central content. This parameter is displayed when you set the Area Type parameter to Graphic Type. Image Style: the width, height, transparency, and rounded corners of the center image. Displayed when the area type is set to Graphic Type. Offset: the horizontal and vertical position and offset of the center content image. Displayed when the area type is set to Graphic Type.
  Pie Chart Label	The label style of the pie chart. Click the icon to toggle the pie chart label configuration. Label Format: the format of the label content. Format: Select Default or Percentage. Label Field: the position of the label field. Valid values: Inside, Outside, and Spider. data format: specifies the numeric format of the tag. Valid values: Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more data display formats, see Data display format description. This parameter is displayed only when you set the Default Value parameter for the Label field. Pre-Suffix: the prefix and suffix of the pie chart tag. Tag Leader: the leader style of the pie chart tag. Click the icon to toggle the leader configuration. Threshold: the thickness of the leader. Available only when Label Field is set to Spider or Outside. Length: the length of the leader, in pixels. Available only when Tag field is set to Spider. Text Style: the text style of the pie chart label, including the font style, weight, font size, and color of the text. Text Stroke: the stroke style of the pie chart label, including the thickness and color of the stroke line.
  Map	The map style of the sector area. Click the icon to toggle the map configuration. Note The background of the map does not support gradient colors. Type: the type of the sticker. Valid values: Point, Line, Square, and Image. Fill Style: the fill style of the texture map. See the color picker instructions to configure the color style of the map. Stroke Style: Specify the stroke style of the map. See the color picker instructions to configure the color style of the map. This parameter is displayed when you set Type to Dot or Square. Extra Style: Other styles of the map, including Graphics Size, Graphics Spacing, Line Spacing, Rotation Angle, and Interlace. If you set Type to Image, you can set the Image Address, Tile Width, Tile Height, Tile Spacing, and Rotation Angle parameters.

• Animation: the animation effect style of the pie chart.

  Metric	description
  Animation Switch	Turn on the switch to enable the animation effect of the pie chart.
  Animation	The animation type. Available effects include Horizontal Growth, Vertical Growth, Moving, Zooming, and Fanting. Configurable only after you turn on the switch.
  Animation Duration	The duration of the widget animation effect, in ms. Configurable only after you turn on the Animation switch.

• Interactive: the interactive style of the pie chart widget.

  • Carousel: When enabled, the dialog box settings are applied and the dialog box is no longer triggered by interactions. Click the icon to toggle the carousel effect.

  • Center Text Interaction: Displayed only when the inner radius of the graphics module is greater than 0. When enabled, the center text interaction takes effect and the dialog box becomes invalid.

    Note

    When the center text interaction takes effect, the dialog box becomes invalid.

  • dialog box: the style of the dialog box that appears when you hover over or click a sector on the preview or publish page. Click the icon to toggle the dialog box.

    Metric	description
    Mode	dialog box selection modes. Valid values: concise and universal.
    Trigger	The trigger method of the dialog box. Valid values: Hover and Click.
    Display Position	The position of the dialog box. Valid values: Top, Bottom, Left, and Right.
    Title Spacing	The spacing between titles in the dialog box, in px.
    Title Text	The style of the title text in the dialog box, including the font style, weight, font size, and color.
    Content Display	Click the or icon on the right to add or delete a dialog box content series. Click the or icon to configure the arrangement style of multiple dialog box content display series. Click the icon to copy the current dialog box content display series configuration and add a dialog box content display series with the same configuration. Field Name: the name of the field in the dialog box content. The name must match the field in the data panel. Display Name: the display name of the dialog box content. Suffix: the suffix of the dialog box content.
    Content Spacing	The spacing between dialog box content text, in px.
    Content Text	The style of the content text in the dialog box, including the font style, text weight, font size, and color.
    Frame Background	dialog box the background style. Background Margin: the horizontal and vertical margins of the dialog box background. Background Color: The background color of the dialog box. Border Style: the border style of the dialog box, including the line type, rounded corner size, line width, and border color.
    Axis indicator	The style of the dialog box axis indicator line, including the axis indicator line type, thickness value, and axis indicator line color. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

  • Selected State: the selected state of the pie chart. You can click the icon to enable or disable the selected state.

    Metric	description
    Trigger	The trigger mode of the sector in the pie chart. Valid values: Hover and Click.
    Select Method	The method that you want to use to select a sector in the pie chart. You can select Single Select or Multiple Select.
    Fan Color	The color of the selected sector.
    Fan Stroke	The style of the stroke line in the sector, including the type, thickness, and color of the stroke line. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

• Legend: the legend style of the pie chart.

  Metric	description
  Legend Switch	If you turn on the switch, you can configure the legend style.
  Legend Position	The position of the legend relative to the widget start coordinates. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.
  Text Style	The font style, text weight, font size, and color of the legend text.
  Category Legend	The style of the sub-type legend. The legend is displayed as a category legend only when the Pie Chart Color Mapping Type parameter is set to Noun Category in the Component Style panel. Legend Marker: the size and shape of the legend marker. Legend Spacing: the horizontal and vertical distance between the legends of different categories. Maximum Width: the maximum width of the legend. Unit: pixels. Page Flip Allowed: When enabled, the page number style and arrow style of the legend are configurable. When disabled, the legend content is displayed on one page and cannot be flipped. Maximum Rows: the maximum number of rows that can be turned. Unit: rows. Style: the style of the page number, including the font, weight, font size, and color of the page number. Arrow Style: the size, default color, and disabled color of the arrows in the page-turning style.
  Continuous Legend	The style of the continuous legend. The legend is displayed as the Continuous Legend only when you set the Pie Chart Color Mapping Type parameter to Numeric Continuous or Numeric Partition in the Component Style panel. Rail Style Type: the type of the sliding track. Valid values: Rectangle and Triangle. Length: the length of the legend slide. Height: the height of the sliding track in the legend. Background Color: the background color of the legend track. Slider Style: the style of the slider on the slide track in the legend. Minimum Value: the minimum value of the slider. You can specify a custom value. You can also select Auto to obtain the minimum value. Maximum Value: the maximum value of the slider. You can specify a custom value. You can also select Automatic to obtain the maximum value. Size: the size of the slider. Color: the color of the slider. Dimension Style: the style of text dimensions on the legend. Alignment: the alignment of legend text dimensions relative to the slide track, including Top Alignment, Center, and Bottom. Spacing: the distance between the legend text dimension and the slide.

• Fan Style: Click the or icon to add or remove a conditional style. Click the or icon to configure the arrangement style of multiple conditional styles. Click the icon to copy the selected data series and add a conditional style. For more information about how to configure conditional styles in each series, see Use conditional trees.

  • Fan Color: If you turn on the switch, you cannot configure the color of the sector in the pie chart. If you turn off the switch, you cannot configure the color of the sector in the pie chart.

  • Text Labeling: the style of text labeling under the current conditions.

    • Text Content: specifies the text annotation content.

    • Offset: the horizontal and vertical offsets of the text annotation. Unit: pixels.

    • Orientation: the orientation of the text annotation relative to the text annotation point, including top, right, bottom, and left.

    • Text Background: specifies the background of the text annotation, including the color of the background and the radius of the rounded corners.

    • Text Style: the text style of the text content.

    • Text Line: specifies the line style of the text annotation, including the line type, color, weight, and length.

    • Text Label Point: Set the Fill Color and Radius of the text label point.

      Note

      The stroke style is the same as the line style.

Data Sources panel

Advanced Panel

Blueprint Interaction

1. Click the icon 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.

   • Event

     Event	Description
     When the pie chart interface request is completed	The event is triggered with processed JSON data after a data interface request is responded to and processed by a filter. For 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 changes	Triggered when the data of a pie chart arc block changes. The corresponding data item is thrown at the same time.
     When the legend is clicked	Triggered when the pie chart legend is clicked. The corresponding data item is thrown at the same time.

   • Action

     Action	Description
     Import a pie chart	After widget data is processed in its drawing format, the widget is imported for redrawing without requesting server data again. For 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 pie chart operation	Requests server data again, using data from an upstream data 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 Pie Chart API action is { id: '1'}, the final request URL is https://api.test?id=1.
     Highlight	data: the data item to be highlighted. Single highlight { type: 'Category 1 ', value: 12 } Bulk Highlight [ { type: 'Category 1 ', value: 12 }, { type: 'Category 2 ', value: 22 } ] style: Select a style. such as fillStyle, stroke, and opacity. If you do not specify the highlight style, the default style is used. Reference data example { "data": {}, "style": {} }
     Reset selections	Clears the selection data of the component. No parameters are required.
     Move	Moves a widget to a specified location. 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 /Hash	Toggles the visibility of a widget. No parameters are required.
     Display	Displays the widget. See the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Displays the widget. See the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then, modify the style field for the data processing node in Blueprint Editor.