Radar charts

Chart style

A radar chart visually compares multi-dimensional category data. The angle axis displays categories and the polar coordinate axis displays values. You can customize text, graphics, and animation styles.

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: The widget is rotated around the center of the widget. Unit: 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.

• Graphics

  Metric	description
  Chart Margins	Click the icon to toggle chart margins. When enabled, you can set the distance between the radar area and the four boundaries of the widget. Unit: px by default.
  Radar radius	The radius of the radar area. Unit: %.
  Radar Stroke	The stroke style of the radar area, including the line type and thickness. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.
  Radar Color	The color of the radar area. For more information, seeColor mapper instructions.
  Edge Color Synchronization	Specifies whether the edge color matches the radar color. Valid values: synchronous and asynchronous.
  Edge Color	The color of the radar boundary. Available only whenDissync for Edge Color Synchronization.
  Opacity	The opacity of the radar line and area. A larger value makes the radar more opaque. Unit: %.
  Marking symbol	The marker symbol style at each radar boundary point, including the shape, size, stroke line type, and stroke weight. Click the icon to toggle the marker symbol display. Note If you set the Type parameter to Dashed or Dotted, you can set the Discontinuity Length parameter and the distance between each line.
  Symbol color synchronization	Specifies whether the symbol color matches the radar color. Valid values: synchronous and asynchronous.
  Symbol Color	The color of the radar symbol. This parameter is available only when you set Symbol Color Synchronization to Not Synchronized.
  Symbol Stroke	When enabled, you can customize the marker symbol stroke color. When disabled, the stroke color follows the radar area color by default.
  Radar Tag	The label style of the radar. Click the icon to toggle radar label settings. Label Field: The label field content must match the field on the Data tab. By default, the r field is used. Value Format: The display format of the label value. Valid values:Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more information about data display formats, see Data display formats. This parameter is displayed only when you select r for the Label field. Prefix and Suffix: The prefix and suffix of the radar label. Relative Offset: The offset of the radar label relative to the radar area. Unit: pixels. Text Style: The text style of the radar label, including the font style, weight, size, and color. Text Stroke: The stroke style of the radar label, including the thickness and color.

• Coordinate: the Radius Axis and Angle Axis styles of the widget.

  • Radius axis

    • Radius Axis: Toggles the visibility of the inner radius axis.

    • Display Range: The minimum and maximum values displayed on the radius axis.

      Metric	description
      Minimum Runtime Duration	The minimum value of the radius axis. You can enter a custom value or select Minimum Value to use the data minimum.
      Maximum Runtime Duration	The maximum value of the radius axis. You can enter a custom value or select Maximum Value to use the data maximum.

      Note

      By default, the data maximum and minimum values are used. To override them, select the drop-down box and enter custom values.

    • Axis: The radius axis style of the radar chart, including the line shape, thickness, and color. Click the icon to toggle the radius axis display.

      Note

      When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be set.

    • Axis Title: The title style of the radius axis. Click the icon to toggle the radius axis title display.

      Metric	description
      Title Display	The text content of the axis title.
      Display mode	The display mode of the axis title, including the title angle and offset.
      Text Style	The font style, weight, size, and color of the axis title text.

    • Axis Label: The axis label style of the radar chart. Click the icon to toggle the axis label display.

      Metric	description
      Display Format	The display format of the radius axis label. Valid values:Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more information about data display formats, see Data display formats.
      Label Display	The display style of the labels, including the label count, prefix, suffix, angle, offset, and alignment.
      Text Style	The font style, weight, size, and color of the axis label text.

    • Tick mark: The tick mark style of the radius axis, including the length, thickness, and color. Click the icon to toggle the tick mark display.

    • Grid Line: The grid line style on the radius axis. Click the icon to toggle the grid line display.

      Metric	description
      Display form	The grid line shape. Valid values:Curve or Line.
      Grid background color	The background color of the grid lines.
      Line Style	The line style of the grid lines, including the type, thickness, and color. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

  • Angle Axis

    • Angle Axis Display: Toggles the visibility of the angle axis style.

    • Data Type: The data type of the angle axis. Valid values:Numeric, Category, and Time.

    • Display Range: The minimum and maximum values displayed on the angle axis. Available only whenData Type is set to Numeric.

      Metric	description
      Minimum Runtime Duration	The minimum value of the angle axis. You can enter a custom value or select Minimum Value to use the data minimum.
      Maximum Runtime Duration	The maximum value of the angle axis. You can enter a custom value or select Maximum Value to use the data maximum.

      Note

      By default, the data maximum and minimum values are used. To override them, select the drop-down box and enter custom values.

    • Angle Range: The start and end angles of the angle axis. Unit: degrees. Click the icon to toggle the angle range display.

    • Axis: The angle axis line style, including the shape, thickness, and color. Click the icon to toggle the angle axis display.

      Note

      When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

    • Axis Title: The angle axis title style. Click the icon to toggle the angle axis title display.

      Metric	description
      Title Display	The text content of the axis title.
      Display mode	The display mode of the axis title, including the title angle and offset.
      Text Style	The font style, weight, size, and color of the axis title text.

    • Axis Label: The axis label style of the angle axis. Click the icon to toggle the axis label display.

      Metric	description
      Format x	The display format of the angle axis label value. Valid values:Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more information about data display formats, see Data display formats.
      Label Display	The display style of the label, including the prefix, suffix, angle, offset, and alignment.
      Text Style	The font style, weight, size, and color of the axis label text.

    • Tick mark: The tick mark style of the angle axis, including the length, thickness, and color. Click the icon to toggle the tick mark display.

    • Gridlines: The angle axis gridline style, including the line style, weight, color, length, and spacing. Click the icon to toggle the gridline display.

