温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Xamarin图表开发基础教程(8)OxyPlot框架

发布时间:2020-08-16 15:22:36 来源:ITPUB博客 阅读:253 作者:大学霸 栏目:移动开发

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

  Xamarin图表开发基础教程(8)OxyPlot框架

图1.3  Android的效果与 iOS的效果

 

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI