basic-scatter-chart

Chart style

A basic scatter chart uses scatter points to represent data, making it ideal for comparing discrete data across different time points. You can customize the x-axis, y-axis, and scatter styles, configure multiple data series, and enable dialog box interaction and animation effects.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the search panel, enter the name of a configuration item to locate it. 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 position of the widget. Unit: 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: Rotate the widget by a specified number of degrees.

    • Enter the degrees directly in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the value.

    • 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 makes the widget fully visible. Default value: 1.

• Chart name

  • Custom Margins: Click the icon to enable custom margins, which set the distance between the scatter plot area and the four boundaries of the widget. Unit: px.

  • Scatter Style: the style of the scatter points.

    Parameter	Description
    Size	The size of the scatter points.
    The color of the font outline. For more information, see Color setting parameters.	The color of the scatter stroke.
    Stroke Weight	The stroke weight of the scatter points.
    Stroke Type	The stroke type of the scatter points. Valid values: Solid, Dashed, and Dotted.
    Fill Transparency	The fill transparency of the scatter points. Valid values: 0 to 1.

  • Value Label: the value label style of the basic scatter chart. You can click the icon to show or hide value labels.

    Parameter	Description
    Text Style	The font style, text weight, font size, and color of the value label text.
    Offset	The horizontal and vertical offset of the value label.

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

    Parameter	Description
    Allow Page Turning	When enabled, page turning is available if the legends exceed the display area. When disabled, page turning is not available.
    Layout	The position of the legend relative to the widget. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, or Bottom Left.
    Legend Tags	The legend tag style, including its shape and size.
    Legend Text	The legend text style, including the font style, weight, size, and color.

• Coordinate Axis: The coordinate axes of the widget include the x-axis and y-axis.

  • X Axis

    • X Axis Visible: When the switch is turned on, the x-axis is visible. When the switch is turned off, the x-axis is hidden.

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

      Parameter	Description
      Numerical Type	Supports numeric data such as integers and floating-point numbers.
      Category Type	Supports categorical data such as characters and strings.
      Time Type	Time-type data requires a configured data format.

    • Axis Label: the x-axis label style. You can click the icon to show or hide axis labels.

      Note

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

      Parameter	Description
      Display Format	The display format of the data. Valid only for time-based and numeric data. For time data, use the format YYYY/MM/DD HH:mm:ss. For integers, use d. For floating-point numbers, use .1f.
      Text Style	The font style, weight, font size, and color of the x-axis label text.
      Custom Quantity	The number of x-axis labels to display. Click the icon to customize the number of labels.

    • Axis Title: the x-axis title style. You can click the icon to show or hide the axis title.

      Parameter	Description
      Title Content	The text content of the x-axis title.
      Offset	The offset value of the x-axis title. Unit: px.
      Text Style	The font style, text weight, font size, and color of the x-axis title text.

    • Axis: the style of the x-axis. You can click the icon to display the x-axis.

      Color: the color of the x-axis.

    • Gridlines: the style of the x-axis gridlines. You can click the icon to display or hide the x-axis gridlines.

      Color: the color of the x-axis grid lines.

  • Y-axis

    • Y Axis Visible: When the switch is turned on, the y-axis is visible. When the switch is turned off, the y-axis is hidden.

    • Custom Range: The minimum and maximum value range of the y-axis. Click the icon to enable a custom range.

      Parameter	Description
      Minimum value	The minimum value of the y-axis. You can enter a custom value or select a predefined option. 0: The default minimum value is 0. Minimum Data Value: Uses the minimum value from the data.
      Maximum value	The maximum value of the y-axis. You can enter a custom value, or select Maximum Data Value to use the maximum value from the data.

      Note

      Enabling a custom data range for the y-axis may cause some data points to be clipped. We recommend that you disable the custom range unless needed.

    • Display Format: the display format of the y-axis label value. Valid values: Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%, 11.1%, and 11.11%. For more information, see Data display formats.

    • Axis Label: the y-axis label style. You can click the icon to show or hide the y-axis label.

      Parameter	Description
      Text Style	The font style, text weight, font size, and color of the y-axis label text.
      Custom Quantity	The number of y-axis labels to display. Click the icon to customize the number of labels.

    • Axis Title: the y-axis title style. You can click the icon to show or hide the y-axis title.

      Parameter	Description
      Title Content	The text content of the y-axis title.
      Offset	The offset value of the title on the y-axis. Unit: px.
      Text Style	The font style, text weight, font size, and color of the title text on the y-axis.

    • Axis: the style of the y-axis. You can click the icon to display the y-axis.

      Color: the color of the y-axis.

    • Gridlines: the style of the y-axis gridlines. You can click the icon to display or hide the gridlines.

      Color: the color of the grid lines on the y-axis.