• Animation: The animation effect style of the widget.

  • Animation: The animation style of the chart. Click the icon to toggle animation display.

    • Animation Effect: The animation type. Valid values:Zoom, Move, and Fade.

    • Animation Duration: The duration of the animation effect. Unit: ms.

  • Sweep Animation: The sweep animation style of the chart. Click the icon to toggle the sweep animation.

    Important

    When sweep animation is enabled, interactive features such asSelected become invalid.

    • Highlight Style: The highlight height and intensity of the sweep animation.

    • Dynamic Effect: The animation duration and gap of the sweep animation. Unit: ms.

• Interactive: The interaction style of the widget.

  • Carousel: When enabled, the dialog box settings are applied and the dialog box is no longer triggered by interactions. Click the icon to toggle the carousel effect.

  • dialog box: The dialog box that appears when you hover over or click the radar area on the preview or publish page. Click the icon to toggle the dialog box.

    Metric	description
    Mode	The dialog box mode. Valid values:concise and universal.
    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. Note When the pointer is near the chart border, the dialog box position adjusts automatically.
    Title Spacing	The spacing between titles in the dialog box. Unit: pixels.
    Title Text	The title text style in the dialog box, including the font style, weight, size, and color.
    Content Display	Click the or icon on the right to add or delete a dialog box content series. Click the or icon to configure the arrangement style of multiple dialog box content display series. Click the icon to copy the current dialog box content display series configuration and add a dialog box content display series with the same configuration. Field Name: The field name of the dialog box content. Must match the field in the data panel. Display Name: The display name of the dialog box content. Suffix: The suffix of the dialog box content.
    Content Spacing	The spacing between dialog box content items. Unit: pixels.
    Content Text	The content text style in the dialog box, including the font style, weight, size, and color.
    Pop-up background	The pop-up 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 border style of the dialog box, including the line type, corner radius, width, and color.
    Axis indicator	The axis indicator line style, including the line type, thickness, and color. Click the icon to toggle the axis indicator. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be set.

  • Selected: The selected state of the radar field. Click the icon to toggle the selected state.

    Important

    When the Sweep Animation feature is enabled, the selected feature is disabled.

    Metric	description
    Trigger	The trigger method for the radar region. Valid values:Hover and Tap.
    Select Method	The selection method for the radar area. Valid values:Single Select and Multiple Select.
    Selected Color	The color of the selected radar area.
    Marking size	The size of the marker in the selected radar area. Unit: px.
    Mark Stroke	The stroke line style in the selected radar area, including the type, thickness, and color. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be set.

