Essential Studio for Xamarin教程:如何在Xamarin.Forms中创建交互式图表(下)

翻译|使用教程|编辑:莫成敏|2020-03-26 13:11:05.097|阅读 12 次

概述:本文介绍了如何在Xamarin.Forms中创建交互式图表。探讨了如何利用Syncfusion Charts来简化生活,减少计算量,并允许我们在Xamarin.Forms中使用跨平台API !

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

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

点击下载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中创建交互式图表(上)


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




标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Syncfusion https://www.syncfusion.com/blogs/post/creating-interactive-charts-in-xamarin-forms.aspx

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Essential Studio for Xamarin

全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms组件套包,包含最快的图表和网格。

在线
客服
在线
QQ
咨询
电话
173-8239-2642
购物车 反馈 返回
顶部
在线客服系统
live chat