radio-buttons

Chart style

The radio button is a control widget that serves as a single-selection form in visualization applications. It submits user-selected data to the backend for processing or displays the selected content on other widgets through interaction configuration.

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, 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 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. A value of 0 hides the widget. A value of 1 fully displays the widget. Default value: 1.

• Global Style

  Parameter	Description
  Selected by Default	The option selected by default. Note By default, the selected content must match one of the value values in the data source configuration.
  Arrangement	The arrangement type. Valid options: Vertical and Horizontal.
  Button radius	The radius of the radio button.
  Spacing	The spacing configuration for options. You can configure Inter-Option Spacing and Intra-Option Spacing. Spacing Between Options: the distance between options. Spacing Within Option: the distance between the radio button and the text.

• Normal Style

  • Text Style

    Parameter	Description
    Font	The font of the text. Default value: Microsoft Black.
    Text weight	The font weight of the text.
    Font size	The font size of the text.
    Color	For more information about how to modify the text color, see color picker description.

  • Button Style

    Parameter	Description
    Background color	The background color of the radio button.
    Borders	The border style of the button, including border width, border color, corner radius, and line type.

• Selected Style: the style of the radio box that is selected.

  • Text Style

    Parameter	Description
    Font	The font of the text when the option is selected. Default value: Microsoft Black.
    Text weight	The font weight of the text when the option is selected.
    Font size	The font size of the text when the option is selected.
    Color	The text color when the option is selected. For more information, see color picker description.

  • Button Outer Circle Style

    Parameter	Description
    Background color	The background color of the outer circle when the option is selected.
    Shadow Color	The shadow color of the outer circle when the option is selected.
    Border Style	The border style of the button when the option is selected, including border width, border color, corner radius, and line type.

  • Button Internal Style

    Parameter	Description
    Background color	The inner background color of the button when the option is selected.
    Border Fillet	The corner radius of the inner button when the option is selected. Valid values: 0 to 360. A value of 0 makes the inner border square, and a value of 360 makes it circular.

Data Sources panel

Advanced Panel

Enable the switch to use the associated global variable feature. When a radio button is clicked, a data request is triggered and a temporary variable is emitted. The temporary variable can be configured and used in other widgets. By default, the value and disabled values configured in the Data Source panel are displayed. 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	Notes
     When the data interface request is completed	Triggered after a data interface request is completed 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 the radio button is clicked	Triggered when a radio button is clicked. The data item corresponding to the selected value is emitted. See the following data example. { "value": "A", "disabled": true }

   • Action

     Action	Notes
     Import data	Imports pre-processed data in the widget's drawing format for redrawing without requesting server data again. See the following data example. { "value": "A", "disabled": true }
     Request Data Interface	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 request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Set the value of the current radio box	Sets the selected value in the current radio button. See the following data example. { "value": "A" }
     Obtain the current value	Retrieves the currently selected value. No parameters are required.
     Clear a component to its default value	Resets the widget to the default selected value. No parameters are required.
     Move	Moves the widget to a specified location. See the following 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 duration in which animation is displayed. "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	Displays the widget. See the following 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	Hides the widget. See the following 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	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data. Then modify the style field in the data processing node in Blueprint Editor.