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