• Edition

  • CSV Data: If you turn on the CSV Data switch, you can directly use CSV columns to map values and data series. If you turn off the Series Mapping switch, the configuration items takes effect. You can click the icon to display or hide the CSV data switch.

    Parameter	Description
    Automatic field parsing	When enabled, the widget automatically parses and displays the fields. When disabled, fields are not automatically parsed.
    Only numeric fields	When enabled, only numeric fields are parsed from CSV data. When disabled, all fields are parsed.

  • data series: Click the or icon on the right to add or delete a data series. Click the or icon to configure the arrangement style of multiple data series. Click the icon to copy the selected data series configurations and add a data series with the same configurations.

    Parameter	Description
    Mapping Field	Column Name /Field Name and Series Name configuration items. This parameter takes effect only when you turn on CSV Data and turn off Auto Parse Field configuration items. Column Name /Field Name: the data series field value. You can customize the field value. If the field is empty, the system displays the s field value in the widget data as the series field value. If this parameter is not empty, you must ensure the order in which data is returned. Series Name: the display name of the data series, which can be customized. Series S Value and Series Display configuration items take effect only when CSV Data is hidden and the Series Mapping configuration items switch is turned on. Series s Value: the data series mapping value, which can be customized. If the field is empty, the system displays the value of the s field in the widget data as the series field mapping value. If this parameter is not empty, you must ensure the order in which data is returned. Series Display: the display name of the data series, which can be customized.
    Fill Color	The fill color of the basic scatter plot in this series.

  • Series Mapping: When enabled, the switch takes effect when the data contains series s values. Use the Mapping Field to set the color of a specific series. When disabled, the Mapping Field configuration is not available.

• Remarks

  • Interaction Enhancement for Large-scale Data: If the scatter chart contains a large amount of data, you can configure the interaction enhancement style to improve performance. Click the icon to enable or disable this feature.

    Parameter	Description
    How to run the commands	The data interaction mode. Valid values: Sum Axis and Scroll Bar. Note Interaction enhancement for large-scale data is not supported when the data type is time-based.
    Default Range	The data range displayed on the thumbnail axis, from 0 to 1. Available only when the thumbnail axis style is enabled.
    Mode	The foreground and background colors of the thumbnail axis. Available only when the thumbnail axis style is enabled.
    Direction	The scroll bar direction: Horizontal or Vertical. Available only when the Scrollbar style is enabled.
    Type Width	The width of the data category column. Available only when the Scrollbar style is enabled.

  • dialog box: the dialog box style that appears when you hover over or click a scatter point on the preview or published page. Click the icon to enable or disable the dialog box.

    Parameter	Description
    Indicator	The indicator style, including width, color, direction (cross, horizontal, and vertical), and type (solid line, dotted line, and dotted line). Click the icon to enable or disable the indicator.
    Background Box Style	The background box style of the dialog box. Background Color: the background color of the dialog box. Pin: the inner margin of the dialog box. Unit: pixels. Borders Border: the border thickness of the dialog box. Unit: pixels. Border Color: The border color of the dialog box.

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 scatter chart interface request is completed	Triggered with the processed JSON data after a data interface request is responded to and processed by a filter. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     When a data item is clicked	Triggered when a scatter point is clicked, along with the data item corresponding to the clicked point.
     When you click the legend	Triggered when a legend item is clicked, along with the data item corresponding to the legend.

   • Action

     Action	Description
     Import a scatter chart	After widget data is processed into the required drawing format, it is imported for redrawing without requesting server data again. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.
     Request Scatter Chart API	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 Scatter Chart API is { id: '1'}, the final request URL is https://api.test?id=1.
     Highlight	data: the data item to be highlighted. { x: 'Inner mongolic' } Reference data example { "data": {}, "options": {} }
     Unhighlight	Removes the highlight and restores the default display. No parameters are required.
     Move	Moves the widget to a specified location. See the data example below. { // 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" } }
     Switch Display /Display	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Displays the widget. See the data example below. { "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 data example below. { "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 widget configuration data. Then modify the style field in the data processing node in Blueprint Editor.