The meaning of each configuration items when selecting the full amount of jade jue chart - DataV

This article introduces the meaning of each configuration items when selecting the full quantity of Yujue chart.

Chart style

The Jade chart uses rotating bar bars to display categorical data. Yujue chart can compare the numerical size of classified data. When there are too many classifications, the text of the histogram needs to be rotated in order to arrange it reasonably, which is not conducive to reading. Compared with vertical histogram, Yujue chart is more suitable for scenes with more such classifications.

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

Parameter	Description
Chart Margins	Click the icon to control the display of the chart margins. After you turn on the switch, you can configure the distance between the Jade map area and the four boundaries of the widget. Unit: px by default.
Maximum radian	The maximum radian of the arc column in the Jade chart. Valid values: 0 to 360. Unit: degrees.
Arc shape	The arc style of the curved column in the Jade chart. You can select right angles and rounded corners.
Arc Width	The arc width value of the arc column of the Jade chart, in px.
Arc Color	For more information about the colors of the arc column chart, see Color mapper instructions. You can configure the mapped colors for different arc column chart.
Background Color	The background color of the arc column chart.
Arc Stroke	The style of the stroke of the arc column chart, including the type, thickness, and color of the stroke of the arc column chart. 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.
Arc glow	Arc lighting style. Click the icon to control the display of the arc lighting configuration items. Luminous Color: Includes the following arc switch and opacity. When the switch following arc is turned off, the luminous color can be set separately. Blur Coefficient: the blur coefficient of the arc-shaped glow. Valid values: 0 to 50. The larger the value, the more blurred the glow range between the arcs.
Arc Label	The label style of the arc column chart. Click the icon to control the display of the arc label configuration items. Label Field: The content of the label field must match the content of the field on the Data tab. By default, the content of the t 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 you select `t` for the Label field. Pre-Suffix: the prefix and suffix of the column tag. Relative Offset: the vertical and horizontal offset of the arc label relative to the widget. Unit: pixels. Text Style: the text style of the curved label, including the font style, weight, font size, and color of the text. Text Stroke: the stroke style of the curved label, including the thickness 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. Note The background of the map does not support gradient color. Type: the type of the texture. Valid values: Point, Line, and Square. Fill Style: the fill style of the texture map. See the color picker instructions to configure the color style of the map. Stroke Style: Specify the stroke style of the map. See the color picker instructions to configure the color style of the map. This parameter 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.

Coordinate: the radius axis of the widget.

Radius Axis: If you turn on the switch, the inner radius axis of the widget is visible. If you turn off the switch, the inner radius axis of the widget is invisible.
Data Type: the data type of the radius axis, including Category Type and Time Type.
Radius Range: the value of the inner and outer radius axes of the arc bar. Unit: %.
Axis: the radial axis style of the Jade chart, including the line type, line thickness, and line style. You can click the icon to control whether the radial axis style is visible or hidden.
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: the title style of the radius axis of the Jade chart. You can click the 开关图标 icon to control the visibility of the radius axis title.

Parameter	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 axis label style of the radius axis of the Jade chart. You can click the 开关图标 icon to control whether the axis label is visible or hidden.

Parameter	Description
Label Display	The display style of the label, including the prefix and suffix of the axis label, the angle value, offset, and alignment of the label.
Text Style	The font style, text weight, font size, and color of the axis label text.

Tick mark: the tick mark style of the radius axis of the Jade chart, including the length, thickness, and color of the tick mark. You can click the icon to display the tick mark style of the radius axis.
Grid Line: the style of the radius axis grid line of the Jade chart, including the line style, thickness, color, length, and spacing value of the grid line. You can click the icon to control the visibility of the radius axis grid 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.

Animation: the animation effect style of the current chart.
- Animation: Set the animation style of the current 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: the interactive effect style of the Jade widget.

Carousel: After you enable the carousel feature, the dialog box settings are 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 an arc bar on the preview or publish page. You can click the 开关图标 icon to turn the dialog box on or off. The common mode is used as an example.

Parameter	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. Valid values: 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, text 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 content. 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.
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 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.
Activate a range	dialog box the style of the active area, including additional values for the fill color, transparency, and width adjustment of the area style.

Selected: the status of the arc bar when it is selected. You can click the 开关图标 icon to enable or disable the selected status.

Parameter	Description
Trigger	The method that is used to trigger the arc bar. You can select one of the following options: Hover and Click.
Select Method	The method that is used to select an arc bar. You can select Single or Multiple.
Arc Color	The color of the arc bar in the selected state.
Arc Stroke	The stroke style of an arc bar, including the stroke type, line thickness, and stroke 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.

Legend: the legend style of the Jade chart.

Parameter	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. Valid values: 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	Set the horizontal and vertical spacing between the legend and the chart. The unit is px.
Category Legend	The style of the sub-type legend. The component type legend is displayed only when the Arc Color Mapping Type parameter is set to Noun Classification in the Component Style panel. Legend Mark: the shape and size of the legend mark. Legend Spacing: the horizontal spacing and inner spacing between the legends of different categories. Maximum Width: the maximum width of the legend in different categories. Paging Allowed: If you turn on the switch, you can turn the legend on the page. You can configure the page number style and arrow style when the number of legends is too large. If you turn off the switch, the legend content is displayed on one page and cannot be turned. 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.
Continuous Legend	The style of the continuous legend. The legend is displayed as a continuous legend only when the Graphic Arc Color Mapping Type parameter is set to Numeric Continuous or Numeric Partition in the Component Style panel. 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. 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.
  - 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.
- Arc: Click the or icon to add or delete an arc series. Click the or icon to configure the arrangement style of multiple arc series. Click the icon to copy the current arc series configuration and add an arc series with the same configuration. For more information about how to configure conditional patterns, see Use conditional trees.
  - Arc Color: If you turn on the switch, you cannot configure the color of the arc bar in the condition style. If you turn off the switch, you cannot configure the color of the arc bar in the condition style.
  - Arc Stroke: If you turn on the switch, you cannot configure the stroke style of the arc bar in the condition style series, including the line type, line thickness, and line color. If you turn off the switch, you cannot configure the stroke style of the arc bar in the condition series.
  - Text callout: the text callout style of the arc series.
    - 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: 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.
    - Text Label Point: the style of the text label point for a text label, including the fill color, radius, and the need to stroke switch. The stroke style is the same as the text line style.

Data Sources panel

Column	Description
`r`	The category of each arc in the Yujue diagram.
`t`	The numerical value of each arc in the Yujue diagram.
`colorField`	(Optional) The Color Mapping field, which is used to set the mapping configuration style between the various colors and data values of each arc.

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. The Jade Graph component has interactive configurations. When you click a data item to select it, temporary variables are thrown. By default, the `r` and `t` 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. The Jade Graph widget has interactive configurations. When a legend is clicked, a callback value is returned. By default, the `value` and `checked` fields in the data are 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 Jade Graph API 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 column of the Jade chart is clicked, and the data item corresponding to the column is also thrown.
When the legend is clicked	The event that is thrown when the legend of the Jade chart is clicked, and the corresponding data item of the legend is also thrown.

Action

Action	Description
Import Jade Graph 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 Jade Graph 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 for a Jade graph is `https://api.test` and the data that is transferred to the request Jade graph interface is `{ id: '1'}`, the final request interface is `https://api.test?id=1`.
Highlight	data: the data item to be highlighted. Single highlight `{ r: 'Category 1 ', t: 10 }` Bulk Highlight `[ { r: 'Category 1 ', t: 10 }, { r: 'Category 2 ', t: 20 } ]` 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" } }`
Toggle 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.