Xamarin图表开发基础教程（8）OxyPlot框架

Xamarin图表开发基础教程（8）OxyPlot框架

【示例OxyPlotFormsDemo】在Xamarin.Forms中实现线图的显示。

（1）打开Xamarin.Forms项目。

（2）将OxyPlot.Xamarin.Forms组件添加到各个子项目中的引入中。

（3）打开OxyPlotFormsDemo.Android子项目的MainActivity.cs文件，初始化OxyPlot渲染器，代码如下：

using System;

using Android.App;

using Android.Content.PM;

using Android.Runtime;

using Android.Views;

using Android.Widget;

using Android.OS;

namespace OxyPlotFormsDemo.Droid

{

    [Activity(Label = "OxyPlotFormsDemo", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity

    {

        protected override void OnCreate(Bundle savedInstanceState)

        {

            TabLayoutResource = Resource.Layout.Tabbar;

            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);

            Xamarin.Essentials.Platform.Init(this, savedInstanceState);

            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

            OxyPlot.Xamarin.Forms.Platform.Android.PlotViewRenderer.Init();

            LoadApplication(new App());

        }

    }

}

（4）打开OxyPlotFormsDemo.iOS子项目的AppDelegate.cs文件，初始化OxyPlot渲染器，代码如下：

using System;

using System.Collections.Generic;

using System.Linq;

using Foundation;

using UIKit;

namespace OxyPlotFormsDemo.iOS

{

    [Register("AppDelegate")]

    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate

    {

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)

        {

            global::Xamarin.Forms.Forms.Init();

            OxyPlot.Xamarin.Forms.Platform.iOS.PlotViewRenderer.Init();

            LoadApplication(new App());

            return base.FinishedLaunching(app, options);

        }

    }

}

　　

（5）打开App.xaml.cs文件，完成剩余的步骤，即创建PlotView视图、绘制图表、设置显示模式等。代码如下：

using OxyPlot;

using OxyPlot.Axes;

using OxyPlot.Series;

using OxyPlot.Xamarin.Forms;

using System;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace OxyPlotFormsDemo

{

    public partial class App : Application

    {

        public App()

        {

            MainPage = new ContentPage

            {

                //创建并将主页面的内容设置为PlotView

                Content = new PlotView

                {

                    Model = CreatePlotModel(),

                    VerticalOptions = LayoutOptions.Fill,

                    HorizontalOptions = LayoutOptions.Fill,

                }

            };

        }

        //绘制图表

        private PlotModel CreatePlotModel()

        {

            //创建图表模式

            var plotModel = new PlotModel

            {

                Title = "OxyPlot Demo"

            };

            //添加坐标轴

            plotModel.Axes.Add(new LinearAxis { Position = AxisPosition.Bottom });

            plotModel.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Maximum = 10, Minimum = 0 });

            //创建数据列

            var series1 = new LineSeries

            {

                Title = "Data",

                MarkerType = MarkerType.Circle,

                MarkerSize = 4,

                MarkerStroke = OxyColors.White

            };

            //添加数据点

            series1.Points.Add(new DataPoint(0.0, 6.0));

            series1.Points.Add(new DataPoint(1.4, 2.1));

            series1.Points.Add(new DataPoint(2.0, 4.2));

            series1.Points.Add(new DataPoint(3.3, 2.3));

            series1.Points.Add(new DataPoint(4.7, 7.4));

            series1.Points.Add(new DataPoint(6.0, 6.2));

            series1.Points.Add(new DataPoint(8.9, 8.9));

            //添加数据列

            plotModel.Series.Add(series1);

            return plotModel;

        }

        ……

    }

}

运行程序，会看到如图1.3所示的效果。

 

图1.3  Android的效果与 iOS的效果