• WPF oxyPlot 使用总结


      oxyPlot能够简易的创建图表并且该库也在Github上面开源直通门。以下是笔者基础使用总结。本文例子的源码下载

    1、安装与引用

      新建一个wpf应用程序,然后使用Nuget控制台安装OxyPlot和OxyPlot.wpf直接键入。

    Install-Package Oxyplot
    Install-Package Oxyplot.Wpf

      你也可以在应用程序-->“引用”-->"右键"-->"管理Nuget包"进行检索oxyplot关键字,可以看到相应的类库引用。(吐槽下:Nuget访问很慢)

      你也可以直接通过上面的直通门去下载最新的源码自己编译。

    到此,已经将Oxyplot的类库引用到指定的应用程序上。

    2、 创建PlotViewModel简易画曲线

      在OxyPlot内部可以通过Serial进行定义图表,包含:LineSerial(线条--可以通过定义点进行画线条)、FunctionSerial(函数曲线)、AreaSerial(区域)、StairSerial等,笔者就只用到前两者。

      接下来实现一个画直线以及sin(x)的函数线的例子进行说明。

      在PlotViewModel内部添加SimplePlotModel属性(类型:PlotModel),并且在PlotViewMode构造函数内部进行实例化,同时将定义好的直线以及sin(x)函数线添加该属性上。在MainWindow.xaml进行定义PlotView标签,同时绑定SimplePlotModel。具体的实现如下代码

    PlotViewModel构造函数

     public PlotViewModel()
            {
                SimplePlotModel=new PlotModel();
                //线条
                var lineSerial = new LineSeries() {  Title="直线实例"};
                lineSerial.Points.Add(new DataPoint(0, 0));
                lineSerial.Points.Add(new DataPoint(10, 10));
                SimplePlotModel.Series.Add(lineSerial);
    
                //函数sin(x)
                var funcSerial = new FunctionSeries((x) => { return Math.Sin(x); }, 0, 10, 0.1, "y=sin(x)");
                SimplePlotModel.Series.Add(funcSerial);
            }
    

    MainWindow.xmal 

      <Grid>
            <oxy:PlotView Model="{Binding Path= SimplePlotModel}"></oxy:PlotView>
            
        </Grid>
    
      /// <summary>
        /// MainWindow.xaml 的交互逻辑
        /// </summary>
        public partial class MainWindow : Window
        {
            private PlotViewModel _viewModel;
    
            public MainWindow()
            {
                InitializeComponent();
                _viewModel = new PlotViewModel();
                //画直线
                this.DataContext = _viewModel;
            }
        }
    

      将会得到如下图所示的图标

    3、定制坐标轴

    在OxyPlot可以通过Axes进行自定义坐标轴,其中包含了LinearAxis、DateAxis、LogarithmicAxis、 CategoryAxis等比较实用的坐标轴

    我们可以直接定义一个LinearAxis进行定义X、Y轴从0开始,最大10,如下例举比较常用的坐标轴属性(PS:x轴的设置想类似),效果如下图所示

            //定义y轴
                LinearAxis leftAxis = new LinearAxis()
                {
                     Position=AxisPosition.Left,
                     Minimum=0,
                     Maximum=10,
                     Title = "Y轴",//显示标题内容
                     TitlePosition = 1,//显示标题位置
                     TitleColor = OxyColor.Parse("#d3d3d3"),//显示标题位置
                     IsZoomEnabled = false,//坐标轴缩放关闭
                     IsPanEnabled = false,//图表缩放功能关闭
                     //MajorGridlineStyle = LineStyle.Solid,//主刻度设置格网
                     //MajorGridlineColor = OxyColor.Parse("#7379a0"),
                     //MinorGridlineStyle = LineStyle.Dot,//子刻度设置格网样式
                     //MinorGridlineColor = OxyColor.Parse("#666b8d")
                };    
    

     

    4、实时动态添加曲线

    现实当中我们比较常用的实时获取数据生成曲线,所以我们可以通过调用SimplePlotModel.InvalidatePlot(true)进行刷新xmal上的图像。笔者只以简单的直线添加点进行动态生成线条,相应的代码如下所示:

          var rd = new Random();
                Task.Factory.StartNew(() =>
                {
                    while (true)
                    {
                        var x = rd.NextDouble() * 1000 % 10;
                        var y = rd.NextDouble() * 50 % 9;
                        lineSerial.Points.Add(new DataPoint(x, y));
                        SimplePlotModel.InvalidatePlot(true);
                        Thread.Sleep(500);
                    }
                });

    5、本文例子的源码下载

    源码 (如果觉得不错请点赞下,有误的话请指出,卤鸽在此感谢)

    参考材料

    http://blog.csdn.net/coolfeiweb/article/details/23454141?utm_source=tuicool

    http://oxyplot.org/documentation

     

  • 相关阅读:
    map
    构造函数和对象
    for...in...and for each...in...
    事件
    JSON
    css伪类
    正则表达式
    什么是DOM、什么是BOM
    CSS颜色
    grid-layout实验
  • 原文地址:https://www.cnblogs.com/luge/p/Wpf_Oxyplot_Sample.html
Copyright © 2020-2023  润新知