Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
a1f5829acc
Коммит
0eb74b14ad
|
|
@ -293,7 +293,7 @@ Annotations provide options to add any image over the gauge control with respect
|
|||
|
||||
## Alignment of annotation
|
||||
|
||||
`Annotation` can be aligned to center, near and far using the `HorizontalAlignment` and `VerticalAlignment` properties of annotation.
|
||||
`Annotation` can be aligned to center, near and far using the `HorizontalAlignment` and `VerticalAlignment` properties of the annotation.
|
||||
|
||||
The following code example demonstrates how to set the `HorizontalAlignment` for annotation
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Axis in .NET MAUI Radial Gauge control | Syncfusion
|
||||
description: Learn here all about Axis feature of Syncfusion .NET MAUI Radial Gauge(SfRadialGauge) control with custom support.
|
||||
description: Learn here all about Axis feature of Syncfusion .NET MAUI Radial Gauge(SfRadialGauge) control using the custom support.
|
||||
platform: maui
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Axis in .NET MAUI Radial Gauge
|
||||
|
||||
The `Radial Axis` is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements such as labels, ticks and axis line can be easily customized.
|
||||
The `Radial Axis` is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements such as labels, ticks and axis line can be easily customized.
|
||||
|
||||
## Axis customization
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Interval
|
||||
|
||||
The interval between labels can be customized using the `Interval` property. By default auto-interval will be calculated based on available scale range and size. If you need to change the default interval, use this property.
|
||||
The interval between labels can be customized using the `Interval` property. By default, auto-interval will be calculated based on available scale range and size. If you need to change the default interval, use this property.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -234,7 +234,7 @@ The visibility of the first and last labels of an axis can be customized using t
|
|||
* `ShowFirstLabel` – Enables or disables the first label of the axis.
|
||||
* `ShowLastLabel` – Enables or disables the last label of the axis.
|
||||
|
||||
The default value of both the `ShowFirstLabel` and the `ShowLastLabel` properties is true.
|
||||
The default value of both the `ShowFirstLabel` and `ShowLastLabel` properties is true.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -310,7 +310,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Maximum number of labels per 100 logical pixels
|
||||
|
||||
By default, a maximum of three labels are displayed for each 100 logical pixels in an axis. The maximum number of labels that should present within 100 logical pixels length can be customized using the `MaximumLabelsCount` property of the axis. This property is applicable only for automatic range calculation and will not work if you set value for interval property of an axis.
|
||||
By default, a maximum of three labels are displayed for each 100 logical pixels in an axis. The maximum number of labels that should present within 100 logical pixels length can be customized using the `MaximumLabelsCount` property of the axis. This property is applicable only for automatic range calculation and will not work, if you set value for interval property of an axis.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -342,7 +342,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
## Axis line customization
|
||||
|
||||
The radial axis line can be customized using the `AxisLineStyle` with following properties.
|
||||
The radial axis line can be customized using the `AxisLineStyle` with the following properties.
|
||||
|
||||
* `Thickness` – Customizes the thickness of axis line.
|
||||
* `ThicknessUnit` – Allows to specify the thickness of the axis line either in pixel or factor. Its default value is `Pixel`.
|
||||
|
|
@ -425,7 +425,7 @@ If the `ThicknessUnit` is set to factor, the given factor value in the `Thicknes
|
|||
|
||||
### Setting axis line fill brush
|
||||
|
||||
To fill the brush to axis line using the `Fill` property of radial axis.
|
||||
To fill the brush to axis line using the `Fill` property of the radial axis.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -465,7 +465,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Setting gradient brush to axis line
|
||||
|
||||
The `GradientStops` property of radial axis allows to specify the gradient brush to the axis line by specifying the different colors based on provided axis value.
|
||||
The `GradientStops` property of radial axis allows you to specify the gradient brush to the axis line by specifying the different colors based on provided axis value.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -552,12 +552,12 @@ this.Content = sfRadialGauge;
|
|||
|
||||
## Axis label customization
|
||||
|
||||
The axis labels can be customized using the following properties
|
||||
The axis labels can be customized using the following properties:
|
||||
|
||||
* `TextColor` – Allows to customize the color of the labels.
|
||||
* `FontAttributes` – Allows to specify the font attribute for labels.
|
||||
* `FontSize` – Allows to specify the font size for labels.
|
||||
* `FontFamily` – Allows to specify the various font families for labels.
|
||||
* `TextColor` – Allows you to customize the color of the labels.
|
||||
* `FontAttributes` – Allows you to specify the font attribute for labels.
|
||||
* `FontSize` – Allows you to specify the font size for labels.
|
||||
* `FontFamily` – Allows you to specify the various font families for labels.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -597,9 +597,9 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Formatting axis label
|
||||
|
||||
The following property of the axis allows to customize the axis label text.
|
||||
The following property of the axis allows you to customize the axis label text.
|
||||
|
||||
* `LabelFormat` - Allows to customize the axis label with the globalized label format.
|
||||
* `LabelFormat` - Allows you to customize the axis label with the globalized label format.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -631,7 +631,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Label visibility
|
||||
|
||||
The `ShowLabels` property of axis allows to enable or disable the visibility of labels. The default value of the property is true.
|
||||
The `ShowLabels` property of axis allows you to enable or disable the visibility of labels. The default value of the property is true.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -663,7 +663,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Label placement
|
||||
|
||||
The radial axis allows to position the labels either inside or outside of the axis line using the `LabelPosition` property. By default, labels are positioned inside the axis line.
|
||||
The radial axis allows you to position the labels either inside or outside of the axis line using the `LabelPosition` property. By default, labels are positioned inside the axis line.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -769,21 +769,21 @@ N> The `OffsetUnit` property of axis is common for both the `TickOffset` and `La
|
|||
|
||||
## Tick customization
|
||||
|
||||
The major and minor tick lines of an axis can be customized using the `MajorTickStyle` and `MinorTickStyle` with below properties.
|
||||
The major and minor tick lines of an axis can be customized using the `MajorTickStyle` and `MinorTickStyle` by the following properties.
|
||||
|
||||
* `Length` – Specifics the length of ticks.
|
||||
|
||||
* `LengthUnit` – Allows to specify the tick length either in pixels or factor.
|
||||
* `LengthUnit` – Allows you to specify the tick length either in pixels or factor.
|
||||
|
||||
* `Stroke` – Allows to specify the color for tick line.
|
||||
* `Stroke` – Allows you to specify the color for tick line.
|
||||
|
||||
* `StrokeThickness`– Allows to specify the width for tick line.
|
||||
* `StrokeThickness`– Allows you to specify the width for tick line.
|
||||
|
||||
* `StrokeDashArray`– Allows to specify the dash array for tick line.
|
||||
* `StrokeDashArray`– Allows you to specify the dash array for tick line.
|
||||
|
||||
### Tick length in pixel
|
||||
|
||||
If the `LengthUnit` is set as a pixel, the tick lines will be rendered based on the pixel values given in `Length`.
|
||||
If the `LengthUnit` is set as a pixel, the tick lines will be rendered based on the pixel values given in `Length`.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -866,7 +866,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Tick style customization
|
||||
|
||||
The `Stroke`, `StrokeThickness` and `StrokeDashArray` properties allows you to customize the axis tick as shown in the following code example.
|
||||
The `Stroke`, `StrokeThickness`, and `StrokeDashArray` properties allows you to customize the axis tick as shown in the following code example.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -926,7 +926,7 @@ SfRadialGauge sfRadialGauge = new SfRadialGauge();
|
|||
|
||||
### Setting minor ticks count
|
||||
|
||||
The major ticks are generated based on the `Interval` property. Like major ticks, the minor ticks are generated using the `MinorTicksPerInterval` property of axis. By default, the count value of this property is 1.
|
||||
The major ticks are generated based on the `Interval` property. Like major ticks, the minor ticks are generated using the `MinorTicksPerInterval` property of axis. By default, the count value of this property is 1.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -990,7 +990,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Tick placement
|
||||
|
||||
The radial axis allows to position the ticks either inside or outside or center of the axis line using the `TickPosition` property. By default, ticks are positioned inside the axis line.
|
||||
The radial axis allows you to position the ticks either inside or outside or center of the axis line using the `TickPosition` property. By default, ticks are positioned inside the axis line.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -1022,7 +1022,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Tick position customization
|
||||
|
||||
The ticks can be moved near or far to the axis line using the `TickOffset` property. The `OffsetUnit` property of axis allows to specify the `TickOffset` either in factor or pixels and the default value of `OffsetUnit` is Pixel and the default value of `TickOffset` is double.NaN.
|
||||
The `OffsetUnit` property of axis allows you to specify the `TickOffset` either in factor or pixels and the default value of `OffsetUnit` and `TickOffset` is pixel and `double.NaN`.
|
||||
|
||||
### Tick offset in pixel
|
||||
|
||||
|
|
@ -1336,10 +1336,10 @@ public class RadialAxisExt : RadialAxis
|
|||
|
||||
### LabelCreated
|
||||
|
||||
The `LabelCreated` event occurs each time a label is created for use. The following properties can be customized for each label in this event args:
|
||||
The `LabelCreated` event is triggered each time a label is created for use. The following properties can be customized for each label in this event args:
|
||||
|
||||
* `Text` – Allows to customize the text property of label.
|
||||
* `Style` - Allows to customize the text style.
|
||||
* `Text` – Allows you to customize the text property of label.
|
||||
* `Style` - Allows you to customize the text style.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ documentation: ug
|
|||
|
||||
# Getting Started with .NET MAUI Radial Gauge
|
||||
|
||||
This section explains the steps required to add the `.NET MAUI Radial Gauge` control and its elements such as axis, range, pointer and annotation. This section covers only basic features needed to get started with Syncfusion radial gauge control.
|
||||
This section explains the steps required to add the `.NET MAUI Radial Gauge` control and its elements such as axis, range, pointer, and annotation. This section covers only basic features needed to get started with Syncfusion radial gauge control.
|
||||
|
||||
## Creating an application with .NET MAUI Radial Gauge
|
||||
## Creating an application using the .NET MAUI Radial Gauge
|
||||
|
||||
* Create a new .NET MAUI application in the Visual Studio.
|
||||
|
||||
|
|
@ -91,7 +91,7 @@ namespace GaugeMauiSample
|
|||
|
||||
## Add axis to the radial gauge
|
||||
|
||||
Axes contain a list of axis elements, where you can add any number of radial axes inside the gauge. You can specify the minimum and maximum values of axis using the `Minimum` and `Maximum` properties as demonstrated in the following code snippet.
|
||||
Axes contain a list of axis elements, to which you can add any number of radial axes inside the gauge. You can specify the minimum and maximum values of axis using the `Minimum` and `Maximum` properties as demonstrated in the following code sample.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
## Add range to the radial gauge
|
||||
|
||||
Ranges contain a list of range elements, where you can add any number of ranges inside the axis. You can specify the start value, end value and background color for range using the `StartValue`, `EndValue` and `Fill` properties as demonstrated in the following code.
|
||||
Ranges contain a list of range elements, to which you can add any number of ranges inside the axis. You can specify the start value, end value, and background color for range using the `StartValue`, `EndValue`, and `Fill` properties as demonstrated in the following code sample.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -186,7 +186,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
## Add pointer to the radial gauge
|
||||
|
||||
Pointers contains a list of pointer elements, where you can add any number of gauge pointers such as `NeedlePointer`, `RangePointer` and `MarkerPointer` inside the axis to indicate the value using the `Value` property.
|
||||
You can add any number of views such as text or image as an annotation inside the axis. The position of annotation can be customized using the `DirectionUnit`, `DirectionValue`, and `PositionFactor` properties as demonstrated in the following code sample.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,11 +60,11 @@ Gauge supports the following types of shapes:
|
|||
|
||||
The marker pointer can be customized using the following properties:
|
||||
|
||||
* `Fill` – Allows to customize the marker color.
|
||||
* `MarkerHeight` – Allows to specify the marker height.
|
||||
* `MarkerWidth` – Allows to specify the marker width.
|
||||
* `Stroke` – Allows to specify the border color for the marker.
|
||||
* `BorderWidth` – Allows to specify the border width of the marker.
|
||||
* `Fill` – Allows you to customize the marker color.
|
||||
* `MarkerHeight` – Allows you to specify the marker height.
|
||||
* `MarkerWidth` – Allows you to specify the marker width.
|
||||
* `Stroke` – Allows you to specify the border color for the marker.
|
||||
* `BorderWidth` – Allows you to specify the border width of the marker.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Needle Pointer in .NET MAUI Radial Gauge control | Syncfusion
|
||||
description: Learn here all about Needle Pointer feature of Syncfusion .NET MAUI Radial Gauge control with customization support.
|
||||
description: Learn here all about Needle Pointer feature of Syncfusion .NET MAUI Radial Gauge control using the customization support.
|
||||
platform: maui
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
|
|
@ -167,7 +167,7 @@ The knob can be customized using the following properties:
|
|||
|
||||
* `KnobStroke` – Specifies the knob border color.
|
||||
|
||||
* `KnobSizeUnit` – Allows to specify whether the value of knob radius and border width is in pixels or in factor.
|
||||
* `KnobSizeUnit` – Allows you to specify whether the value of knob radius and border width is in pixels or in factor.
|
||||
|
||||
### Knob radius customization
|
||||
|
||||
|
|
@ -269,7 +269,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
## Tail customization
|
||||
|
||||
The tail of the needle can be customized using the following properties,
|
||||
The tail of the needle can be customized using the following properties:
|
||||
|
||||
* `TailLength` – Specifies the length of tail either in pixels or factor.
|
||||
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ documentation: ug
|
|||
|
||||
# .NET MAUI Radial Gauge Overview
|
||||
|
||||
The Syncfusion .NET MAUI Radial Gauge is a multi-purpose data visualization control, that displays numerical values on a circular scale. It has a rich set of features such as axes, ranges, pointers, and annotations that are fully customizable and extendable. Use it to create speedometers, temperature monitors, dashboards, meter gauges, multi axis clocks, watches, progress indicators, compasses, and more.
|
||||
The Syncfusion .NET MAUI Radial Gauge is a multi-purpose data visualization control that displays numerical values on a circular scale. It has a rich set of features such as axes, ranges, pointers, and annotations that are fully customizable and extendable. Use it to create speedometers, temperature monitors, dashboards, meter gauges, multi axis clocks, watches, progress indicators, compasses, and more.
|
||||
|
||||
|
||||
|
||||
## Key Features
|
||||
|
||||
* **Axes** - The radial gauge axis is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements, such as labels, ticks, and axis line, can be easily customized with built-in properties
|
||||
* **Axes** - The radial gauge axis is a circular arc, in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements, such as labels, ticks, and axis line, can be easily customized with built-in properties
|
||||
* **Ranges** - Radial range is a visual element that helps to quickly visualize a value where it falls on the axis.
|
||||
* **Pointers** - Pointer is used to indicate values on an axis. Radial gauge has three types of pointers: needle pointer, marker pointer, and range pointer. All the pointers can be customized as needed.
|
||||
* **Pointer animation** - Animates the pointer in a visually appealing way when the pointer moves from one value to another.
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
## Setting gradient brush to the pointer
|
||||
|
||||
The `GradientStops` property of range pointer allows to specify the smooth color transition to pointer by specifying the different colors based on provided axis value.
|
||||
The `GradientStops` property of range pointer allows you to specify the smooth color transition to pointer by specifying the different colors based on provided axis value.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -159,7 +159,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
## Corner style customization
|
||||
|
||||
The `CornerStyle` property of range pointer specifies the corner type for pointer. The corners can be customized using the `BothFlat`, `BothCurve`, `StartCurve` and `EndCurve` options. The default value of this property is `BothFlat`.
|
||||
The `CornerStyle` property of range pointer specifies the corner type for the pointer. The corners can be customized using the `BothFlat`, `BothCurve`, `StartCurve`, and `EndCurve` options. The default value of this property is `BothFlat`.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ The following properties are used for the range customization:
|
|||
|
||||
### Equal range width
|
||||
|
||||
Range width can be controlled by `StartWidth` and `EndWidth` properties of range.
|
||||
Range width can be controlled by `StartWidth` and `EndWidth` properties of the range.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -113,7 +113,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Different range width
|
||||
|
||||
By setting different values to `StartWidth` and `EndWidth` property can create different width ranges.
|
||||
By setting different values to `StartWidth` and `EndWidth` property, you can create different width ranges.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -158,11 +158,11 @@ this.Content = sfRadialGauge;
|
|||
|
||||
When the `WidthUnit` is set as pixels, the range will be rendered based on the provided pixel values in `StartWidth` and `EndWidth`
|
||||
|
||||
If the `WidthUnit` is set as factor, the provided factor value in the start width and end width will be multiplied with the axis radius, respectively and calculated values assigned to the range width. The factor value ranges from 0 to 1.
|
||||
If the `WidthUnit` is set as factor, the provided factor value in the start width and end width will be multiplied with the axis radius, respectively and calculated values assigned to the range width. The factor value ranges from 0 to 1.
|
||||
|
||||
### Setting gradient brush to the range
|
||||
|
||||
The `GradientStops` property of `range` allows to specify the smooth color transition to pointer by specifying the different colors based on provided axis value.
|
||||
The `GradientStops` property of `range` allows you to specify the smooth color transition to the pointer by specifying the different colors based on provided axis value.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
@ -225,7 +225,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
### Position customization
|
||||
|
||||
The range can be moved far or near to the axis line with using the `RangeOffset` property. The `OffsetUnit` property of range allows to specify the `RangeOffset` either in factor or pixels, and the default value of `OffsetUnit` is Pixel.
|
||||
The range can be moved far or near to the axis line by using the `RangeOffset` property. The `OffsetUnit` property of range allows you to specify the `RangeOffset` either in factor or pixels, and the default value of `OffsetUnit` is pixel.
|
||||
|
||||
### Range offset in pixel
|
||||
|
||||
|
|
@ -317,7 +317,7 @@ this.Content = sfRadialGauge;
|
|||
|
||||
## Setting range color to axis elements
|
||||
|
||||
You can set range color to axis labels and ticks using the `UseRangeColorForAxis` property of axis,
|
||||
You can set range color to axis labels and ticks using the `UseRangeColorForAxis` property of axis.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<ul>
|
||||
<li><a href="/maui/cartesian-charts/column">Column Chart</a></li>
|
||||
<li><a href="/maui/cartesian-charts/line">Line Chart</a></li>
|
||||
<li><a href="maui/cartesian-charts/area">Area Chart</a></li>
|
||||
<li><a href="/maui/cartesian-charts/area">Area Chart</a></li>
|
||||
<li><a href="/maui/cartesian-charts/scatter">Scatter Chart</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче