Gauge Chart
Gauge Chart is a data indicator display chart in the form of an instrument panel, usually used to observe data within a certain indicator range, such as pressure gauges, temperature recorders, etc.
Gauge charts need to pay attention to setting the measurement range of the gauge, which is a quantity range limited by the upper and lower limit values measured under specified accuracy requirements. The maximum and minimum values can be set in the chart.
Advantages: Multi-pointers can clearly show the range of a certain indicator value, intuitively showing the completion degree of the current task, or whether a certain data is within the controllable range or about to exceed expectations.
Disadvantages: The gauge chart is a special chart with a relatively small scope of application and is not suitable for some regular data displays.
Settings
Data Settings
| Setting | Description |
|---|---|
| Data Source | Select the data source of the column chart. At the same time, you can add horizontal and vertical coordinate field options through the aggregation query in the Data Source menu |
| Name Field | Select the field returned by the data source. This field is used for the name display of the gauge label, usually combined with the Hover Display menu |
| Value Field | Select the field returned by the data source. The value of this field is used to indicate the size of the gauge pointer measurement value |
Chart Settings
| Setting | Description |
|---|---|
| Color Allocation Type | Configure the color effect of the pointers in the gauge. Options: Allocate colors in the palette according to the chart, Allocate colors in the palette according to the data item.When multiple charts are aggregated, you can choose to allocate by chart. For a single chart, you can choose to allocate by data item. The specific color value can be adjusted in the Style menu palette. |
| Minimum Value | Refers to the minimum value of the gauge measurement range. After setting, the pointer position will always be greater than or equal to the minimum value |
| Maximum Value | Refers to the maximum value of the gauge measurement range. After setting, the pointer position will always be less than or equal to the maximum value |
| Number of Scale Segments | Refers to the number of segments within the gauge measurement range, excluding the minimum scale |
| Radius | Configure the radius size of the gauge circle. It supports two methods: fixed radius length (such as 400) and adaptive according to card ratio (such as 75%) |
| Center Point X | Configure the position of the gauge circle center point on the X axis, supporting both fixed length and percentage methods |
| Center Point Y | Configure the position of the gauge circle center point on the Y axis, supporting both fixed length and percentage methods |
Title Style
| Setting | Description |
|---|---|
| Display Gauge Title | Turn on or off the gauge title display. You can modify the name field in the data settings |
| Relative Center Offset X | Configure the offset of the title relative to the gauge center on the X axis. Positive and negative values control the offset to the right and left respectively |
| Relative Center Offset Y | Configure the offset of the title relative to the gauge center on the Y axis. Positive and negative values control the offset upward and downward respectively |
| Text Style | Set the title text to italic or normal mode |
| Color | Set the color of the title text |
| Background Color | Set the background color of the title text. It needs to be used together with parameters such as line height, padding, width, and height in the text style to take effect |
| Font Weight | Set the title font weight. Options: Default, Bold, Very Bold, Light |
| Font Style | Set the title font style. Options: sans-serif, serif, monospace, Arial, Courier NEW |
| Font Size | Set the title font size. The font size is not less than 12 and not more than 100 |
| Line Height | Set the line height of the title text |
| Padding | Set the distance of the title text within the background box |
| Width | Set the maximum display width of the title text background box, which does not affect the display of the text itself |
| Height | Set the display height of the title text background box, which only affects the text background height and does not affect the display of the text itself |
| Stroke Width | Set the stroke width of the title background image. It takes effect only after setting the stroke color |
| Stroke Color | Set the stroke color value of the title background |
| Stroke Radius | Set the stroke radius angle of the title background |
| Shadow Color | Set the shadow color of the title background. It takes effect only after setting the title background color and shadow size |
| Shadow Size | Set the shadow size of the title background |
| Shadow Horizontal Offset | Set the horizontal offset distance of the title background shadow |
| Shadow Vertical Offset | Set the vertical offset distance of the title background shadow |
Value Label Style
| Setting | Description |
|---|---|
| Display Data Details | Turn on or off the value display corresponding to the pointer. It is recommended to turn off the display when there are multiple pointers. |
| Display Content | The data display content can be configured, and custom editing expression syntax is supported to realize complex scenario content display |
| Relative Center Offset X | Configure the offset of the data relative to the gauge center on the X axis. Positive and negative values control the offset to the right and left respectively |
| Relative Center Offset Y | Configure the offset of the data relative to the gauge center on the Y axis. Positive and negative values control the offset upward and downward respectively |
| Text Style | Set the label text to italic or normal mode |
| Color | Set the color of the label text |
| Background Color | Set the background color of the label text. It needs to be used together with parameters such as line height, padding, width, and height in the text style to take effect |
| Font Weight | Set the label font weight. Options: Default, Bold, Very Bold, Light |
| Font | Set the label font style. Options: sans-serif, serif, monospace, Arial, Courier NEW |
| Font Size | Set the label font size. The font size is not less than 12 and not more than 100 |
| Line Height | Set the line height of the label text |
| Padding | Set the distance of the label text within the background box |
| Width | Set the display width of the label background box, which only affects the text background height and does not affect the display of the text itself |
| Height | Set the display height of the label background box, which only affects the text background height and does not affect the display of the text itself |
| Stroke Width | Set the stroke width of the label background image. It takes effect only after setting the stroke color |
| Stroke Color | Set the stroke color value of the label background |
| Stroke Radius | Set the stroke radius angle of the label background |
| Shadow Color | Set the shadow color of the label background. It takes effect only after setting the label background color and shadow size |
| Shadow Size | Set the shadow size of the label background |
| Shadow Horizontal Offset | Set the horizontal offset distance of the label background shadow |
| Shadow Vertical Offset | Set the vertical offset distance of the label background shadow |
Pointer Style
| Setting | Description |
|---|---|
| Graphic Color | Set the color effect of the gauge arc frame and pointer. The priority is higher than the palette setting, and only supports single color system adjustment |
| Border Color | Set the color effect of the pointer border. It takes effect only after setting the stroke width |
| Stroke Type | Configure the stroke type of the pointer. Options: Solid Line, Dashed Line, Dotted Line |
| Stroke Width | Set the stroke width of the pointer |
| Stroke Color | Set the stroke color of the pointer |
| Stroke Radius | Set the stroke radius angle of the pointer |
| Shadow Color | Set the shadow color of the pointer |
| Shadow Size | Set the shadow size of the pointer |
| Shadow Horizontal Offset | Set the horizontal offset of the pointer's shadow |
| Shadow Vertical Offset | Set the vertical offset of the pointer's shadow |
| Opacity | Set the opacity of the pointer, with a value range of 0 to 1 |
Progress Bar
Gauges generally have a measurement range, and the progress bar is a circular arc length from the starting point of the pointer to the scale pointed by the pointer within this effective measurement range.
| Setting | Description |
|---|---|
| Display Progress | Turn on or off the gauge progress bar display |
| Overlap Multiple Data Groups | One pointer corresponds to one progress bar. When there are multiple pointers, you can choose whether to overlap the progress bars |
| Display Rounded Ends | Configure the display effect of both ends of the progress bar: rounded display, right-angle display |
| Width | Set the width value of the progress bar |
| Graphic Color | Set the color value displayed by the progress bar |
| Border Color | Set the border color of the progress bar |
| Stroke Type | Set the type of the progress bar border: Solid Line, Dashed Line, Dotted Line |
| Stroke Width | Set the stroke width value of the progress bar |
| Stroke Radius | Set the stroke radius angle of the progress bar |
| Shadow | Set the shadow size of the progress bar |
| Shadow Color | Set the shadow color value of the progress bar |
| Shadow Horizontal Offset | Set the horizontal offset of the progress bar's shadow |
| Shadow Vertical Offset | Set the vertical offset of the progress bar's shadow |
| Opacity | Set the shadow opacity of the progress bar, with opacity values ranging from 0 to 1 |
Highlight Settings
| Setting | Description |
|---|---|
| Disable Highlight | After disabling highlight, the label will no longer be highlighted when the mouse moves to the label position |
| Highlight Behavior | Set the interactive style of highlight display |
| Fade Range | Set the selection range for interactive interface fade-out during highlight, providing three methods: fade-out coordinate system, fade-out chart, or global fade-out |
Axis Style
| Setting | Description |
|---|---|
| Display Axis | The axis refers to the arc of the gauge from the start to the end. You can control whether the axis is displayed by turning it on and off |
| Display Rounded Ends | Configure the display effect of both ends of the axis: rounded display, right-angle display |
| Color | Set the graphic color value of the axis |
| Width | Set the graphic width of the axis |
| Shadow Color | Set the graphic shadow color value of the axis |
| Shadow Size | Set the graphic shadow area size of the axis |
| Shadow Horizontal Offset | Set the horizontal offset of the graphic shadow of the axis |
| Shadow Vertical Offset | Set the vertical offset of the graphic shadow of the axis |
Axis Scale
| Setting | Description |
|---|---|
| Display Scale | Scales are used to mark the minimum unit values on the axis. You can turn on or off the display of scales |
| Align Scale and Label | Constrains whether the scale and label are strictly aligned |
| Scale Inward | Set the orientation of the scale in the gauge, inward or outward |
| Scale Length | Set the length value of the scale display |
Axis Label
| Setting | Description |
|---|---|
| Display Label | Turn on or off the label display on the pointer |
| Display Content Expression | Custom editing expression syntax is supported to realize complex scenario content display |
| Direction Inward | Set the orientation of the axis label in the gauge, inward or outward |
| Rotation Angle | Set the rotation angle of the axis label |
| Distance from Axis | Set the distance length between the label and the axis |
| Color | Set the color value of the label text |
| Background Color | Set the background color of the label text. It needs to be used together with parameters such as line height, padding, width, and height in the text style to take effect |
| Text Style | Set the label text to italic or normal mode |
| Font Weight | Set the label font weight. Options: Default, Bold, Very Bold, Light |
| Font | Set the label font style. Options: sans-serif, serif, monospace, Arial, Courier NEW |
| Font Size | Set the label font size. The font size is not less than 12 and not more than 100 |
| Horizontal Alignment | Set the horizontal alignment of the label text, including four methods: auto, left-aligned, centered, and right-aligned |
| Vertical Alignment | Set the vertical alignment of the label text, including four methods: auto, top, centered, and bottom |
| Line Height | Set the line height of the label text |
| Padding | Set the distance of the label text within the background box |
| Width | Set the maximum display width of the label text |
| Height | Set the display height of the label text, which only affects the text background height and does not affect the display of the text itself |
| Stroke Width | Set the stroke width of the label background image. It takes effect only after setting the stroke color |
| Stroke Color | Set the stroke color value of the label background |
| Stroke Radius | Set the stroke radius angle of the label background |
| Shadow Color | Set the shadow color of the label background. It takes effect only after setting the label background color and shadow size |
| Shadow Size | Set the shadow size of the label background |
| Shadow Horizontal Offset | Set the horizontal offset distance of the label background shadow |
| Shadow Vertical Offset | Set the vertical offset distance of the label background shadow |
Events
| Setting | Description |
|---|---|
| Non-clickable | After enabling, all label data in the chart cannot be clicked. After closing, you can set the corresponding data click interaction event |
| Call Automation After Click | You can implement related data label click interaction events by selecting the corresponding automation, such as opening the corresponding data form details or opening other web links after clicking |
| Call Automation After Double Click | The function is the same as click call, but the interaction is triggered by double-click instead of single-click. Click and double-click events can be set at the same time |
Usage Example
Suppose I need to display the completion progress of a specified task
The specific data structure is as follows:
| Field Name | Field Type |
|---|---|
| Task Name | String |
| Task Progress | Decimal |
Configuration Example
Note: Generally, a single chart only displays one piece of data. Multiple pieces of data may overlap