Xamarin圖表開發基礎教程（6）OxyPlot框架

Xamarin圖表開發基礎教程（6）OxyPlot框架

Xamamin iOS中繪製線圖OxyPlotiOSDemo

【示例OxyPlotiOSDemo】下面將實現線圖的顯示。具體的操做步驟以下：

（1）打開Xamarin.iOS項目。

（2）將OxyPlot.Xamarin.iOS組件添加到項目中的引入中。

（3）打開ViewController.cs文件，完成剩餘的步驟，即建立PlotView視圖、繪製圖表、設置顯示模式以及顯示PlotView。代碼以下：

using Foundation;

using System;

using UIKit;

using OxyPlot.Xamarin.iOS;

using OxyPlot;

using OxyPlot.Axes;

using OxyPlot.Series;

namespace OxyPlotiOSDemo

{

    public partial class ViewController : UIViewController

    {

        public ViewController (IntPtr handle) : base (handle)

        {

        }

        public override void ViewDidLoad ()

        {

            base.ViewDidLoad ();

            // Perform any additional setup after loading the view, typically from a nib.

            //建立PlotView視圖

            PlotView plotView = new PlotView

            {

                Frame = this.View.Frame

            };

            plotView.Model=CreatePlotModel();                                                    //設置顯示模式

            this.View.Add(plotView);                                                                        //將PlotView視圖添加到主視圖上

        }

        //繪製圖表

        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.2所示的效果。

圖1.2  Xamarin.iOS平臺的線圖效果