半岛外围网上直营

点击下载Essential Studio for Xamarin正式版

本文介绍了如何在Xamarin.Forms中创建交互式图表。本教程内容较多，分为上下两篇文章，这是下篇，内容紧接上文！

为图表创建数据模型

让我们创建一个称为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 Xamari试用版免费体验~

相关内容推荐：

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