What are the configuration items of bubble chart? - DataV

This topic describes the meaning of each configuration items when you select full bubble chart.

Chart style

A bubble chart uses bubbles to display data. You can customize the size of the bubbles to visually and vividly display the differences between discrete data at multiple time points.

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 control the display of the chart margins. If you turn on the switch, you can configure the distance between the bubble chart area and the four boundaries of the widget. Unit: px by default.
Bubble shape	For more information about the bubble shape, see Use the shape mapper.
Bubble Size	For more information about the bubble size, see Use the size mapper.
Bubble Color	For more information about the color of bubbles, see Color mapper instructions.
Opacity	The opacity of the bubble point. Valid values: 0 to 1. A larger value indicates more opacity.
Bubble Stroke	The style of the bubble stroke, including the type, thickness, and color of the bubble 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.
Bubble Label	The label style of the bubble. Click the icon to display or hide the label configuration items. Label Field: The content of the label field must match the content of the field in the data panel. By default, the content of the y field is obtained. Value Format: Specify the value format of the tag. 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 data display formats, see Data display format description. This parameter is displayed only when y is selected for the Label field. Pre-Suffix: the prefix and suffix of the column tag. Relative Offset: the relative offset of the bubble label in the vertical and horizontal directions. Unit: pixels. Text Style: the text style of the bubble label, including the font style, weight, font size, and color of the text. Text Stroke: the text stroke style of the bubble label, including the thickness and color of the stroke line. Empty Data: If you turn on the switch, null data is hidden when the bubble radius is 0 and the bubble value is 0. If you turn off the switch, null data is not hidden.

Coordinates: the x-axis and Y axes of a widget.

X-axis

x-axis Display: If the switch is turned on, the x-axis style in the widget is visible. If the switch is turned off, the x-axis style in the widget is invisible.
Data Type: the type of the x-axis data. Valid values: Number, Category, and Time.

Display Range: the display range of the minimum and maximum values of the x-axis data. This parameter is available only when the Data Type configuration items is set to Numerical.

Metric	description
Minimum Runtime Duration	The minimum value of the x-axis. You can set this parameter to Minimum Value.
Maximum Runtime Duration	The maximum value of the x-axis. You can enter a custom value. You can also select Data Max to obtain the maximum value in the data.

Axis: the x-axis axis style of the bubble chart, including the line shape, line thickness, and line style. You can click the icon to control whether to x-axis the axis 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.

Axis Title: the x-axis axis title style of the bubble chart. You can click the 开关图标 icon to control the display of the x-axis axis title.

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

Axis Label: the x-axis axis label style of the bubble chart. You can click the 开关图标 icon to control the display of the x-axis axis label.

Metric	description
Display Format	The display format of the x-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. This parameter is available only when you set the x-axis Data Type parameter to Numeric.
End Spacing	The distance between the x-axis label and the two ends of the axis, in %.
Label Display	The display style of the label, including the number of labels on the x-axis axis, the prefix and suffix of the label, the angle value of the label, the offset, and the alignment of the label.
Text Style	x-axis the font style, weight, font size, and color of the label text.

Tick mark: the x-axis tick mark style of the bubble chart, including the length, thickness, and color of tick marks. You can click the icon to control whether to x-axis tick mark style.
Gridlines: the style of the x-axis grid lines in the bubble chart, including the line style, thickness, color, length, and spacing value of the grid lines. You can click the icon to control the appearance or inappearance of the x-axis grid lines.

Y-axis

Y-Axis Display: If you turn on the switch, the Y-axis display in the widget is visible. If you turn off the switch, the Y-axis display in the widget is invisible.
Data Type: the data type of the y-axis. Valid values: Number, Category, and Time.

Display Range: the display range of the minimum and maximum values of the Y-axis. This parameter is available only when you select Numerical configuration items Data Type.

Metric	description
Minimum Runtime Duration	The minimum value of the y-axis. You can specify a custom value. You can also select Minimum Value to obtain the minimum value of the data.
Maximum Runtime Duration	The maximum value of the y-axis. You can specify a custom value. You can also select Maximum Data Value to obtain the maximum value in the data.

Axis: the Y-axis style of the bubble chart, including the shape, thickness, and style of the line. You can click the icon to control the Y-axis style.

Axis Title: the Y-axis title of the bubble chart. You can click the 开关图标 icon to control whether the Y-axis title appears or not.

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

Axis Label: the Y-axis label style of the bubble chart. You can click the 开关图标 icon to specify whether the Y-axis label is displayed or hidden.

Metric	description
Display Format	The display format of the Y-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. This parameter is available only when you set the Data Type parameter to Numeric.
End Spacing	The distance between the two ends of the Y-axis label from the axis, in %.
Label Display	The display style of the label, including the number of Y-axis labels, the prefix and suffix of the label, the angle value of the label, the offset, and the alignment of the label.
Text Style	The font style, weight, font size, and color of the label text on the Y axis.

