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

By jerrxjr1220 at 2023-08-17 • 0人收藏 • 291人看过

其实通过上两次的介绍,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);
        }
    }
}

无标题.png

2 个回复 | 最后更新于 2023-08-17
2023-08-17   #1

实际安装到手机上还要注意Android的版本与手机版本是否适配

2023-08-17   #2

不错,很详细

登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...