Meaning of each configuration items when full selection is heatmap - DataV

This topic describes the meaning of each configuration items when Full Select is heatmap.

Chart style

heatmap can visually display the comparison of multi-dimensional category data. heatmap allows you to display categories and values on the x-axis and y-axis respectively. You can customize text, graphics, and animation styles.

Style Stroke

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 heat area and the four boundaries of the widget. Unit: px by default.
Thermal Shape	heatmap shapes, including circles, squares, and rectangles.
Dimension Mapping	Click the icon to control dimension mapping on and off. After you turn on the switch, drag the slider to set the range of dimension mapping. If you turn off the switch, this field cannot be configured. Note If dimension mapping is enabled, you need to configure the radiusField field in the data, type number.
Thermal Color	For more information about the colors of heat regions, see Color mapper instructions.
Heat Stroke	The stroke style of the heat area, including the stroke line type, weight value, and line 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.
Thermal label	The label style of the heat label. Click the icon to control the display of the heat label configuration items. Label Field: The content of the label must match the content of the field in the data panel. You can select `x`, `y`, `colorField`, or `radiusField`. By default, the content of the `radiusField` field is retrieved. Value Format: Set the display format of the value. You can select 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. You can configure this parameter only when you obtain the content of the radiusField field. Pre-Suffix: the prefix and suffix of the tag content. Relative Offset: the offset of the heat tag relative to the heat area. Unit: pixels. Text Style: the text style of the heat label, including the font style, weight, font size, and color of the text. Text Stroke: the stroke style of the heat label, including the width and color of the stroke line.
Map	The map style of the column. Click the icon to control the visualization of the map configuration items. Type: the type of the map. The type can be Point, Linear, or Square. Fill Color: Specify the fill color of the map. This parameter is available only when you set Type to Point or Square. Stroke Style: Set the stroke style of the map. This parameter is available only when the type is Point or Square. Fill Style: the fill style of the texture map, including the fill color and width. This parameter is available only when the Type parameter is set to Linear. Extra Style: Sets the line spacing and rotation angle of the map. If you set the Type parameter to Dot or Square, you can configure the graphic size, graphic spacing, rotation angle, and whether to stagger.

Coordinates: the x-axis and y-axis styles of the widget.

X Axis

Show X Axis: If you turn on the switch, the x-axis style of the widget is visible. If you turn off the switch, the x-axis style of the widget is invisible.
Data Type: the type of the data on the x-axis, including Category Type and Time Type.
Axis: the x-axis style of the heatmap, including the shape, thickness, and color of the line. You can click the icon to display or hide the x-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: heatmap the axis title style of the x-axis. You can click the 开关图标 icon to display or hide the axis title of the x-axis.

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

Axis Label: heatmap the axis label style of the x-axis. You can click the 开关图标 icon to display or hide the axis label of the x-axis.

Metric	description
Display Format	The display format of the axis label. This parameter is available only when you set the Data Type parameter to Time.
Label Display	The display style of the labels, including the number of labels on the x-axis, the prefix and suffix, the angle, offset, and alignment of the labels.
Text Style	The x-axis labels the style of the text font, the weight of the text, the size of the font, and the color of the font.

Tick mark: heatmap the style of the tick mark on the x-axis, including the length, thickness, and color of the tick mark. You can click the icon to display or hide the tick mark on the x-axis.

Gridlines: heatmap the style of the x-axis gridlines. You can click the 开关图标 icon to display or hide the gridlines.

Metric	description
Line Style	The line style of the grid lines, including the line type, line thickness, and line 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.

Y-axis

Y-Axis Display: If you turn on the switch, the y-axis display of the widget is visible. If you turn off the switch, the y-axis display of the widget is invisible.
Data Type: the type of the data in the y-axis, including Category Type and Time Type.
Axis: heatmap the axis style of the y-axis, including the shape, thickness, and color of the line. You can click the icon to display or hide the axis style of the y-axis.
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: heatmap the title style of the y-axis. You can click the 开关图标 icon to control the display of the title.

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 and offset value of the title.
Text Style	The font style, text weight, font size, and text color of the title.

Axis Label: heatmap the axis label style of the y-axis. You can click the 开关图标 icon to display or hide the axis label of the y-axis.

Metric	description
Display Format	The display format of the y-axis label. This field is available only when you set the Data Type field to Time.
Label Display	The display style of the tag, including the number of tags, the prefix and suffix of the tag, the angle of the tag, the offset, and the alignment of the tag.
Text Style	The font style, text weight, font size, and text color of the y-axis label text.

