added kb how to create chart multiple axis
This commit is contained in:
PROGRESS\doyordan
Родитель
3b22d0c983
Коммит
3b651255ab
|
|
@ -0,0 +1,230 @@
|
||||||
|
---
|
||||||
|
title: Multiple Axes in Xamarin Chart
|
||||||
|
description: how to create multiple horizontal and vertical chart axis
|
||||||
|
type: how-to
|
||||||
|
page_title: Multiple Chart Axes in Xamarin
|
||||||
|
slug: chart-xamarin-multiple-axis
|
||||||
|
position:
|
||||||
|
tags: chart, xamarin, multiple, axis, axes, horizontal, vertical, xamarin.forms
|
||||||
|
ticketid: 1469277
|
||||||
|
res_type: kb
|
||||||
|
---
|
||||||
|
|
||||||
|
## Environment
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Product Version</td>
|
||||||
|
<td>2020.2.624.1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Product</td>
|
||||||
|
<td>Chart for Xamarin Cross-Platform</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
## Description
|
||||||
|
|
||||||
|
This article will show you how to create chart with multiple axis using [Telerik UI for Xamarin RadChart control]({%slug chart-overview%}).
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Scenario with Multiple vertical and/or horizontal chart axis can be achieved using custom renderer.
|
||||||
|
|
||||||
|
Here is a sample RadCartesianChart definition with Line and Bar Series:
|
||||||
|
|
||||||
|
```XAML
|
||||||
|
<Grid>
|
||||||
|
<telerikChart:RadCartesianChart Margin="0, 20, 0, 0">
|
||||||
|
|
||||||
|
<telerikChart:RadCartesianChart.BindingContext>
|
||||||
|
<local:ViewModel/>
|
||||||
|
</telerikChart:RadCartesianChart.BindingContext>
|
||||||
|
|
||||||
|
<telerikChart:RadCartesianChart.HorizontalAxis>
|
||||||
|
<telerikChart:CategoricalAxis/>
|
||||||
|
</telerikChart:RadCartesianChart.HorizontalAxis>
|
||||||
|
|
||||||
|
<telerikChart:RadCartesianChart.VerticalAxis>
|
||||||
|
<telerikChart:NumericalAxis/>
|
||||||
|
</telerikChart:RadCartesianChart.VerticalAxis>
|
||||||
|
<telerikChart:RadCartesianChart.ChartBehaviors>
|
||||||
|
<telerikChart:ChartPanAndZoomBehavior ZoomMode="Both"
|
||||||
|
PanMode="Both"
|
||||||
|
HandleDoubleTap="True"/>
|
||||||
|
</telerikChart:RadCartesianChart.ChartBehaviors>
|
||||||
|
<telerikChart:RadCartesianChart.Series>
|
||||||
|
<telerikChart:BarSeries ItemsSource="{Binding CategoricalData}">
|
||||||
|
<telerikChart:BarSeries.ValueBinding>
|
||||||
|
<telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
|
||||||
|
</telerikChart:BarSeries.ValueBinding>
|
||||||
|
<telerikChart:BarSeries.CategoryBinding>
|
||||||
|
<telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
|
||||||
|
</telerikChart:BarSeries.CategoryBinding>
|
||||||
|
</telerikChart:BarSeries>
|
||||||
|
|
||||||
|
<telerikChart:LineSeries ItemsSource="{Binding CategoricalData2}">
|
||||||
|
<telerikChart:LineSeries.ValueBinding>
|
||||||
|
<telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
|
||||||
|
</telerikChart:LineSeries.ValueBinding>
|
||||||
|
<telerikChart:LineSeries.CategoryBinding>
|
||||||
|
<telerikChart:PropertyNameDataPointBinding PropertyName="Time"/>
|
||||||
|
</telerikChart:LineSeries.CategoryBinding>
|
||||||
|
</telerikChart:LineSeries>
|
||||||
|
</telerikChart:RadCartesianChart.Series>
|
||||||
|
</telerikChart:RadCartesianChart>
|
||||||
|
</Grid>
|
||||||
|
```
|
||||||
|
|
||||||
|
For the sample project we will use the following business model and ViewModel:
|
||||||
|
|
||||||
|
```C#
|
||||||
|
public class CategoricalData
|
||||||
|
{
|
||||||
|
public object Category { get; set; }
|
||||||
|
public double Value { get; set; }
|
||||||
|
public DateTime Time { get; set; }
|
||||||
|
}
|
||||||
|
public class ViewModel
|
||||||
|
{
|
||||||
|
public ViewModel()
|
||||||
|
{
|
||||||
|
this.CategoricalData = GetCategoricalData();
|
||||||
|
this.CategoricalData2 = GetCategoricalData2();
|
||||||
|
}
|
||||||
|
|
||||||
|
public ObservableCollection<CategoricalData> CategoricalData { get; set; }
|
||||||
|
public ObservableCollection<CategoricalData> CategoricalData2 { get; set; }
|
||||||
|
|
||||||
|
public static ObservableCollection<CategoricalData> GetCategoricalData()
|
||||||
|
{
|
||||||
|
var date = DateTime.Today;
|
||||||
|
var data = new ObservableCollection<CategoricalData>
|
||||||
|
{
|
||||||
|
new CategoricalData { Category = "A", Value = 0.63, Time = date.AddDays(1) },
|
||||||
|
new CategoricalData { Category = "B", Value = 0.85, Time = date.AddDays(10)},
|
||||||
|
new CategoricalData { Category = "C", Value = 0.75, Time = date.AddDays(20)},
|
||||||
|
new CategoricalData { Category = "D", Value = 0.96, Time = date.AddDays(30)},
|
||||||
|
new CategoricalData { Category = "E", Value = 0.78, Time = date.AddDays(40)},
|
||||||
|
};
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static ObservableCollection<CategoricalData> GetCategoricalData2()
|
||||||
|
{
|
||||||
|
var date = DateTime.Now;
|
||||||
|
var data = new ObservableCollection<CategoricalData>
|
||||||
|
{
|
||||||
|
new CategoricalData { Category = "A", Time = date.AddDays(1) , Value = 0.53},
|
||||||
|
new CategoricalData { Category = "B", Time = date.AddDays(10), Value = 0.65},
|
||||||
|
new CategoricalData { Category = "C", Time = date.AddDays(20), Value = 0.55},
|
||||||
|
new CategoricalData { Category = "D", Time = date.AddDays(30), Value = 0.76},
|
||||||
|
new CategoricalData { Category = "E", Time = date.AddDays(40), Value = 0.58},
|
||||||
|
};
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Android Custom Renderer:
|
||||||
|
|
||||||
|
Create a class inside the Android project, for example **CustomChartRenderer** that inherits from **Telerik.XamarinForms.ChartRenderer.Android.CartesianChartRenderer**
|
||||||
|
|
||||||
|
```C#
|
||||||
|
public class CustomChartRenderer : Telerik.XamarinForms.ChartRenderer.Android.CartesianChartRenderer
|
||||||
|
{
|
||||||
|
public CustomChartRenderer(Context context) : base(context)
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Telerik.XamarinForms.Chart.RadCartesianChart> e)
|
||||||
|
{
|
||||||
|
base.OnElementChanged(e);
|
||||||
|
|
||||||
|
var series = this.Control.Series.ToArray();
|
||||||
|
|
||||||
|
AddSecondaryHorizontalAxis(series[1]);
|
||||||
|
AddSecondaryVerticalAxis(series[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void AddSecondaryVerticalAxis(Java.Lang.Object lineSeries)
|
||||||
|
{
|
||||||
|
if (lineSeries is Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries)
|
||||||
|
{
|
||||||
|
var series = lineSeries as Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries;
|
||||||
|
|
||||||
|
Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.LinearAxis verticalAxisBar = new Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.LinearAxis();
|
||||||
|
verticalAxisBar.HorizontalLocation = Com.Telerik.Widget.Chart.Engine.Axes.Common.AxisHorizontalLocation.Right;
|
||||||
|
series.VerticalAxis = verticalAxisBar;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void AddSecondaryHorizontalAxis(Java.Lang.Object lineSeries)
|
||||||
|
{
|
||||||
|
if (lineSeries is Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries)
|
||||||
|
{
|
||||||
|
var series = lineSeries as Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries;
|
||||||
|
|
||||||
|
Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.DateTimeCategoricalAxis horizontalAXis = new Com.Telerik.Widget.Chart.Visualization.CartesianChart.Axes.DateTimeCategoricalAxis();
|
||||||
|
horizontalAXis.VerticalLocation = Com.Telerik.Widget.Chart.Engine.Axes.Common.AxisVerticalLocation.Top;
|
||||||
|
series.HorizontalAxis = horizontalAXis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
and register the renderer:
|
||||||
|
|
||||||
|
```C#
|
||||||
|
[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(ChartAxis.Droid.CustomChartRenderer))]
|
||||||
|
```
|
||||||
|
|
||||||
|
### iOS Custom Renderer:
|
||||||
|
|
||||||
|
Create a call inside the iOS project, for example **CustomChartRenderer** which inherits from **Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartRenderer**
|
||||||
|
|
||||||
|
```C#
|
||||||
|
public class CustomChartRenderer : Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartRenderer
|
||||||
|
{
|
||||||
|
public CustomChartRenderer()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override void UpdateNativeWidget()
|
||||||
|
{
|
||||||
|
base.UpdateNativeWidget();
|
||||||
|
|
||||||
|
TelerikUI.TKChartNumericAxis tKChartNumericAxis = new TelerikUI.TKChartNumericAxis();
|
||||||
|
tKChartNumericAxis.Position = TelerikUI.TKChartAxisPosition.Right;
|
||||||
|
this.Control.AddAxis(tKChartNumericAxis);
|
||||||
|
var lineSeries = this.Control.Series[1] as TelerikUI.TKChartLineSeries;
|
||||||
|
lineSeries.YAxis = tKChartNumericAxis;
|
||||||
|
|
||||||
|
|
||||||
|
TelerikUI.TKChartDateTimeAxis dateTimeAxis = new TelerikUI.TKChartDateTimeAxis();
|
||||||
|
dateTimeAxis.Position = TelerikUI.TKChartAxisPosition.Top;
|
||||||
|
dateTimeAxis.MajorTickInterval = 10;
|
||||||
|
dateTimeAxis.MajorTickIntervalUnit = TelerikUI.TKChartDateTimeAxisIntervalUnit.Days;
|
||||||
|
this.Control.AddAxis(dateTimeAxis);
|
||||||
|
lineSeries.XAxis = dateTimeAxis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
and register the renderer:
|
||||||
|
|
||||||
|
```C#
|
||||||
|
[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(ChartAxis.iOS.CustomChartRenderer))]
|
||||||
|
```
|
||||||
|
|
||||||
|
## See Also
|
||||||
|
|
||||||
|
- [Android chart Axes Overview]({%slug chart-axes-overview%})
|
||||||
|
- [iOS chart Axes Overview]({%slug chart-ios-axes-overview%})
|
||||||
Загрузка…
Ссылка в новой задаче