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平臺的線圖效果