OxyPlot 在 WPF 中的使用

OxyPlot 在 WPF 中的使用

一、OxyPlot 简介

OxyPlot 是一个跨平台的 .NET 开源绘图库,采用 MIT 许可证,支持在 WPF、WinForms、UWP、Xamarin 等多平台上高效绘制图表,以其灵活性和可扩展性而著称。在 WPF 应用中,OxyPlot.Wpf 通过封装专门针对 WPF 的控件,实现了轻量级、高性能的数据可视化。

二、OxyPlot 的核心概念

在使用 OxyPlot 之前,先了解以下几个核心概念,有助于理解后续的使用方法:

概念 说明
PlotModel 图表的数据模型,是所有图表元素(边框、数据线条、坐标轴、图例等)的容器,需绑定到界面控件上
PlotView / Plot WPF 中承载图表的两种控件:PlotView 搭配代码定义模型,简单灵活;Plot 适合在 XAML 中直接配置图表内容
Axes 坐标轴集合,可分别添加四个方向的坐标轴(底/顶/左/右),默认提供底部横坐标和左侧纵坐标
Series 图表数据系列,包括 LineSeries(折线图)、BarSeries(柱状图)、PieSeries(饼图)、ScatterSeries(散点图)等多种类型
Tracker 浮动的信息提示框,类似 ToolTip,鼠标移动到数据点上时显示详细信息

OxyPlot 支持折线图、柱状图、饼图、散点图、热力图等丰富的图表类型,可满足不同场景的可视化需求。

三、快速入门

步骤1:创建 WPF 项目

在 Visual Studio 中创建一个新的 WPF 应用程序项目,目标框架建议选择 .NET Framework 4.5 或更高版本,或 .NET 6/8 等长期支持版本。

步骤2:通过 NuGet 安装 OxyPlot.Wpf

方法一:使用包管理器控制台

powershell 复制代码
PM> Install-Package OxyPlot.Wpf

或安装特定版本:

powershell 复制代码
PM> Install-Package OxyPlot.Wpf -Version 2.1.2

方法二:通过 GUI 管理 NuGet 包

  • 在解决方案资源管理器中右键点击"引用" → "管理 NuGet 包"
  • 搜索"OxyPlot",选择"OxyPlot.Wpf"并安装
步骤3:添加命名空间引用

在 XAML 文件的 Window 或 UserControl 元素中添加 OxyPlot 的命名空间引用:

二选一

xml 复制代码
xmlns:oxy="http://oxyplot.org/wpf"

四、使用方式

使用 PlotView + Code-Behind(推荐)

这种方式在 ViewModel 或 Code-Behind 中创建 PlotModel 对象,通过数据绑定将其与 XAML 中的 PlotView 关联,结构清晰,适合 MVVM 模式。

步骤1:创建 ViewModel

在 ViewModel 中定义 PlotModel 属性:

csharp 复制代码
using OxyPlot;
using OxyPlot.Series;

public class MainViewModel
{
    public MainViewModel()
    {
        // 创建 PlotModel,设置标题
        var plotModel = new PlotModel { Title = "简单折线图" };
        
        // 创建折线数据系列并添加数据点
        var series = new LineSeries
        {
            Color = OxyColors.Red,
            Title = "数据曲线"
        };
        series.Points.Add(new DataPoint(0, 1));
        series.Points.Add(new DataPoint(1, 5));
        series.Points.Add(new DataPoint(2, 3));
        series.Points.Add(new DataPoint(3, 7));
        
        plotModel.Series.Add(series);
        this.PlotModel = plotModel;
    }
    
    public PlotModel PlotModel { get; }
}

步骤2:配置 XAML 界面

在 MainWindow.xaml 中设置 DataContext 并添加 PlotView 控件:

xml 复制代码
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:oxy="http://oxyplot.org/wpf"
        xmlns:local="clr-namespace:WpfApp"
        Title="OxyPlot 示例" Height="400" Width="600">
    
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    
    <Grid>
        <oxy:PlotView Model="{Binding PlotModel}" />
    </Grid>
</Window>

效果:

相关推荐
雨浓YN6 小时前
GKMLT通讯工具箱(WPF MVVM) - 06-OPCUA通讯
wpf
雨浓YN7 小时前
GKMLT通讯工具箱(WPF MVVM) - 03-西门子S7通讯
wpf
小邓的技术笔记9 小时前
.NET 10 使用 Microsoft.AspNetCore.OpenApi 实现 API 版本管理
.net
夏霞9 小时前
IIS 应用程序池 3 种标识:ApplicationPoolIdentity / LocalSystem / LocalService 权限区别(超清晰)
c#·.net
雨浓YN9 小时前
GKMLT通讯工具箱(WPF MVVM) - 05-WebAPI通讯
wpf
回忆2012初秋1 天前
Quartz.NET 全面解析与实战指南
.net
我是唐青枫1 天前
C#.NET ThreadLocal 深入解析:线程独享数据、性能收益与实战边界
c#·.net
软泡芙1 天前
【WPF 】MVVM 设计模式在 WPF 中的实战应用
设计模式·wpf
张小俊_1 天前
WPF 跨线程 UI 更新与硬编码赋值引发的 Bug 排查
c#·bug·wpf
唐青枫1 天前
别再把增删改查写成一锅粥!C#.NET CQRS 从原理到实战
c#·.net