Radio button

Chart style

The radio button is a control widget. You can use it as a form in a visualization application to submit selected data to the backend for processing. You can also configure interactions to display the selected content on other widgets.

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.

• Global Styles

  Parameter	Description
  Default Selection	The option that is selected by default. Note The value for Default Selection must be one of the values from the value field in the data configuration.
  Arrangement	The arrangement of the radio buttons. Options: Vertical and Horizontal.
  Button Radius	The radius of the radio buttons.
  Spacing	The spacing style for the options. You can configure Spacing Between Options and Spacing Within Options. Spacing Between Options: The distance between options. Spacing Within Options: The distance between the radio button and its text.

• Normal Style

  • Text Style

    Parameter	Description
    Font	The font of the text. The default font is Microsoft YaHei.
    Font Weight	The font weight of the text.
    Font Size	The font size of the text.
    Color	The color of the text in the radio button. For more information, see Color picker.

  • Button Style

    Parameter	Description
    Background Color	The background color of the radio buttons.
    Border	The border style of the buttons, including the border width, border color, border radius, and line type.

• Selected Style: Configures the style of the radio button when it is selected.

  • Text Style

    Parameter	Description
    Font	The font of the text when the radio button is selected. The default font is Microsoft YaHei.
    Font Weight	The font weight of the text when the radio button is selected.
    Font Size	The font size of the text when the radio button is selected.
    Color	The color of the text when the radio button is selected. For more information, see Color picker.

  • Outer Circle Style

    Parameter	Description
    Background Color	The background color of the outer circle of the button when the radio button is selected.
    Shade Color	The shade color of the outer circle of the button when the radio button is selected.
    Border Style	The border style of the outer circle of the button when the radio button is selected. This includes the border width, border color, border radius, and line type.

  • Inner Button Style

    Parameter	Description
    Background Color	The background color of the inner part of the button when the radio button is selected.
    Border Radius	The border radius of the inner part of the button when the radio button is selected. The value ranges from 0 to 360. A value of 0 creates a square inner border. A value of 360 creates a circular inner border.

Data panel

Field descriptions

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Interaction panel

Select Enable to the right of When a radio button is clicked to enable widget interactions. The radio button widget supports interaction configuration. For example, when a user selects a different option, the widget can trigger a data request and return a callback value for other widgets to use. By default, the widget returns the value and disabled values configured on the Data panel. For more information, see How to configure the callback ID for a ticker board widget.

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 Radio Button widget in the Imported Nodes pane. The following figure shows the configuration parameters for the widget on the canvas.

   • Events

     Event	Description
     When the API Description Request Completes	The event that is triggered after the data API request is returned and processed by the filter. The processed data is also returned in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When Data Request Fails	The event that is triggered when the data API request fails (due to network issues, API errors, etc.) and is processed by the filter. The processed data is also returned in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When a Radio Button Is Clicked	The event that is triggered when a radio button is clicked. The data item corresponding to that value is also returned.

   • Actions

     Action	Description
     Request API	Requests data from the server-side again. The output data from input data processing nodes or layer nodes is used as parameters. For example, if a radio button selector has its API data source set to https://api.test and the data passed to the Request API action is { id: '1'}, the final request URL is https://api.test?id=1.
     Import data	Processes data into the component's drawing format. The data is then imported into the component to be redrawn. This action does not re-request data from the server-side. For data examples, see the Data Response area on the Data tab of the component's configuration panel in the canvas editor.
     Set current radio button value	Sets the value of the currently selected radio button. See the following data example. return {"value": "A"}
     Get current value	Gets the value of the currently selected radio button.
     Reset to default value	Reverts to the default selected value.
     Update component configuration	Dynamically updates the component's style configuration. First, get the component configuration data. In the component's Configuration panel, click Copy configuration to clipboard. Then, in the data processing node on the blueprint editor's configuration page, change the field values for the styles as needed.
     Show	Shows the component. See the following data example. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Hide	Hides the component. See the following data example. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Toggle visibility	Toggles the component's visibility. See the following data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     Move	Moves the component to a specified position. See the following data example. return { // The move type. Absolute positioning: to. Relative positioning: by. Default: to. "positionType": "to", // The specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation method. "animation": { "enable": false, // The animation delay. "animationDuration": 1000, // The animation curve. Optional values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } };