Meaning of each configuration items when full selection is area chart - DataV

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

Chart style

A area chart is a line chart that combines lines and areas to intelligently display the trends of multi-dimensional real-time data. You can customize the y-axis interval, configure multiple series data, and display the ticker board of a series.

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: Rotate the widget by 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

State	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 area and the four boundaries of the widget. Unit: px by default.
Regional form	area chart forms, optional base and stacking.
Display form	Set the display form of the area chart. You can select Line or Curve.
Line Type	The type of the polyline. You can select Solid, Dashed, or Dotted.
Line thickness	The thickness of the polyline. Unit: pixels.
Line Color	For more information about the color of the line, see Color mapper instructions.
Area Color Synchronization	Whether the area color is consistent with the polyline color. You can select Synchronize or Not Synchronize.
Area Color	The color of the area. For more information, see Color mapper instructions. This field is displayed when you set Area Color Synchronization to Not Synchronized.
Opacity	The degree of opacity of the polyline and area. The larger the value, the more opaque it is.
Marking symbol	The marking symbol style of data points in the area chart, including the shape and size of the marking symbol. You can click the icon to control the appearance or appearance of the marking symbol style of data points.
Marker Color Synchronization	Indicates whether the marker color is consistent with the line color. You can select Synchronize or Not Synchronize.
Marker Color	The color of the marker. For more information, see Color mapper instructions. This field is displayed when you set Marker Color Synchronization to Not Synchronized.
Mark Stroke	The stroke style of the marker of the data point in the area chart, including the line type, thickness value, and color of the marker stroke line. You can click the icon to control the appearance or concealment of the marker stroke style of the data point.
Line Label	The label style of the line. Click the icon to control the display of the label configuration items. Label Field: The content of the label field must correspond to the content of the field on the Data tab. By default, the content of the `y` field is retrieved. Value Format: Set the value format of the tag. 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. This parameter is displayed only when y is selected for the Label field. Prefix and Suffix: the prefix and suffix of the line label. Relative Offset: the offset of the line label relative to the line in the vertical and horizontal directions. Unit: pixels. Rotation Angle: the rotation angle of the polyline label relative to the polyline. Layout optimization: automatically optimizes masked text and border text. Text Style: the text style of the line label, including the font style, weight, font size, and color of the text. Text Stroke: the stroke style of the line, including the thickness and color of the stroke.
Map	The map style of the area. Click the icon to control the display and concealment of the map configuration items. Note The background of the map does not support gradient color. Type: the type of the sticker. The type can be Point, Line, Square, or Image. Fill Style: the fill style of the texture map. See the color picker instructions to configure the color style of the map. Stroke Style: Set the stroke style of the map. See the color picker instructions to configure the color style of the map. This field is displayed when you set Type to Dot or Square. Extra Style: Other styles of the map, including Graphics Size, Graphics Spacing, Line Spacing, Rotation Angle, and Stagger. If you set Type to Image, you can set Image Address, Tile Width, Tile Height, Tile Spacing, and Rotation Angle.

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.
Axis: the x-axis axis style of the area chart, including the line type, line thickness, and line color. You can click the icon to display or hide the x-axis axis style.

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

State	Description
Title Display	The text content of the axis title display.
Display mode	The display mode of the axis title, including the angle value of the title and the offset value of the title.
Text Style	The font style, text weight, font size, and color of the axis title text.

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

State	Description
Display Format	The data format to be displayed. This value is valid only for time-based data. Please refer to `YYYY/MM/DD HH:mm:ss` time, integer reference `d` and floating point reference `.1f`.
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 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, text weight, font size, and color of the axis label text.

Tick mark: the x-axis tick mark style of the area chart, including the length, thickness, and color of the tick mark. You can click the icon to control whether to x-axis tick mark style.
Gridline: the style of the area chart x-axis gridline, including the line style, thickness, color, length, and spacing value of the gridline. You can click the icon to control the display of the x-axis gridline.

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.

Display Range: the range of the minimum and maximum values of the y-axis.

State

Description

Minimum value

The minimum value of the Y-axis. You can customize the value or select the value.

0: By default, the minimum value of the Y-axis range is 0.
Minimum Data Value: the minimum value in the data.

Maximum value

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 area chart, including the shape, thickness, and color of the line. You can click the icon to display or hide the Y-axis style.

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

State	Description
Title Display	The text content of the axis title display.
Display mode	The display mode of the axis title, including the angle value of the title and the offset value of the title.
Text Style	The font style, text weight, font size, and color of the axis title text.

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

State	Description
Display Format	The display format of the Y-axis label 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 information about data display formats, see Data display formats.
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 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, text weight, font size, and color of the axis label text.

Tick mark: area chart the tick mark style of the Y-axis, including the length, thickness, and color of the tick mark. You can click the icon to display or hide the tick mark style of the Y-axis.
Gridlines: the style of the area chart's y-axis gridlines, including the line style, weight, color, length, and spacing value of the gridlines. You can click the icon to control whether the gridlines appear or hide.

Animation: area chart animation effect style.
- Animation: Set the animation style of the chart. Click the icon to control the appearance or concealment of the animation.
  - Animation Effect: the type of the animation effect. The system provides a variety of common animation effects for you to select, including Zoom, Move, Horizontal Growth, and Vertical Growth.
  - Animation Duration: the duration of the component animation effect. Unit: ms.
- Sweep Animation: Set the sweep animation style of the current chart. Click the icon to control the display or concealment of the sweep animation.
  Important
  After the current animation is enabled, interactive features such as Selected become invalid.
  - Highlight Style: You can set the highlight height and intensity of the light-sweeping animation.
  - Dynamic Effect: Set the animation duration and gap of the sweeping animation. Unit: ms.

Interactive: area chart the interactive effect style of the widget.

Effect: After the carousel is enabled, the dialog box configuration is applied and the dialog box is no longer triggered by interactions. Click the icon to display or hide the carousel effect.

dialog box: The style of the dialog box that appears when you move the pointer over or click the area chart on the preview or publish page. Click 开关图标 the icon to turn the dialog box on or off.

State	Description
Mode	dialog box patterns, 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	This field is displayed when you set Mode to Common. 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: suffix content 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.
Extension	The suffix style of the content text in the dialog box.
Pop-up background	dialog box pop-up background style. 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, including the axis indicator type, thickness value, and axis indicator 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 state. You can click the 开关图标 icon to enable or disable the selected state.

Important

When the Sweep Animation feature is enabled, the Selected state feature is disabled.

State	Description
Trigger	The method that is used to trigger a region. You can select one of the following options: Hover and Click.
Select Method	The method that is used to select an area. You can select Single Select or Multiple Select. If you select Single Select, the click event only throws one piece of data. The data format is an object, and only one area can be highlighted. If you select Multiple Select, the click event throws multiple pieces of data, and the data format is an array, which highlights multiple areas.
Line Type	Set the line type, thickness, and color of the polyline. Click the icon to turn the polyline style on or off.
Selected Color	Sets the color of the selected area.
Marking size	Sets the tag size.
Mark Stroke	Set the stroke line type, line thickness, and line color.

thumbnail axis: if too much data is area chart, you can set the thumbnail axis interaction style. click the 开关图标 icon to enable or disable the thumbnail axis interaction effect.

Important

When Sweep Animation is enabled, the interaction enhancement feature is disabled.

State	Description
Default Range	The range of data displayed on the thumbnail axis. The range can be from 0 to 1.
Rail Style	The style of the thumbnail axis slide, including the height value of the slide, the foreground color of the slide, and the background color.
Text Style	The style of the text on the thumbnail axis, including the font content, text weight, font size, and text color. This option is displayed only if the thumbnail axis style is turned on.
Background Trend	The thumbnail axis displays the area chart background trend style, including the type of background trend line, line thickness, and line color. Generally, the trend of line data in the graph is consistent and can only be displayed if the area chart has only one data series.
Handle Style	The handle style at both ends of the thumbnail shaft, including the handle's size width and height values, the handle's background default and high color, and the handle's edge corner values and edge color.

Legend: area chart legend style.

State	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.
Chart Spacing	Horizontal and vertical spacing between the legend and the chart.
Category Legend	The style of the sub-type legend. Marker Size: the size of the legend marker. Legend Spacing: the horizontal and vertical distance between the legends of different categories. Maximum Width: the maximum width of the legend. Unit: pixels. Page Flip Allowed: If you turn on the switch, the page number style and arrow style of the legend are enabled. If you turn off the switch, the legend content is displayed on one page and cannot be flipped. Maximum Number of Rows: the maximum number of rows that can be displayed in the legend. If the maximum number of rows is exceeded, the legend is paged. 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.

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, including 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: the content style of the guide line, including the text, data display, rotation angle, horizontal and vertical offset, and alignment position.
  - Text Background: 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.
- Region: Click the or icon to add or remove a region. Click the or icon to configure the arrangement style of multiple area series. Click the icon to copy the configurations of the selected region series and add a region series with the same configurations. For more information about how to configure the regions in each series, see Condition tree usage.
  - Line Type: the type of the line in the current area. Valides: Solid Line, Dashed Line, and Dotted Line. You can click the icon to control the display of the polyline type.
  - Line thickness: the thickness of the line in the current area. Unit: pixels. You can click the icon to control the visualization of the line thickness.
  - Line Color: the color of the line in the current region. For more information, see color picker description. You can click the icon to control the color of the polyline.
  - Marker Color: the color of the line in the current area. For more information, see color picker description. You can click the icon to control the color of the marker.
  - Area Color: the area color of the current region. For more information, see color picker description. You can click the icon to control the color of the area.
  - Opacity: the opacity of the line and area in the current area. The larger the value, the more opaque the area. You can click the icon to control the opacity.
  - Symbol: the symbol style of a data point in a line chart, including the shape and size of the symbol. You can click the icon to control whether the symbol style is visible or hidden.
  - Marker Stroke: the marker stroke style of the data point in the line chart, including the line type, line thickness, and color. You can click the icon to control the visualization of the data point marker stroke style.
  - Text Markup: the text markup style of the lower line in the current region.
    - Text Content: the content of the text annotation.
    - 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: Set the line style of the text annotation, including the line type, color, weight, and length.

Data Sources panel

Column	Description
`x`	Used to configure the category of each area in the area map, that is, the value of the x-axis.
`y`	Used to configure the value of each area in the area map, that is, the value of the y-axis.
`colorField`	(Optional) The Color Mapping field, which is used to set the mapping configuration style for each color of the area.

Configure data items	Description
DataSource	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 parameter 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 Data Item Is Selected (Dot)	Select the Enable check box to enable interactions between widgets. The area chart component has an interactive configuration. When a data item is selected, the callback value is returned. By default, the `x`, `y`, and `colorField` fields in the data are returned. For more information, see Component interaction configuration.
When data item is selected (line)	Select the Enable check box to enable interactions between widgets. The area chart component has an interactive configuration. When a data item is selected, the callback value is returned. By default, the `x`, `y`, and `colorField` fields in the data are returned. For more information, see Component interaction configuration.
When data item is selected (face)	Select the Enable check box to enable interactions between widgets. The area chart component has an interactive configuration. When a data item is selected, a callback value is returned. By default, the `x`, `y`, and `colorField` fields in the data are returned. For more information, see Component interaction configuration.
When the legend is clicked	Select the Enable check box to enable interactions between widgets. The area chart component has interactive configuration. When a legend is clicked, the callback value is returned. By default, the `value` and `checked` fields in the data are returned. For more information, see Component interaction configuration.
When a line is clicked	Select the Enable check box to enable interactions between widgets. The area chart widget has an interactive configuration. When a polyline is clicked, the callback value is returned. By default, the `mappingData` field in the data is returned. 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 line 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 Data Item Is Selected (Dot)	The event that is raised when a point on the area graph is clicked, along with the data item corresponding to that point.
When data item is selected (line)	The event that is raised when a line on an area graph is clicked, along with the data item corresponding to the line.
When data item is selected (face)	The event that is raised when a face on an area graph is clicked, along with the data item corresponding to that face.
When the legend is clicked	The event that is raised when the area chart legend is clicked, along with the data item corresponding to the polyline.
When a line is clicked	The event that is raised when a polyline is clicked. The event also raises the data item corresponding to the polyline. For more information, see the data example. `{ "mappingData": [] // Mapping data }`

Action

Action	Description
Request Line Chart	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 for a line chart is `https://api.test` and the data transferred to the Request Line Chart API action is `{ id: '1'}`, the final request interface is `https://api.test?id=1`.
Import a line 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.
Highlight	Highlight the element corresponding to the data item. For more information, see Data example. `{ data: { x: 'Shanghai' // You can list multiple highlight conditions, similar to filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }`
Unhighlight	This action enters the full screen mode and does not need parameter input.
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	Toggles whether the widget is displayed or hidden. 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 set this parameter, no animation is available. "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 set this parameter, no animation is available. "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.