• Legend: The legend style of the widget.

  Metric	description
  Legend Switch	Toggles the legend configuration. When enabled, you can configure legend styles.
  Legend Position	The legend position relative to the widget's start coordinates. Valid values:Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.
  Text Style	The font style, weight, size, and color of the legend text.
  Category Legend	The category-specific legend style. Legend Marker: The size and shape of the legend marker. Legend Spacing: The horizontal and vertical spacing between legends of different categories. Maximum Width: The maximum width of the legend. Unit: pixels. Page Flip Allowed: When enabled, page number and arrow styles are available for the legend. When disabled, the legend content is displayed on a single page. Page Style: The page number style, including the font, weight, size, and color. Arrow Style: The size, default color, and disabled color of the page-flip arrows.

• Dimension: The dimension style settings.

  • Auxiliary Line: Click the or icon on the right to add or delete an auxiliary line series. Click the or icon to configure the arrangement style of multiple guide line series. Click the icon to copy the currently selected auxiliary line series configuration and add an auxiliary line series with the same configuration.

    • Data Value: the data values of auxiliary lines, including the average line, median line, maximum line, and minimum line.

    • Linetype Style: the linetype style of the auxiliary line, including the linetype, thickness, length, spacing, and color of the auxiliary line.

    • Text: specifies the content style of the guide line, including the text, data display switch, rotation angle, horizontal and vertical offset, and alignment position.

    • Text Background: specifies the background of the guide line, including the color of the background and the radius of the rounded corner.

    • Text Style: the text style of the guide line.

  • Line: Click the or icon on the right to add or delete a line series. Click the or icon to configure the arrangement style of multiple polyline series. Click the icon to copy the current polyline series configuration and add a polyline series with the same configuration. For more information about how to configure polylines in each series, see Use conditional trees.

    • Radar Color: If you turn on the switch, you cannot configure the color of the radar area in the condition pattern. If you turn off the switch, you cannot configure the color of the radar area in the condition pattern.

    • Radar Stroke: If you turn on the switch, you cannot configure the radar stroke line style in the specified condition style, including the line type, line thickness, and color. If you turn off the switch, you cannot configure the radar stroke line style in the specified condition style.

      Note

      When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

    • Marker Symbol: If you turn on the switch, you can configure the marker symbol style at the radar boundary point in the series of conditional styles, including the shape style, size, and color of the marker. If you turn off the switch, you cannot configure the marker symbol style.

    • Marker Stroke: If you turn on the switch, you can configure the style of the marker stroke in the conditional style series, including the line type, line thickness, and line style color. If you turn off the switch, you cannot configure the style of the marker stroke.

      Note

      When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

    • Text Dimension: the text dimension style of the line under the current line.

      • Text Content: specifies the text annotation content.

      • Offset: the horizontal and vertical offsets of the text annotation. Unit: pixels.

      • Orientation: the orientation of the text annotation relative to the text annotation point, including top, right, bottom, and left.

      • Text Background: specifies the background of the text annotation, including the color of the background and the radius of the rounded corners.

      • Text Style: the text style of the text content.

      • Text Line: specifies the line style of the text annotation, including the line type, color, weight, and length.

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 radar map interface request is completed	Triggered after a data interface request is processed by a filter, with the processed JSON data. For data examples, see theData Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     When the selected data item changes	Triggered when the selected data item changes, emitting the corresponding radar area data.
     When you click the legend	Triggered when a legend is clicked, emitting the corresponding radar area data.

   • Action

     Action	Description
     Import a radar chart	Imports pre-processed data to redraw the widget without re-requesting server data. For data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     Request a radar chart	Re-requests server data. Data from an upstream data processing node or layer node is used as a parameter. For example, if the API data source is set to https://api.test and the data passed to the Request Radar Chart interface is set to { id: '1'}, the final request interface is https://api.test?id=1.
     Highlight	Highlights a specified data item. Data example: { "data": {}, "options": {} }
     Unhighlight	Removes the highlight. No parameters are required.
     Move	Moves the widget to a specified location. 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" } }
     Toggle Display	Toggles widget visibility. No parameters are required.
     Display	Shows the widget. Data example: { "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	Hides the widget. Data example: { "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 get the configuration data, then modify the style field in the Blueprint Editor data processing node.