Tick mark: heatmap the y-axis tick mark style, including the length, thickness, and color of the tick mark. You can click the icon to display or hide the tick mark style.
Gridlines: heatmap the style of the y-axis gridlines, including the line style, line thickness, line color, line length, and spacing between the gridlines. You can click the icon to control the display of the y-axis gridlines.

Animation: the animation effect style of the widget.

Metric	description
Animation Switch	Turn on the switch to configure the thermal animation effect.
Animation	The type of the animation. The system provides a variety of common animation effects for you to select, including Fades, Zoom, Move, Horizontal Growth, and Vertical Growth. You can configure 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 widget.

dialog box: the style of the dialog box that appears when you move the pointer over or click the heat area 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. Valid values: Up, Down, Left, and Right. Note When the mouse pointer is close to the chart border, the dialog box position will be displayed adaptively.
Title Spacing	The spacing of the title text in the dialog box.
Title Text	The style of the title text in the dialog box, including the font style, weight, font size, and color of the text.
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 text 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. Click the icon to turn the axis indicator on or off. 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 mode. You can click the 开关图标 icon to enable or disable the selected mode.

Metric	description
Trigger	The trigger mode that is selected for the heat field. You can select one of the following options: Hover and Click.
Select Method	The method that is used to select the thermal area. Valic options include Single Select and Multiple Select.
Thermal Color	The color in the selected heat field. You can click the icon to enable or disable the heat color.
Stroke	The style of the stroke line in the heat area, including the type of the stroke line, the thickness of the line, and the color of the stroke line. 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	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, weight, font size, and color of the legend text.
Chart Spacing	Sets the horizontal and vertical spacing between the legend and the chart, in px.
Maximum Width (Height)%	The maximum width of the legend. Unit: pixels.
Allow Page Turning	Turn on the switch to turn the legend page function. You can configure the default color and disabled color of the arrow and the style of the page number. If you turn off the switch, the legend content is displayed on one page and cannot be turned. Maximum Rows: the maximum number of rows that can be displayed in the legend. Page Style: the style of the legend page, including the font style, text weight, font size, and page color. Arrow Style: the style of the legend arrow, including the size, default color, and disabled color of the arrow.
Color Legend	The style of the color legend. Chart Spacing: Set the horizontal and vertical spacing between the legend and the chart. The unit is px. 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. Label Style: includes the alignment and spacing of the slider.
Dimension Legend	The style of the dimension legend. Slide Style: includes the type of slide, the length, value, 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. Label Style: includes the alignment and spacing of the slider.

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.
- Thermal Element: Click the or icon on the right to add or delete a thermal element. Click the or icon to configure the arrangement style of multiple heat entities. Click the icon to copy the configuration content of the selected heat element and add a heat element with the same configuration. For more information about how to configure heat entities in each series, see Condition tree usage.
  - Size: If you turn on the switch, you can configure the size of the heat zone in the heat entity of the series. If you turn off the switch, you cannot configure the size of the heat zone under the conditions of the series.
  - Color: If you turn on the switch, you can configure the color of the heat area in the heat element of the series. If you turn off the switch, you cannot configure the color of the heat area under the conditions of the series.
  - Stroke: If you turn on the switch, you can configure the style of the heat stroke in the series of heat entities, including the line type, line thickness, and color. If you turn off the switch, you cannot configure the style of the heat stroke in the series of conditions.
    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.
  - Text Dimension: the text dimension style of the current heat entity.
    - 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 actual value of each category, which corresponds to the text content of the x-axis.
`y`	The category value, which corresponds to the text content of the y-axis.
`radiusField`	Optional. The numeric field that is used to configure the mapping style for the value size of the heat area.
`colorField`	Optional. The Color Mapping field is used to set the mapping configuration style for each color of the heat area.

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. A temporary variable is thrown when a data item changes. By default, the `x`, `y`, and `r` 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 heatmap 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	When the selected data item of the heatmap changes, the corresponding event is triggered, and the data item corresponding to the heat zone is thrown at the same time.
When the legend is clicked	When the heatmap legend is clicked, the corresponding event is triggered, and the corresponding data item of the legend is thrown.

Action

Action	Description
Import heatmap Interface	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 heatmap 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, heatmap the API data source is configured as `https://api.test` and the data transferred to the request heatmap interface is `{ id: '1'}`, the final request interface is `https://api.test?id=1`.
Highlight	data: the data item to be highlighted. `{ x: 'Inner mongolia' }` 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	Resets the selection. 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.