11.11 icon proportion chart

Chart style

The icon chart - 11.11 Global Shopping Festival is a basic chart that lets you customize icons and content to visually represent the ratio between two categories. It is ideal for displaying category ratios in visualizations for the 11.11 Global Shopping Festival, for example, to show the ratio of male to female buyers for a specific product.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. 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.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • 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.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 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.

• Icon

  • Icon 1: Sets the display icon for category A. Click the image box to upload a local image or replace the current one. Alternatively, enter an image URL to use a remote image.

  • Icon 2: Sets the display icon for category B. Click the image box to upload a local image or replace the current one. Alternatively, enter an image URL to use a remote image.

  • layout: Sets the layout for the category labels. Options are:

    • vertical: Arranges labels vertically and hides the label bar.

    • horizontal: Arranges labels horizontally and shows the label bar, allowing you to customize the category labels.

• Style

  Parameter	Description
  Icon width	The width of each category icon, in pixels. The value can range from 0 to 1,000.
  Icon height	The height of each category icon, in pixels. The value can range from 0 to 1,000.
  Font size	The font size of the category label text. The value can range from 0 to 100.
  font family	The font family for the category label text. The default value is Microsoft YaHei.
  font color	The font color of the category label text. For more information, see color picker.
  Icon offset	The horizontal offset of each icon relative to the center of the component, in pixels. The value can range from 0 to 1,000.

• Space between icon and text: When the layout is vertical, this property controls the distance between the text and the bottom edge of the component. When the layout is horizontal, it controls the distance between an icon and its corresponding label text. The value is in pixels and ranges from 0 to 1,000.

• Text spacing: When the layout is vertical, this property controls the space between the label text and the side edges of the component. When the layout is horizontal, it controls the vertical space between the category name and its corresponding value. The value is in pixels and ranges from 0 to 20.

• decimal places: Sets the number of decimal places for the numeric value in the label.

Data panel

Fields

Interaction panel

This component has no configurable events in the Interaction panel.

Blueprint Editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the icon chart - 11.11 Global Shopping Festival component in the imported nodes panel. The configuration parameters for the component appear on the canvas, as shown in the following figure.

   • Events

     Event	Description
     On data fetched	This event is triggered after the data request is successful and the response has been processed by any data filters. The processed data is passed as a JSON object. For a data sample, see the data response area on the Data tab of the configuration panel.
     On data fetch failed	This event is thrown when a data interface request fails, for example, due to network issues or an interface error. The event is triggered after the response is processed by a filter and provides the processed data in JSON format. For a data example, see the Data Response area on the Data tab of the configuration panel on the right side of the component in the canvas editor.

   • Actions

     Actions	Description
     Request data	Triggers a new data request. Data from upstream nodes is passed as parameters. For example, if the API data source is set to https://api.test and the data passed to the Request data action is { id: '1'}, the final request URL will be https://api.test?id=1.
     Import data	Imports data directly into the component and redraws it, bypassing a server request. For a data sample, see the data response area on the Data tab of the configuration panel.
     Update component configuration	Dynamically updates the style configuration of the component. To use this action, first copy the component's configuration by clicking Copy configuration to clipboard in the configuration panel. Then, modify the desired style values in a data processing node within the Blueprint Editor.
     Show	Shows the component. See the sample data below. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Hide	Hides the component. See the sample data below. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Toggle visibility	The following sample data shows how to show or hide a component. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     Move	Moves the component to a specified position. See the sample data below. return { // Movement type. Use 'to' for absolute positioning and 'by' for relative positioning. Default: 'to'. "positionType": "to", // Target position (x and y coordinates). "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Easing function. Options: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } };