Radar chart (versions earlier than v3.0)

Configuration

• 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 Settings

  Parameter	Description
  Font Family	The font family for all text in the component. The default is Microsoft YaHei.
  Margin	The distance between the radar chart area and the component's four boundaries. Top: The distance between the radar area and the upper border of the component, in px. Bottom: The distance between the radar area and the bottom border of the component, in px. Left: The distance between the radar area and the left border of the component, in px. Right: The distance between the radar area and the right border of the component, in px.
  Value label	Configures the style of the value labels on the chart. Click the icon to show or hide the value labels. Text Font size: The text size of the value label. Color: The text color of the value label. To modify the color, see Color picker instructions. Font weight: The font weight of the value label.

• Angle axis: The style of the angle axis.

  Text

  Parameter	Description
  Font size	The font size of the text on the angle axis.
  Color	The color of the text on the angle axis. For more information, see Color picker.
  Font weight	The font weight of the text on the angle axis.
  Rotation Angle	Sets the rotation angle of the axis, from 0 to 360.

• Polar axis: The style of the polar axis.

  • Text

    Parameter	Description
    Font size	The font size of the text on the polar axis.
    Color	The color of the text on the polar axis.
    Font weight	The font weight of the text on the polar axis.

  • Axis label: The style of the labels on the polar axis. You can click the icon to show or hide the labels.

    Parameter	Description
    Minimum	The minimum value of the axis. The default is 0.
    Maximum	The maximum value of the axis. The default, auto, calculates a value based on the data.

  • Axis line: The style of the polar axis line. You can click the icon to show or hide the axis line.

    Color: The color of the axis line.

  • Grid line: The style of the grid lines for the polar axis. You can click the icon to show or hide the grid lines.

    Color: The color of the grid line.

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

  • Text

    Parameter	Description
    Font Size	The font size of the legend text.
    Color	The color of the legend text.
    Font weight	The font weight of the legend text.

  • Layout

    • Spacing

      Parameter	Description
      Horizontal Spacing	The horizontal distance between adjacent legend items. This option applies only when there are multiple data series.
      Vertical spacing	The vertical distance between the legend and the top and bottom boundaries of the component.

    • Position: The position of the legend relative to the origin coordinates of the component.

• Tooltip: The style of the tooltip that appears when you hover over or click the radar chart area on the preview or published page.

  • Trigger: The action that causes the tooltip to appear. This setting is optional and includes Hover and Click.

  • Hide Delay: The delay, in ms, before the tooltip disappears after the trigger conditions are no longer met.

  • Background style: The background style of the tooltip.

    Parameter	Description
    Background Color	The background color of the tooltip.
    Custom Background Box Size	The width and height of the tooltip, in px.
    Padding	The internal padding of the tooltip, in px.
    Horizontal Offset	The horizontal offset of the tooltip relative to the cursor position, in px.
    Vertical offset	The vertical offset of the tooltip relative to the cursor position, in px.
    Border Color	The border color of the tooltip.
    Border thickness	The border width of the tooltip, in px.

  • Text Style: The style of the text in the tooltip.

    Parameter	Description
    Color	The color of the tooltip text.
    Font family	The font family of the tooltip text.
    Font size	The font size of the tooltip text.
    Font weight	The font weight of the tooltip text.

  • Axis pointer: The style of the axis pointer displayed when the tooltip's trigger type is axis and a trigger action is performed.

    Parameter	Description
    Type	Currently, the only supported type for the axis pointer is line indicator.
    Leader line style	Indicator line color, width, and type (optional, including Solid line, Dashed line, or Dotted line).

• Data series: Click the or icon on the right to add or delete a data series.

  Parameter	Description
  Series value	The identifier for the data series, which corresponds to the s field in the data panel.
  Series Name	The name of the data series, which appears in the legend. This name can be customized.
  Stroke Color	The stroke color of the radar chart for this series.
  Stroke Width	The stroke width of the radar chart for this series, in px. The value range is 0 to 10.
  Fill color	The fill color of the radar chart for this series.