Tick Line: the tick line style in the Y-axis of the bubble chart, including the length, thickness, and color of the tick line. You can click the icon to control whether the tick line style is visible or hidden.
Gridlines: the style of the grid lines in the Y-axis of the bubble chart, including the line style, weight, color, length, and spacing value of the grid lines. You can click the icon to control whether the grid lines in the Y-axis are visible or hidden.

Animation: the animation effect style of the bubble chart.

Metric	description
Animation Switch	Turn on the switch to configure the animation effect of the bubble chart.
Animation	The type of the animation. The system provides a variety of common animation effects, including Fading, Zooming, and Flowing. You can configure this parameter only after you turn on Animation.
Animation Duration	The duration of the widget animation effect. Unit: ms. This value is configurable only after you turn on the Animation switch.

Interactive: the interaction style of the bubble chart widget.

dialog box: the style of the dialog box that appears when you move the pointer over or click a bubble on the preview or publish page. You can click 开关图标 the icon to turn the dialog box on or off.

Metric	description
Mode	dialog box selection modes, optional, include concise and universal.
Trigger	The method by which the dialog box is triggered. You can select Hover or Click.
Display Position	The position style of the dialog box display. The value is optional, including top, bottom, left, and right.
Title Spacing	The spacing between titles in the dialog box. Unit: px.
Title Text	The style of the title text in the dialog box, including the font style, weight, font 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 name of the field in the dialog box. The name 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 the text of the dialog box content. Unit: px.
Content Text	The style of the content text in the dialog box, including the font style, text weight, font size, and color.
Frame Background	dialog box the background style of the bullet box. Background Margin: dialog box the horizontal and vertical margins of the pop-up background. Background Color: The background color of the dialog box. Border Style: dialog box the style of the border, including the border line type, rounded corner size, line width size, and border line color.
Axis indicator	The style of the dialog box axis indicator line, including the axis indicator line type, thickness value, and axis indicator line color. You can click the icon to control the display of 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 configured.

Selected: the selected state of the bubble. You can click the 开关图标 icon to enable or disable the selected state.

Metric	description
Trigger	The trigger mode of the bubble. Valid values: Hover and Click.
Select Method	The method by which you want to select a bubble. You can select Single or Multiple.
Bubble Color	The color of the selected bubble.
Bubble Stroke	The style of the bubble stroke, including the type, thickness, and color of the 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.

Legend: the legend style of the bubble chart.

Metric	description
Legend Switch	If you turn on the switch, you can configure the legend style. If you turn off the switch, you cannot configure the legend style.
Legend Position	The position of the legend relative to the start coordinates of the widget. Valides include 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, text weight, font size, and color of the legend text.
Maximum Width (Height)%	The maximum width of the legend. Unit: pixels.
Allow Page Turning	Turn on the switch to turn the legend page feature. You can configure the page number style and arrow style when the number of legends is too large. If you turn off the switch, all the legend content is displayed on one page and cannot be turned. Maximum Rows: displays the maximum number of rows that can be turned. Page Style: the style of the page number, including the font, weight, font size, and color of the page number. Arrow Style: the size, default color, and disabled color of the arrows in the page-turning style.
Color Legend	Click the icon to turn the color legend style on or off. Slide Style: includes the type of slide, the length and height of the slide, and the background color of the slide. Slider Style: the minimum value, maximum value, size, and color of the slider. Dimension Style: includes the alignment and spacing of the slider.
Shape Legend	The legend style based on the bubble shape mapping type, including the size and color of legend markers, the distance between legends in different shape mappings, and the size of the row height value. You can click the icon to enable or disable the legend style.
Dimension Legend	The legend style based on the bubble size mapping type. You can click the icon to enable or disable the size legend style. Rail Style Type: the type of the sliding track in the legend, including Rectangle and Triangle. Length: the length of the legend slide. Height: the height of the sliding track in the legend. Selected Color: the color of the selected track. Background Color: the background color of the legend track. Slider Style: the style of the slider on the slide track in the legend. Minimum Value: the minimum value of the slider. You can specify a custom value. You can also select Auto to obtain the minimum value. Maximum Value: the maximum value of the slider. You can specify a custom value. You can also select Automatic to obtain the maximum value. Size: the size of the slider. Color: the color of the slider. Dimension Style: the style of text dimensions on the legend. Alignment: the alignment of legend text dimensions relative to the slide track, including Top Alignment, Center Alignment, and Bottom Alignment. Spacing: the distance between the legend text dimension and the slide.

Dimension: the description of the dimension style.
- 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.
  - Type: the type of the auxiliary line. Valid values: horizontal line, vertical line, and slash line.
  - 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.
- Auxiliary Frame: Click the or icon to add or delete an auxiliary frame series. Click the or icon to configure the arrangement style of multiple auxiliary frame series. Click the icon to copy the auxiliary frame series configuration and add an auxiliary frame series with the same configuration.
  - End Point Position: Set the start time horizontal /y-axis of the auxiliary frame and the horizontal /y-axis of the end point.
  - Background Fill: Set the background color of the auxiliary frame.
  - Line Style: the line style of the auxiliary frame, including the line type, weight, length, spacing, and color of the auxiliary frame.
  - Text: Set the content style of the auxiliary frame, including the text, horizontal and vertical offset, rotation angle, and display position.
  - Text Background: Set the background of the auxiliary frame, including the color of the background and the radius of the rounded corners.
  - Text Style: the text style of the auxiliary frame.
