點擊下載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中創建交互式圖表（上）