Wpf中使用OxyPlot制作图表

OxyPlot是.NET下一款非常强大的图表库，几乎可以涵盖各种图表的制作，且支持.net下各种平台和运行库，本文通过示例介绍该如何在Wpf中使用OxyPlot。

本文使用的开发工具是Vs2019，sdk使用的是.net5

首先，使用Vs2019创建一个wpf项目，通过包管理器添加OxyPlot.Wpf依赖或者通过命令行添加依赖：

dotnet add package OxyPlot.Wpf

然后添加Prism.Core依赖，添加此依赖主要是为了mvvm的支持

dotnet add package Prism.Core

在项目中添加MainWindowViewModel.cs类，使其继承自BindableBase类，BindableBase是mvvm模式的viewmodel基类，它实现了INotifyPropertyChanged接口，可以通过数据绑定让UI响应viewmodel的变化

在MainWindowViewModel添加如下代码：

using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Legends;
using OxyPlot.Series;
using Prism.Mvvm;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;namespace WpfChart.Test
{    public class MainWindowViewModel : BindableBase{public MainWindowViewModel(){// 构造函数中同步生成数据，无需设置mvvm属性// _ChartModel = CreateChartModel(data);// 异步获取图表数据GetData().ContinueWith(x => {// 设置mvvm属性更新图表ModelChartModel = CreateChartModel(x.Result);// 不使用mvvm属性，使用下面方法通知UI// RaisePropertyChanged(nameof(ChartModel));});}private PlotModel _ChartModel;/// <summary>/// 图表Model的mvvm属性，可通知UI更新/// </summary>public PlotModel ChartModel{get { return _ChartModel; }set { SetProperty(ref _ChartModel, value); }}......}

在MainWindow.xaml中添加如下内容：

<Window ...xmlns:oxyWpf="http://oxyplot.org/wpf"...><Grid><oxyWpf:PlotView Foreground="Black" Margin="5 5 5 0" Background="Transparent" Model="{Binding ChartModel}" /></Grid>
</Window>

在MainWindow.xaml.cs中为数据绑定添加数据上下文

    public partial class MainWindow : Window{public MainWindow(){InitializeComponent();// 添加数据绑定上下文DataContext = new MainWindowViewModel();}}

这里我们通过数据绑定的方法显示图表，需要添加实体对象类：

    public class ChartData{public DateTime Date { get; set; }public double Total { get; set; }public double PassRate { get; set; }}

添加测试数据，模拟后台查询方法：

        /// <summary>/// 模拟后台异步查询表格数据/// </summary>/// <returns></returns>private Task<List<ChartData>> GetData(){var data = new List<ChartData>(){new ChartData { Date = DateTime.Now.Date.AddDays(-15), Total = 121, PassRate = .84 },new ChartData { Date = DateTime.Now.Date.AddDays(-14), Total = 88, PassRate = .92 },new ChartData { Date = DateTime.Now.Date.AddDays(-13), Total = 180, PassRate = .35 },new ChartData { Date = DateTime.Now.Date.AddDays(-12), Total = 150, PassRate = .46 },new ChartData { Date = DateTime.Now.Date.AddDays(-11), Total = 78, PassRate = .58 },new ChartData { Date = DateTime.Now.Date.AddDays(-10), Total = 99, PassRate = .71 },new ChartData { Date = DateTime.Now.Date.AddDays(-9), Total = 143, PassRate = .81 },new ChartData { Date = DateTime.Now.Date.AddDays(-8), Total = 56, PassRate = .85 },new ChartData { Date = DateTime.Now.Date.AddDays(-7), Total = 108, PassRate = .95 },new ChartData { Date = DateTime.Now.Date.AddDays(-6), Total = 79, PassRate = .78 },new ChartData { Date = DateTime.Now.Date.AddDays(-5), Total = 63, PassRate = .65 },new ChartData { Date = DateTime.Now.Date.AddDays(-4), Total = 157, PassRate = .58 },new ChartData { Date = DateTime.Now.Date.AddDays(-3), Total = 148, PassRate = .36 },new ChartData { Date = DateTime.Now.Date.AddDays(-2), Total = 115, PassRate = .48 },new ChartData { Date = DateTime.Now.Date.AddDays(-1), Total = 89, PassRate = .63 },new ChartData { Date = DateTime.Now.Date, Total = 121, PassRate = .90 },};return Task.FromResult(data);}

添加生成图表模型的方法，方法中创建一个图表模型，在其中添加一个日期x轴，一个数字y轴，一个百分比y轴，还添加了柱状图和折线图两个不同的图表系列，并将测试数据绑定到这两个图表系列中，代码如下：

        /// <summary>/// 根据数据生成图表模型/// </summary>/// <param name="list"></param>/// <returns></returns>private PlotModel CreateChartModel(List<ChartData> list){var model = new PlotModel() { Title = "测试"};// 添加图例说明model.Legends.Add(new Legend{LegendPlacement = LegendPlacement.Outside,LegendPosition = LegendPosition.BottomCenter,LegendOrientation = LegendOrientation.Horizontal,LegendBorderThickness = 0,LegendTextColor = OxyColors.LightGray});// 定义第一个Y轴y1，显示数量var ay1 = new LinearAxis(){Key = "y1",Position = AxisPosition.Left,};// 定义第二个Y轴y2，显示百分比var ay2 = new LinearAxis(){Key = "y2",Position = AxisPosition.Right,Minimum = 0.1,MajorStep = .1,Maximum = 1,LabelFormatter = v => $"{v:P1}"};// 在第二Y轴坐标50%和80%处显示网格线ay2.ExtraGridlines = new double[2] { 0.5, 0.8 };ay2.ExtraGridlineStyle = LineStyle.DashDashDot; // 网格线样式// 定义X轴为日期轴，从15天前到现在var minValue = DateTimeAxis.ToDouble(DateTime.Now.Date.AddDays(-15));var maxValue = DateTimeAxis.ToDouble(DateTime.Now.Date);var ax = new DateTimeAxis(){Minimum = minValue,Maximum = maxValue,StringFormat = "yyyy-MM-dd日",MajorStep = 2,Position = AxisPosition.Bottom,Angle = 45,IsZoomEnabled = false};// 定义柱形图序列，指定数据轴为Y1轴var totalBarSeries = new LinearBarSeries();totalBarSeries.YAxisKey = "y1";totalBarSeries.BarWidth = 10;//totalBarSeries.FillColor = OxyColor.FromArgb(69, 76, 175, 80);//totalBarSeries.StrokeThickness = 1;//totalBarSeries.StrokeColor = OxyColor.FromArgb(255, 76, 175, 80);totalBarSeries.Title = "总数";// 点击时弹出的label内容totalBarSeries.TrackerFormatString = "{0}\r\n{2:dd}日: {4:0}";// 设置数据绑定源和字段totalBarSeries.ItemsSource = list;totalBarSeries.DataFieldX = "Date";totalBarSeries.DataFieldY = "Total";// 下面为手动添加数据方式//totalBarSeries.Points.Add(new DataPoint(DateTimeAxis.ToDouble(DateTime.Now.Date.AddDays(-15)), 333));// 定义三色折线图序列，指定数据轴为Y2轴var passedRateSeries = new ThreeColorLineSeries();passedRateSeries.Title = "通过率";passedRateSeries.YAxisKey = "y2";// 点击时弹出的label内容passedRateSeries.TrackerFormatString = "{0}\r\n{2:dd}日: {4:P1}";// 设置颜色阈值范围passedRateSeries.LimitHi = .8;passedRateSeries.LimitLo = .5;// 设置数据绑定源和字段passedRateSeries.ItemsSource = list;passedRateSeries.DataFieldX = "Date";passedRateSeries.DataFieldY = "PassRate";// 下面为手动添加数据方式//passedRateSeries.Points.Add(new DataPoint(DateTimeAxis.ToDouble(DateTime.Now.Date.AddDays(-15)), .750));// 添加图标资源model.Series.Add(totalBarSeries);model.Series.Add(passedRateSeries);model.Axes.Add(ay1);model.Axes.Add(ay2);model.Axes.Add(ax);// 设置图形边框model.PlotAreaBorderThickness = new OxyThickness(1, 0, 1, 1);return model;}

编译运行后效果如下：

官方源码地址，里面包含上百个示例图表 GitHub - oxyplot/oxyplot: A cross-platform plotting library for .NET

本文源码下载

Wpf中使用OxyPlot制作图表相关推荐

在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
WPF中制作带中国农历的万年历
WPF中制作带中国农历的万年历原文:WPF中制作带中国农历的万年历本例应用.net 2.0中的ChineseLunisolarCalendar类,制作出带中国农历的万年历. 先看看效果图片(已缩 ...
WPF中桌面屏保的制作（主要代码）
原文:WPF中桌面屏保的制作(主要代码) 制作要点: (1) 使用System.Windows.Threading.DispatcherTimer; (2) 将Window属性设置为: t ...
01.WPF中制作无边框窗体
[引用:]http://blog.csdn.net/johnsuna/article/details/1893319 众所周知,在WinForm中,如果要制作一个无边框窗体,可以将窗体的FormBor ...
WPF中制作立体效果的文字或LOGO图形
WPF中制作立体效果的文字或LOGO图形原文:WPF中制作立体效果的文字或LOGO图形较久之前,我曾写过一篇:"WPF绘制党徽(立体效果,Cool) "的博文.有感兴趣的朋友来 ...
WPF中嵌套charts图表查询数据
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:WPF .Charts 撰写日期:2020年09月16 ...
WPF中制作立体效果的文字或LOGO图形(续)
原文:WPF中制作立体效果的文字或LOGO图形(续) 上篇"WPF中制作立体效果的文字或LOGO图形"(http://blog.csdn.net/johnsuna/archive/ ...
2023年美赛论文写作方法——图表篇：美赛O奖中那些好看的图表是如何制作的？
思路:永久更新,全网最新最全,持续更新中,查看最下方QQ群获取. 2023年美赛论文写作方法--图表篇:美赛O奖中那些好看的图表是如何制作的? 相信很多关注七七的小伙伴们都知道数模论文最重要的是:简洁 ...
在WPF中制作正圆形公章
之前,我利用C#与GDI+程序制作过正圆形公章(利用C#制作公章 ,C#制作公章[续])并将它集成到一个小软件中(个性印章及公章的画法及实现),今天我们来探讨一下WPF中如何制作正圆形公章. 先看大致 ...
[WPF]WPF中材质制作——图片和矢量图之争
如果要做下面这样的一个东西作为背景.你会如何做呢? 图1. 目标背景效果方案一,用PS画出来.然后把这个PNG图片作为背景色.这个方案可以,但是如果想让这个线的颜色可配置呢?如何线的粗细不确定呢?无 ...

Wpf中使用OxyPlot制作图表

Wpf中使用OxyPlot制作图表相关推荐

最新文章

热门文章