Scatter plot (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

  • Font family: The font family for all text in the component. The default is Microsoft YaHei.

  • Margin

    • Top: The distance between the scatter plot and the top border of the component, in pixels.

    • Bottom: The distance between the scatter plot and the bottom border of the component, in pixels.

    • Left: The distance between the scatter plot and the left border of the component, in pixels.

    • Right: The distance between the scatter plot and the right border of the component, in pixels.

  • Maximum records to load: Specifies the maximum number of data records to load and render. This limit helps ensure optimal performance.

• x-axis: The style of the x-axis. Click the icon to show or hide the x-axis.

  • Text

    • Color: The color of the x-axis text.

    • Font size: The font size of the x-axis text. The value must be between 10 and 100.

    • Font weight: The font weight of the x-axis text.

  • Axis label: The style of the x-axis labels. Click the icon to show or hide the labels.

    Note

    If the data format does not match the configured format, the component may not display correctly.

    • Data type: The data type of the x-axis labels. Options include:

      • Numeric: Supports numeric data such as integers and floating-point numbers.

      • Category: Supports categorical data such as characters and strings.

      • Time: Time-based data. You must configure the data format.

    • Data Format: The display format for the data. This setting is valid only for date/time data. Configure the setting based on the %Y/%m/%d %H:%M:%S format.

    • Display format: The expected display format for the data. This option is valid only for time and numeric data types. For time values, refer to %m/%d%Y%H:%M:%S. For integers, refer to d. For floating-point numbers, refer to .1f.

    • Maximum: The maximum value for the x-axis. You can enter a custom value. The default is auto, which automatically sets an appropriate value based on the data range and the number of labels.

    • Minimum: The minimum value for the x-axis. You can enter a custom value. The default is auto, which automatically sets an appropriate value based on the data range and the number of labels.

      Note

      By default, the minimum and maximum values of the axis label form a time range that is consistent with the data of the x field in the data panel. If the values in the data panel conflict with the minimum and maximum value range set in the configuration panel, the range defined in the configuration panel takes precedence.

    • Unit: The unit for the x-axis.

    • Count: The number of labels on the x-axis.

    • Angle: The angle of the x-axis labels. Options include Horizontal, Slanted, and Vertical.

  • Axis line: Configure the color and visibility of the axis line.

  • Grid lines: Configure the color and visibility of the grid lines.

• y-axis

  The configuration is similar to the x-axis. For details, refer to the x-axis settings above.

• Legend: The style of the chart legend. Click the icon to show or hide the legend.

  • Text

    • 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

      • Horizontal spacing: The horizontal distance between adjacent legend items. This setting applies only when there are multiple data series.

      • Vertical spacing: The distance between the legend and the top and bottom borders of the component.

    • Position: The position of the legend relative to the component's origin coordinates. Options are available.

• Tooltip: The style of the tooltip that appears when you hover over or click a point in preview or on the published page.

  Figure 1. Scatter plot tooltip style

  Figure 2. Scatter plot tooltip example

  • Trigger type: The target that triggers the tooltip. Options are Data Item and Axis.

  • Trigger action: The user action that displays the tooltip. Options are Hover and Click.

  • Hide delay: The delay in milliseconds (ms) before the tooltip hides after the trigger condition ceases.

  • Background box style: The style of the tooltip's background.

    • Background color: The background color of the tooltip.

    • Custom background size: The width and height of the tooltip, in pixels.

    • Padding: The internal padding of the tooltip, in pixels.

    • Horizontal offset: The horizontal offset of the tooltip relative to the mouse pointer's position, in pixels.

    • Vertical offset: The vertical offset of the tooltip relative to the mouse pointer's position, in pixels.

    • Border color: The border color of the tooltip.

    • Border width: The border width of the tooltip, in pixels.

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

    • 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: Configures the axis pointer, which appears only when Trigger Type is set to Axis.

    • Type: The type of axis pointer. Only Line Pointer is supported.

    • Line style: The color, width, and type of the pointer line. Type options include solid, dashed, and dotted.

• Data series: Click the or icon to add or delete a data series. This corresponds to the value of the s field in the Data panel.

  • Series name: The name of the data series. You can customize this name. If left empty, the system uses the value of the s field from the component's data as the series name. If you specify custom names, you must ensure your data source provides data for each series in the same order that you define them here.

  • Fill color: The fill color of the points in this series. For more information, see Color Picker guide. Both solid and gradient fills are supported.

  • Border color: The border color of the points in this series.

• Animation: The animation effects for the chart. Click the icon to enable or disable animations.

  • Initial animation duration: The duration of the initial rendering animation for the component, in milliseconds (ms).

  • Easing: The easing effect for the animation. The system provides several common easing effects to choose from.

  • Update animation duration: The duration of the animation when the component's data is updated, in milliseconds (ms).

Data

The following is the sample JSON code from the image above.

[
  {
    "x": "2010/02/01 00:00:00",
    "y": "175",
    "s": "1"
  },
  {
    "x": "2010/02/10 00:00:00",
    "y": "200",
    "s": "1"
  },
  {
    "x": "2010/03/01 00:00:00",
    "y": "125",
    "s": "1"
  },
  {
    "x": "2010/03/20 00:00:00",
    "y": "190",
    "s": "1"
  },
  {
    "x": "2010/04/01 00:00:00",
    "y": "190",
    "s": "2"
  },
  {
    "x": "2010/04/21 00:00:00",
    "y": "240",
    "s": "2"
  },
  {
    "x": "2010/04/30 00:00:00",
    "y": "225",
    "s": "2"
  },
  {
    "x": "2010/05/09 00:00:00",
    "y": "150",
    "s": "2"
  },
  {
    "x": "2010/05/31 00:00:00",
    "y": "230",
    "s": "2"
  },
  {
    "x": "2010/06/11 00:00:00",
    "y": "190",
    "s": "2"
  },
  {
    "x": "2010/06/30 00:00:00",
    "y": "275",
    "s": "3"
  },
  {
    "x": "2010/07/15 00:00:00",
    "y": "300",
    "s": "3"
  },
  {
    "x": "2010/07/21 00:00:00",
    "y": "375",
    "s": "3"
  },
  {
    "x": "2010/08/15 00:00:00",
    "y": "290",
    "s": "3"
  },
  {
    "x": "2010/09/01 00:00:00",
    "y": "190",
    "s": "3"
  },
  {
    "x": "2010/09/10 00:00:00",
    "y": "230",
    "s": "3"
  },
  {
    "x": "2010/10/29 00:00:00",
    "y": "325",
    "s": "3"
  },
  {
    "x": "2010/11/22 00:00:00",
    "y": "390",
    "s": "3"
  },
  {
    "x": "2010/11/30 00:00:00",
    "y": "290",
    "s": "3"
  },
  {
    "x": "2010/12/25 00:00:00",
    "y": "330",
    "s": "3"
  }
]

• x: The category for each point, which is the value on the x-axis. The type and format of this field must match the Data type and Data format settings for the x-axis label.

• y: The value of each point, which is the value on the y-axis.

• s: (Optional) The series value. This value is used when the Series name in the Data series configuration is left empty.

Interaction

Select Enable to activate the component's interaction features. Clicking a point on the scatter plot triggers a callback. This callback passes data from the clicked point, which you can use to update other components. By default, the x, y, and s values from the data are passed. For more information, see Configure component callback IDs.

Blueprint Editor interaction

1. On the canvas editor page, right-click the 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 scatter plot component in the Imported Nodes pane. The configuration parameters for the scatter plot are displayed on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When scatter plot API request is complete	Triggered after a data request is complete and any filters have been applied. It also passes the processed data in JSON format. For details about the data, see the data example in this article.
     When a data item is clicked	An event that is triggered when a point on the scatter plot is clicked. It also passes the data item corresponding to that point.

   • Actions

     Action	Description
     Request scatter plot data	Re-requests data from the server. Data passed from upstream data processing nodes or layer nodes is used as a parameter. For example, if the scatter plot is configured with an API data source of http://api.test and the data passed to the Request scatter plot data action is { id: '1'}, the final request URL will be http://api.test?id=1.
     Import data for scatter plot	Updates the component with the provided data and redraws it. This action does not re-request data from the server. For details about the data, see the data example in this article.
     Highlight	Highlights the element corresponding to a data item. The following is a sample parameter. { data: { x: 'Shanghai' // Multiple highlight conditions can be listed, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Clear highlight	Removes the highlight from an element corresponding to a data item. The following is a sample parameter. { data: { x: 'Shanghai' }, options: { mode: 'single' // When set to 'single', only one highlight is removed if multiple data items match. When set to 'multiple', all highlights are removed if multiple data items match. } }
     Update component configuration	Dynamically updates the component's configuration. To use this action, first copy the configuration data using the Copy Configuration to Clipboard button in the component's Configuration panel. Then, use a data processing node to modify the data before passing it to this action.
     Show	Shows the component. No parameters are required.
     Hide	Hides the component. No parameters are required.
     Toggle visibility	Toggles the visibility of the component between shown and hidden.
     Move	Moves the component to a specified position. { // Movement type. Absolute positioning: 'to', relative positioning: 'by'. Default: 'to'. "positionType": "to", // Target position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Options include: 'linear', 'easeInOutQuad', 'easeInOutExpo'. "animationEasing": "linear" } }