C#开发Android移动应用系列之OxyPlot图表应用
By
jerrxjr1220
at 2023-08-17 • 0人收藏 • 360人看过
其实通过上两次的介绍,Xamarin通过路由跳转和数据绑定已经可以完成大部分的工作了。
今天再来分享一下利用OxyPlot在移动端展示图表,这样对于上位机的一些数据展示会非常直观和方便。
OxyPlot画图表
安装OxyPlot库,由于OxyPlot对于Xamarin的Android、IOS和Forms有不同版本,记得选择Xamarin的Forms版本,不然会在渲染的时候报错,别问我是怎么知道的
在视图模型中,创建一个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); } } }
2 个回复 | 最后更新于 2023-08-17
登录后方可回帖
实际安装到手机上还要注意Android的版本与手机版本是否适配