- Conditional Style: Click the or icon to add or remove a conditional style. Click the or icon to configure the arrangement style of multiple conditional styles. Click the icon to copy the selected data series and add a conditional style. For more information, see Condition tree usage.
  - Bubble Shape: If you turn on the switch, you cannot configure the bubble shape in this series. If you turn off the switch, you cannot configure the bubble shape in this series.
  - Bubble Radius: If you turn on the switch, you cannot configure the bubble radius in the condition style. If you turn off the switch, you cannot configure the bubble radius in the condition style.
  - Bubble Color: If you turn on the switch, you cannot configure the bubble color in the condition style. If you turn off the switch, you cannot configure the bubble color in the condition style.
  - Text Markup: the text markup style of the bubble.
    - 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

Column	Description
`x`	The category of each bubble in the bubble chart, that is, the value of the x-axis. The field type and format must be consistent with the label data type and format on the x-axis in the configuration items.
`y`	The value of each bubble in the bubble chart, that is, the value on the y-axis.
`radiusField`	Optional. The Size Mapping field is used to configure the mapping between the size of each bubble and the data value.
`colorField`	Optional. The Color Mapping field is used to configure the mapping between the colors and data values of each bubble.
`shapeField`	Optional. The Shape Mapping field is used to configure the mapping between the shapes and data values of each bubble.

Configure data items	Description
Data sources	You can use the code editor or visual editor to view the data fields contained in the widget. You can also modify the data type to flexibly configure the component data.
Data Mapping	If you need to customize chart field configurations, you can set different field mapping content in the Data Mapping module and field mapping these content to the corresponding fields of the widget. This allows you to match data without modifying the fields in the data source. You can also click the icon to configure the field style.
Configure a filter	Turn on Filter, select an existing data filter or create a data filter, and configure a data filter script to filter data. For more information, see Manage data filters.
Data Response Result	The Data Response Result section displays widget data in real time. If the data source of the widget changes, this section displays the latest data. If the system response is delayed, you can click the icon on the right to view the data response result. You can also click the icon on the right to obtain the latest data of the widget. You can also click View Example to view an example of the response result of the current component.
Forbid Loading	If you select the check box, you will not see the loaded content during component initialization when you update the component and preview the data kanban. If you select the check box, the opposite is true. By default, the status is deselected.
Controlled Mode	If you select the check box, the component does not request data in the initialized state, and only requests data by using global variables or the method configured in Blueprint Editor. If you clear the check box, you can use automatic update to request data. By default, the status is deselected.
Auto Data Request	Select the check box to manually enter the time frequency of polling to set dynamic polling. If you clear the page, the page is not automatically updated. You need to manually refresh the page or use Blueprint Editor and global variable events to trigger a request to update data.

Advanced Panel

Interaction	Description
When a data item is selected	Turn on the switch to enable the widget interaction feature. When you click to select a data item, a temporary variable is thrown. By default, the `x` and `y` fields in the data are thrown. For more information, see Component interaction configuration.
When the legend is clicked	Turn on the switch to enable the widget interaction feature. A temporary variable is thrown when a legend is clicked. By default, the `value` and `checked` fields in the data are thrown. For more information, see Component interaction configuration.

Blueprint Interaction

Click the icon in the upper-left corner to go to the Blueprint page.
On the Layer Nodes tab, add the widget to the main canvas.

View blueprint configuration parameters.

Event

Event	Description
When the bubble chart interface request is completed	The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
When a data item is selected	The event that is thrown when a bubble point in a bubble chart is clicked. The event also throws the data item corresponding to the bubble point.
When the legend is clicked	The event that is raised when the legend of the bubble chart is clicked, and the data item corresponding to the bubble point is also raised.

Action

Action	Description
Import a bubble chart	After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
Request bubble chart interface	This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is `https://api.test` and the data passed to the request bubble chart interface is `{ id: '1'}`, the final request interface is `https://api.test?id=1`.
Highlight	data: the data item to be highlighted. Single highlight `{ x: 'West Lake', y: 8 }` Bulk Highlight `[ { x: 'West Lake', y: 8 }, { x: 'River', y: 3 } ]` style: Select a style. such as fillStyle, stroke, and opacity. If you do not specify the highlight style, the default style is used. Reference data example `{ "data": {}, "style": {} }`
Reset selections	Clear the selection item data of the reset component. No parameters are required.
Move	Move a widget to a specified location. For more information, see the 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" } }`
Switch Display /Display	Specifies whether to show or hide a widget. No parameters are required.
Display	Display the widget. For more information, see 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	Hide the component. For more information, see 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	Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.