• Animation: Sets the animation style for the chart. You can click the icon to enable or disable animation effects.

  Parameter	Description
  Initial Animation Duration	The duration of the initial rendering animation, in ms.
  Easing	The easing effect for the animation. A variety of common easing effects are available.
  Animation by Series	When enabled, each data series animates in sequence. If disabled, they animate simultaneously.
  Update Animation Duration	The animation duration (in ms) when data is updated.

Data

The sample JSON code in the figure above is as follows.

[
{
    "x": "Inner Mongolia",
    "y": "375",
    "s": "1"
  },
  {
    "x": "Inner Mongolia",
    "y": "180",
    "s": "2"
  },
  {
    "x": "Zhejiang",
    "y": "200",
    "s": "1"
  },
  {
    "x": "Zhejiang",
    "y": "100",
    "s": "2"
  },
  {
    "x": "Liaoning",
    "y": "25",
    "s": "1"
  },
  {
    "x": "Liaoning",
    "y": "125",
    "s": "2"
  },
  {
    "x": "Jilin",
    "y": "190",
    "s": "1"
  },
  {
    "x": "Jilin",
    "y": "110",
    "s": "2"
  },
  {
    "x": "Heilongjiang",
    "y": "90",
    "s": "1"
  },
  {
    "x": "Heilongjiang",
    "y": "60",
    "s": "2"
  },
  {
    "x": "Anhui",
    "y": "240",
    "s": "1"
  },
  {
    "x": "Anhui",
    "y": "170",
    "s": "2"
  },
  {
    "x": "Fujian",
    "y": "420",
    "s": "1"
  },
  {
    "x": "Fujian",
    "y": "190",
    "s": "2"
  }
]

Table 1. Fields

Interaction

Interaction events for this component are configured in the Blueprint Editor.

Blueprint Editor interaction

1. On the Canvas Editor page, right-click a component and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the radar chart component in the Import Nodes pane to view its configuration parameters on the canvas, as shown in the following figure.

   • Event

     Event	Description
     When the radar chart API request completes	Triggered after a data API request is returned and processed by filters. This event passes the processed data. For the data format, see the Data section.
     When a data item is clicked	Triggered when a user clicks a vertex (data point) on the radar chart. The event passes the data for that vertex.

   • Action

     Action	Description
     Request the radar chart API	Re-requests data from the server, using the data output by upstream data processing nodes or layer nodes as parameters. For example, if a basic radar chart is configured with the API data source http://api.test, and the data passed to the Request Basic Radar Chart API action is { id: '1'}, then the final request URL is http://api.test?id=1.
     Import radar chart API	Updates the chart with the provided data without sending a new server request. The input data is processed and used to redraw the component. For the data format, see the Data section.
     Highlight	Highlights the chart element corresponding to a data item. The following code shows an example of the parameters. { data: { x: '2010/01/01' // You can list multiple highlight conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Remove Highlight	Removes the highlight from the chart element corresponding to a data item. The following code shows an example of the parameters. { data: { x: '2010/01/01' }, options: { mode: 'single' // When 'single', only one highlight is removed if multiple items match. When 'multiple', all highlights are removed if multiple items match. } }
     Update Component Configuration	You can dynamically update the style configuration of a component. First, in the component's Configuration panel, click Copy configuration to clipboard to obtain the component configuration data. Then, in the data processing node on the Blueprint Editor configuration page, change the field values for the corresponding styles as needed.
     Display	Shows the component. No parameters are required.
     Hide	Hides the component. No parameters are required.
     Toggle visibility	Toggles the visibility of the component. The following code shows an example of the parameters. { // true to show, false to hide. "status": true, // Show animation. "animationIn": { // Animation type. 'fade' is an option. No animation if left blank. "animationType": "fade", // Animation duration in ms. "animationDuration": 1000, // Easing function. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" }, // Hide animation. "animationOut": { // Animation type. 'fade' is an option. No animation if left blank. "animationType": "fade", // Animation duration in ms. "animationDuration": 1000, // Easing function. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }
     Move	Moves the component to a specified position. The following code shows an example of the parameters. { // Movement type. 'to' for absolute positioning, 'by' for relative positioning. Default is 'to'. "positionType": "to", // Target position: x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration in ms. "animationDuration": 1000, // Easing curve. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }