WPF中使用OxyPlot动态绘制曲线图

发布时间 2024-01-05 14:33:04作者: wzwyc

安装Nuget包:

Install-Package OxyPlot.Wpf

XAML代码:

<Window
    x:Class="OxyPlotDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:OxyPlotDemo"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:oxy="http://oxyplot.org/wpf"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <Grid>
        <oxy:PlotView Model="{Binding DynamicCurve}" />
    </Grid>
</Window>

后台代码:

using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Series;
using System.Diagnostics;
using System.Windows.Threading;

namespace OxyPlotDemo;

public class MainViewModel
{
    private PerformanceCounter cpuCounter;

    public MainViewModel()
    {
        cpuCounter = new PerformanceCounter("Processor", "% Processor Time", "_Total");

        this.DynamicCurve = new PlotModel { Title = "Example 1" };
        OxyPlot.Axes.LinearAxis bottomAxis = new OxyPlot.Axes.LinearAxis()
        {
            Position = AxisPosition.Bottom,
            //IsAxisVisible = false,//X轴不显示
            //Title = "X轴",//显示标题内容
            //TitlePosition = 1,//显示标题位置
            //TitleColor = OxyColor.Parse("#d3d3d3"),//显示标题位置
            IsZoomEnabled = false,//坐标轴缩放关闭
            IsPanEnabled = false,//图表缩放功能关闭
            MajorGridlineStyle = LineStyle.Solid,
            MinorGridlineStyle = LineStyle.Dot,
        };
        //定义y轴
        OxyPlot.Axes.LinearAxis leftAxis = new OxyPlot.Axes.LinearAxis()
        {
            Position = AxisPosition.Left,
            Minimum = 0,
            Maximum = 100,
            //Title = "Y轴",//显示标题内容
            //TitlePosition = 1,//显示标题位置
            //TitleColor = OxyColor.Parse("#d3d3d3"),//显示标题位置
            IsZoomEnabled = false,//坐标轴缩放关闭
            IsPanEnabled = false,//图表缩放功能关闭
            MajorGridlineStyle = LineStyle.Solid,
            MinorGridlineStyle = LineStyle.Dot,
        };
        DynamicCurve.Axes.Add(bottomAxis);
        DynamicCurve.Axes.Add(leftAxis);
        series = new LineSeries()
        {
            Color = OxyColors.Green,
            StrokeThickness = 2,
            //MarkerSize = 3,
            //MarkerStroke = OxyColors.DarkGreen,
            //MarkerType = MarkerType.Diamond,
            Title = "Temp"
        };
        this.DynamicCurve.Series.Add(series);

        DispatcherTimer timer = new DispatcherTimer();
        timer.Interval = TimeSpan.FromMilliseconds(10);
        timer.Tick += (s, e) =>
        {
            double cpuUsage = cpuCounter.NextValue();

            series.Points.Add(new DataPoint(index++, cpuUsage));
        };
        timer.Start();

        DispatcherTimer timer2 = new DispatcherTimer();
        timer2.Interval = TimeSpan.FromMilliseconds(100);
        timer2.Tick += (s, e) =>
        {
            DynamicCurve.InvalidatePlot(true);
        };
        timer2.Start();
    }

    public PlotModel DynamicCurve { get; private set; }

    private LineSeries series;
    private int index;
}

测试了一下动态曲线图的效率情况。因为是获取CPU的使用率,所以值的动态还是比较大的。加到1万个点左右的时候,貌似界面已经有点卡顿了。