donut-chart-with-image

Chart style

A donut chart with image is a type of pie chart. Compared with a basic pie chart, it uses a polar axis to determine the chart position and size and supports a center image that conveys the meaning of the entire pie chart, helping you display multi-dimensional data proportions more clearly.

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 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 icon to flip the widget style.

    • Click the icon 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

    Parameter	Description
    Center Image	The image in the center of the pie chart. Move the pointer over the image, click Delete Current Image, and then click Upload Local Image again. If you want to use an image on a remote server, enter the URL of the image.
    Maintain aspect ratio	Turn on the switch to maintain the width-to-height ratio of the center image.
    Scaling	You can set the overall zoom ratio of the center image only when you turn on Maintain Aspect Ratio. Valid values: 0 to 1.
    Image Size	You can set the ratio between the width and height of the image only when you turn off Maintain Width Ratio. Valid values: 0 to 1.
    Image Transparency	The transparency of the image. Valid values: 0 to 1.

  • Value Label: Click the icon to display or hide the value label.

    Parameter	Description
    Text	The font style, text weight, font size, and color of the numeric label text.
    Real Value	Turn on the switch to display the actual data value. Turn off the switch to display the percentage.
    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 Line: the position of the label guide line in the pie chart. You can click the icon to display or hide 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 the value is too small, the label may overlap the center area.

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

    Parameter	Description
    Text	The style of the legend text, including font style, font size, font color, and font weight. To change the text color, seecolor picker.
    Layout	The layout of the legends relative to each other. Spacing Left and Right Spacing: The horizontal distance between adjacent legends. This setting takes effect only when multiple series exist. 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 polar 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 or icon on the right to add or delete a data series. Click the or icon to configure the arrangement style of multiple data series. Click the icon 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

  • Emotion 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	Eating 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: Turn on the switch to play each series animation in sequence. Turn off the switch to play all sector animations simultaneously. Start at Zero: Turn on the switch to animate each sector from zero during the initial render. Turn off the switch to animate all sectors from their starting positions simultaneously.
    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: Turn on the switch to start the animation from the previous position when data is updated. Turn off the switch to start from the initial position.

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

    Parameter	Description
    Disappearing Delay Time	The delay in milliseconds before the dialog box disappears after the trigger condition is no longer met.
    Trigger	Trigger Action: The action that triggers the dialog box. Valid values: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

Advanced Panel

When you click a data item: Turn on the switch to enable widget interaction. When a donut chart with image 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 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 donut chart with image 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 with image sector is clicked, along with the data item corresponding to that sector.

   • Action

     Action	Description
     Import donut chart with image 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 with image 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 with image the API data source is configured as https://api.test and the data transferred to the request donut chart with image 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	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.