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

 

posted @ 2015-05-07 21:58  卤鸽  阅读(24068)  评论(13编辑  收藏  举报