點(diǎn)擊下載Essential Studio for Xamarin正式版

本文介紹了如何在Xamarin.Forms中創(chuàng)建交互式圖表。本教程內(nèi)容較多，分為上下兩篇文章，這是下篇，內(nèi)容緊接上文！

為圖表創(chuàng)建數(shù)據(jù)模型

讓我們創(chuàng)建一個(gè)稱(chēng)為ChartDataModel的新類(lèi)，將其用作模型來(lái)保存圖表數(shù)據(jù)。

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

1.創(chuàng)建自定義圖表

讓我們從創(chuàng)建一個(gè)名為AreaSeriesChart的新類(lèi)開(kāi)始。

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

在此類(lèi)中，我們創(chuàng)建一個(gè)靜態(tài)方法來(lái)生成名為IEnumerableGenerateData（）的數(shù)據(jù)。

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) }; } } }

接下來(lái)，在AreaSeriesChart的構(gòu)造函數(shù)中，讓我們創(chuàng)建一個(gè)AreaSeries來(lái)顯示我們的數(shù)據(jù)。

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的構(gòu)造函數(shù)中，讓我們定義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.在應(yīng)用程序中顯示圖表

首先，我們將創(chuàng)建一個(gè)名為SyncfusionChartPage的新類(lèi)，該類(lèi)將從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分配為新創(chuàng)建的SyncfusionChartPage。

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

太棒了！現(xiàn)在，我們的應(yīng)用程序中有一個(gè)圖表可以顯示我們的數(shù)據(jù)。

3.使圖表具有交互性

首先，讓我們通過(guò)添加ChartTrackballBehavior來(lái)添加查看數(shù)據(jù)確切值的功能。

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()
    };
}

接下來(lái)，讓我們通過(guò)添加ChartZoomPanBehavior來(lái)添加平移和縮放功能。

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()
    };
}

現(xiàn)在我們有一個(gè)交互式圖表！

本文內(nèi)容到這里就結(jié)束了，您可以點(diǎn)擊下方鏈接查看該教程前半部分內(nèi)容~感興趣的朋友可以下載Essential Studio for Xamari試用版免費(fèi)體驗(yàn)~

相關(guān)內(nèi)容推薦：

Essential Studio for Xamarin教程：如何在Xamarin.Forms中創(chuàng)建交互式圖表（上）