Essential Studio for Xamarin教程：如何在Xamarin.Forms中创建交互式图表（下）

Essential Studio for Xamarin是全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms组件套包，包含最快的图表和 格。

Essential Studio for Xamarin正式版

为图表创建数据模型

让我们创建一个称为ChartDataModel的新类，将其用作模型来保存图表数据。

class ChartDataModel{    public DateTime Date { get; set; }    public int Value { get; set; }}

1.创建自定义图表

让我们从创建一个名为AreaSeriesChart的新类开始。

class AreaSeriesChart : SfChart{    public AreaSeriesChart()    {    }}

在此类中，我们创建一个静态方法来生成名为IEnumerableGenerateData（）的数据。

class AreaSeriesChart : SfChart{    public AreaSeriesChart()    {    }    static IEnumerableGenerateData(int count, int maxValue)    {        var random = new Random();        for (int i = 0; i < count; i++) { yield return new ChartDataModel { Date = DateTime.Now.Subtract(TimeSpan.FromDays(i)), Value = random.Next(maxValue) }; } } }

接下来，在AreaSeriesChart的构造函数中，让我们创建一个AreaSeries来显示我们的数据。

public AreaSeriesChart(){    const int numberOfDays = 20;    const int maxValue = 100;    var areaSeries = new AreaSeries    {        Opacity = 0.9,        Label = nameof(ChartDataModel),        ItemsSource = GenerateData(numberOfDays, maxValue),        XBindingPath = nameof(ChartDataModel.Date),        YBindingPath = nameof(ChartDataModel.Value)    };    Series = new ChartSeriesCollection { areaSeries };}

最后，在AreaSeriesChart的构造函数中，让我们定义PrimaryAxis和SecondaryAxis。

public AreaSeriesChart(){    const int numberOfDays = 20;    const int maxValue = 100;    var areaSeries = new AreaSeries    {        Opacity = 0.9,        Label = nameof(ChartDataModel),        ItemsSource = GenerateData(numberOfDays, maxValue),        XBindingPath = nameof(ChartDataModel.Date),        YBindingPath = nameof(ChartDataModel.Value)    };    Series = new ChartSeriesCollection { areaSeries };    PrimaryAxis = new DateTimeAxis    {        IntervalType = DateTimeIntervalType.Days,        Interval = 1,        RangePadding = DateTimeRangePadding.Round,        Minimum = DateTime.Now.Subtract(TimeSpan.FromDays(numberOfDays - 1)),        Maximum = DateTime.Now    };    SecondaryAxis = new NumericalAxis    {        Minimum = 0,        Maximum = maxValue    };}

2.在应用程序中显示图表

首先，我们将创建一个名为SyncfusionChartPage的新类，该类将从Xamarin.Forms.ContentPage继承以显示新图表。

class SyncfusionChartPage : ContentPage{    public SyncfusionChartPage()    {        Title = "Syncfusion Area Series Chart";        Padding = new Thickness(0, 10, 0, 0);        Content = new AreaSeriesChart();    }}

最后，在App.cs中，我们将MainPage分配为新创建的SyncfusionChartPage。

public class App : Application{    public App()    {        MainPage = new NavigationPage(new SyncfusionChartPage());    }}

太棒了！现在，我们的应用程序中有一个图表可以显示我们的数据。

3.使图表具有交互性

首先，让我们通过添加ChartTrackballBehavior来添加查看数据确切值的功能。

public AreaSeriesChart(){    const int numberOfDays = 20;    const int maxValue = 100;    var areaSeries = new AreaSeries    {        Opacity = 0.9,        Label = nameof(ChartDataModel),        ItemsSource = GenerateData(numberOfDays, maxValue),        XBindingPath = nameof(ChartDataModel.Date),        YBindingPath = nameof(ChartDataModel.Value)    };    Series = new ChartSeriesCollection { areaSeries };    PrimaryAxis = new DateTimeAxis    {        IntervalType = DateTimeIntervalType.Days,        Interval = 1,        RangePadding = DateTimeRangePadding.Round,        Minimum = DateTime.Now.Subtract(TimeSpan.FromDays(numberOfDays - 1)),        Maximum = DateTime.Now    };    SecondaryAxis = new NumericalAxis    {        Minimum = 0,        Maximum = maxValue    };    ChartBehaviors = new ChartBehaviorCollection    {        new ChartTrackballBehavior()    };}

接下来，让我们通过添加ChartZoomPanBehavior来添加平移和缩放功能。

public AreaSeriesChart(){    const int numberOfDays = 20;    const int maxValue = 100;    var areaSeries = new AreaSeries    {        Opacity = 0.9,        Label = nameof(ChartDataModel),        ItemsSource = GenerateData(numberOfDays, maxValue),        XBindingPath = nameof(ChartDataModel.Date),        YBindingPath = nameof(ChartDataModel.Value)    };    Series = new ChartSeriesCollection { areaSeries };    PrimaryAxis = new DateTimeAxis    {        IntervalType = DateTimeIntervalType.Days,        Interval = 1,        RangePadding = DateTimeRangePadding.Round,        Minimum = DateTime.Now.Subtract(TimeSpan.FromDays(numberOfDays - 1)),        Maximum = DateTime.Now    };    SecondaryAxis = new NumericalAxis    {        Minimum = 0,        Maximum = maxValue    };    ChartBehaviors = new ChartBehaviorCollection    {        new ChartZoomPanBehavior(),        new ChartTrackballBehavior()    };}

现在我们有一个交互式图表！

相关内容推荐：

Essential Studio for Xamarin教程：如何在Xamarin.Forms中创建交互式图表（上）

想要购买该产品正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：