OxyPlot曲线图控件的使用

官网：

https://github.com/oxyplot/oxyplot

官方文档：

https://oxyplot.readthedocs.io/en/latest/

Nuget包

平台	Nuget包	版本
WPF	OxyPlot.Wpf	2.1.2
Windows Forms	OxyPlot.WindowsForms	2.1.2
Avalonia	OxyPlot.Avalonia	2.1.0
WPF(推荐)	OxyPlot.SkiaSharp.Wpf	2.1.2

WPF下开发推荐使用OxyPlot.SkiaSharp.Wpf，貌似性能会更好一点。引用的命名空间有点区别，其它的跟OxyPlot.Wpf是一致的。

相关快捷键

 OxyPlot有不少隐藏的功能，刚开始使用不了解的话很可能会不知道。

操作	功能
鼠标控件内容区滚动	同时放大/缩小曲线图的X轴和Y轴的内容
鼠标在X轴标尺上滚动	放大/缩小曲线图的X轴方向的内容
鼠标在Y轴标尺上滚动	放大/缩小曲线图的Y轴方向的内容
按住Ctrl键，双击鼠标右键	曲线图内容恢复自适应显示
按住Ctrl键，用鼠标右键画框	局放放大框选的内容区

 

Avalonia平台的使用

 OxyPlot.Avalonia 2.1.0基于Avalonia 0.10.11开发。基于Avalonia 11.0.0的版本还没有发布。

 1、安装Nuget包。

Install-Package OxyPlot.Avalonia

2、在Main方法里增加OxyPlotModule.EnsureLoaded()方法调用。

public static void Main(string[] args)
{
    OxyPlotModule.EnsureLoaded();
    AppBuilder.Configure<App>()
        .UsePlatformDetect()
        .StartWithClassicDesktopLifetime(args);
}

3、在App.xaml文件中增加样式引用。

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="SimpleDemo.App">
  <Application.Styles>
    <StyleInclude Source="resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"/>
    <StyleInclude Source="resm:Avalonia.Themes.Default.Accents.BaseLight.xaml?assembly=Avalonia.Themes.Default"/>
    <StyleInclude Source="resm:OxyPlot.Avalonia.Themes.Default.xaml?assembly=OxyPlot.Avalonia"/>
  </Application.Styles>
</Application>

4、前台代码

<Window x:Class="SimpleDemo.MainWindow"
        xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:oxy="clr-namespace:OxyPlot.Avalonia;assembly=OxyPlot.Avalonia" 
        xmlns:simpleDemo="clr-namespace:SimpleDemo;assembly=SimpleDemo"
        Title="OxyPlot SimpleDemo" Height="480" Width="640">
    <Window.DataContext>
        <simpleDemo:MainViewModel />
    </Window.DataContext>
    <Grid>
        <!-- The OxyPlot control is binding to a PlotModel in the MainViewModel -->
        <oxy:PlotView Model="{Binding Model}" />
    </Grid>
</Window>

5、后台代码

public class MainViewModel
{
    public MainViewModel()
    {
        // Create the plot model
        var tmp = new PlotModel { Title = "Simple example", Subtitle = "using OxyPlot" };

        // Create two line series (markers are hidden by default)
        var series1 = new LineSeries { Title = "Series 1", MarkerType = MarkerType.Circle };
        series1.Points.Add(new DataPoint(0, 0));
        series1.Points.Add(new DataPoint(10, 18));
        series1.Points.Add(new DataPoint(20, 12));
        series1.Points.Add(new DataPoint(30, 8));
        series1.Points.Add(new DataPoint(40, 15));

        var series2 = new LineSeries { Title = "Series 2", MarkerType = MarkerType.Square };
        series2.Points.Add(new DataPoint(0, 4));
        series2.Points.Add(new DataPoint(10, 12));
        series2.Points.Add(new DataPoint(20, 16));
        series2.Points.Add(new DataPoint(30, 25));
        series2.Points.Add(new DataPoint(40, 5));

        // Add the series to the plot model
        tmp.Series.Add(series1);
        tmp.Series.Add(series2);
        this.Model = tmp;
    }

    public PlotModel Model { get; private set; }
}

运行效果：

 

Windows Forms平台的使用

1、安装Nuget包

Install-Package OxyPlot.WindowsForms

2、前台增加OxyPlot控件

可以直接从工具箱拖放到窗体上。

3、后台代码

using OxyPlot;
using OxyPlot.Series;
using System;
using System.Windows.Forms;

namespace OxyPlotWinFormsDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            var myModel = new PlotModel { Title = "Example 1" };
            myModel.Series.Add(new FunctionSeries(Math.Cos, 0, 10, 0.1, "cos(x)"));
            this.plotView1.Model = myModel;
        }
    }
}

显示效果