C#开发Android移动应用系列之OxyPlot图表应用

其实通过上两次的介绍，Xamarin通过路由跳转和数据绑定已经可以完成大部分的工作了。

今天再来分享一下利用OxyPlot在移动端展示图表，这样对于上位机的一些数据展示会非常直观和方便。

• OxyPlot画图表

1. 安装OxyPlot库，由于OxyPlot对于Xamarin的Android、IOS和Forms有不同版本，记得选择Xamarin的Forms版本，不然会在渲染的时候报错，别问我是怎么知道的

2. 在视图模型中，创建一个PlotModel对象并设置图表的类型和数据

using OxyPlot;
using OxyPlot.Legends;
using OxyPlot.Series;
using System.ComponentModel;
using System.Runtime.CompilerServices;


namespace XamarinApp01
{
    public class MyViewModel : INotifyPropertyChanged
    {
        private PlotModel plotModel;

        public PlotModel PlotModel
        {
            get { return plotModel; }
            set
            {
                plotModel = value;
                OnPropertyChanged(nameof(PlotModel));
            }
        }

        public MyViewModel()
        {
            PlotModel = new PlotModel { Title = "My Chart" };

            // 创建一个折线图的数据系列
            var series = new LineSeries
            {
                Title = "Series 1",
                Color = OxyColors.Blue,
                StrokeThickness = 2
            };

            // 添加图表的数据点
            series.Points.Add(new DataPoint(1, 2));
            series.Points.Add(new DataPoint(2, 3));
            series.Points.Add(new DataPoint(3, 1));
            series.Points.Add(new DataPoint(4, 4));
            series.Points.Add(new DataPoint(5, 2));

            // 将数据系列添加到图表模型中
            PlotModel.Series.Add(series);

            // 创建一个折线图的数据系列
            var series2 = new LineSeries
            {
                Title = "Series 2",
                Color = OxyColors.Red,
                StrokeThickness = 2,
                LineStyle = LineStyle.LongDash
            };

            // 添加图表的数据点
            series2.Points.Add(new DataPoint(1, 3));
            series2.Points.Add(new DataPoint(2, 4));
            series2.Points.Add(new DataPoint(3, 2));
            series2.Points.Add(new DataPoint(4, 3));
            series2.Points.Add(new DataPoint(5, 1));

            // 将数据系列添加到图表模型中
            PlotModel.Series.Add(series2);
            // 设置图列显示
            PlotModel.Legends.Add(new Legend());
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

}

  3. 将视图模型绑定到内容页上

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using OxyPlot;
using OxyPlot.Series;


namespace XamarinApp01
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new MyViewModel();
        }
    }
}

  4. 在想要展示图表的内容页（ContentPage）中，添加一个PlotView控件

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
             x:Class="XamarinApp01.MainPage">

    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="500"></RowDefinition>
            </Grid.RowDefinitions>
            <oxy:PlotView Model="{Binding PlotModel}" />
        </Grid>
    </StackLayout>

</ContentPage>

  5. 在Xamarin中使用OxyPlot时，OxyPlot需要一个特定的处理器用于绑定。在Android项目中，可以在MainActivity.cs文件中的OnCreate方法中加入初始化方法。

这步一定要加，不然加载时会报初始化失败的错误。

using System;

using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.OS;

namespace XamarinApp01.Droid
{
    [Activity(Label = "XamarinApp01", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize )]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            OxyPlot.Xamarin.Forms.Platform.Android.PlotViewRenderer.Init();
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            
            LoadApplication(new App());
        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }
}