3D-doughnut-chart

Chart style

A 3D doughnut chart is a type of pie chart that displays the proportion of each category within a ring. It supports labels at multiple positions inside and outside the chart, indicator card styles, and custom multi-series data configurations.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration item to quickly locate it. 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 edge of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the top edge of the canvas.

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

    • Enter the rotation angle directly in the spin box, or click the plus (+) or minus (-) sign to adjust the value.

    • Click the icon to flip the widget horizontally.

    • Click the icon to flip the widget vertically.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget. A value of 1 makes the widget fully visible. Default value: 1.

• Graphics

  • Projection Mode: the projection mode of the 3D doughnut chart. Valid values: Perspective Projection and Orthogonal Projection.

  • Visual Distance: the viewing distance for the 3D doughnut chart, used to adjust the overall size of the chart. Unit: px.

  • Rotation Angle: the horizontal and vertical rotation angles. Click the icon to enable or disable the rotation angle setting.

    Note

    When enabled, the rotation angle affects mouse interaction rotation.

  • Inner /Outer Diameter Ratio: drag the slider to set the inner-to-outer diameter ratio of the doughnut chart.

  • Height Mapping: controls whether the height of each ring segment is mapped based on its data value. When enabled, segment heights vary by value. When disabled, all segments have equal height.

  • Height Scale: the height scale of the 3D doughnut chart.

  • Color: the color scheme of the 3D doughnut chart. For more information, see Color mapper.

  • Decimal Merge: limits the number of displayed slices and merges the remaining slices into one combined slice. You can set the name of the merged category. Click the icon to enable or disable decimal merge.

  • Ring Chart Labeling: the labeling style of the doughnut chart. Click the icon to enable or disable the labeling configuration.

    Metric	description
    Type	The data type and display type of the label. Data type valid values: Percentage and Default. Display type valid values: Common and Spider. Note If you have more than three data entries, we recommend that you set the Display Type to Normal.
    Labeling Field	The label field of the doughnut chart. Valid values: name + value, name, and value.
    Delimiter	The delimiter for the label field. Enter br to insert a line break. This parameter is available only when the label field is set to Name + Value.
    Decimal Places	The number of decimal places for the label value.
    Row Height	The row height of the label field, in px. This parameter is available only when the label field is set to Name + Value.
    Spacing	The distance between the label and the doughnut chart, in px.
    Text Style	The text style of the label field, including font style, weight, font size, and color.

• Animation: the animation style of the 3D doughnut chart.

  • Auto Rotate: when enabled, the doughnut chart rotates automatically. When disabled, the chart remains static.

    Note

    You can set the Auto Rotate type to Normal.

  • Rotation Direction: the rotation direction of the 3D doughnut chart. Valid values: Counterclockwise and Clockwise. This parameter is available only when Auto Rotate is enabled.

  • Rotation Speed: the rotation speed of the 3D doughnut chart. This parameter is available only when Auto Rotation is enabled.

• Interaction

  • Mouse Interaction: allows you to use the mouse to rotate, zoom, and pan the chart. Rotate and zoom operations are supported only when the label type is set to standard.

  • dialog box: the tooltip style that appears when you hover over or click a ring segment on the preview or published page. Click the icon to enable or disable the tooltip configuration.

    Metric	description
    Trigger	The trigger method for the dialog box. Valid values: Hover and Click.
    Display Position	The display position of the dialog box. Valid values: Up, Down, 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 Text	The style of the content text in the dialog box, including the font style, text weight, font size, and color.
    Pop-up background	The background style of the dialog box. Background Margin: the horizontal and vertical margins of the dialog box background. Background Color: The background color of the dialog box. Border Style: the style of the dialog box border, including the width and color of the border lines.

• Legend: the legend style of the doughnut chart.

  Metric	description
  Legend Switch	When enabled, you can configure the legend style. When disabled, you cannot configure the legend style.
  Direction	The orientation of the legend. Valid values: Horizontal and Vertical.
  Horizontal Alignment	The horizontal alignment of the legend. Valid values: Left, Center, and Right.
  Vertical Alignment	The vertical alignment of the legend. Valid values: Top, Center, and 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. Legend Marker: the size and shape of the legend marker. Legend Spacing: the horizontal and vertical distance between the legends of different categories.
  Allow Page Turning	When enabled, you can page through the legend when there are too many items. You can configure the page number style and arrow style. When disabled, all legend items are displayed on a single page. Page 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.

• Effects: the shading and post-processing effects for 3D graphics.

  Metric	description
  Light and Shadows	Optional. The light and shadow rendering mode. Valid values: Show Color Only and Shading.
  Lighting effect	Displayed when Shading Effect is set to Shading. Main light source: set the intensity, color, horizontal and vertical rotation, projection, and shadow quality of the main light source. Ambient Light: set the intensity and color of the ambient light.
  Late Effect	The post-processing effects for 3D graphics. Highlights: set the glow intensity for highlights in the post-processing effects. Depth of field: set the depth of field size and blur radius in the post-processing effects.

• Condition: conditional style settings for the chart.

  Conditional 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 current conditional style configuration and add a conditional style with the same configuration. For more information about how to configure a conditional style, see Use conditional trees.

  Fan Color: when enabled, you can configure the fan color for the condition. When disabled, the fan color is not configurable.

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 3D loop interface request is completed	Triggered after a data interface request is responded to and processed by a filter. The processed JSON data is passed with the event. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     When you click the ring chart	Triggered when a ring segment of the 3D doughnut chart is clicked. The data item corresponding to the clicked segment is emitted with the event.
     When the legend is clicked	Triggered when the legend of a 3D doughnut chart is clicked. The data item corresponding to the clicked legend is emitted with the event.

   • Action

     Action	Description
     Import 3D loop	After widget data is processed in its required format, the widget is imported for redrawing without requesting server data again. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     Request a 3D loop	Requests server data again, using data from an upstream data processing node or layer node as the request parameter. For example, if the API data source is https://api.test and the data passed to request 3D loop interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Move	Move a widget to a specified location. See the data example below. { // 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 the visibility of a widget. No parameters are required.
     Display	Display the widget. See the data example below. { "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	Hide the widget. See the data example below. { "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 in the data processing node in Blueprint Editor.