【WPF】 OxyPlot圖表控制元件學習

乾杯Archer發表於2021-09-01
控制元件
最近在學習OxyPlot圖表控制元件，一些基本的學習心得，在這裡記錄一下，方便以後進行查詢。
 
一、引用
OxyPlot控制元件可以直接在VS的 “ Nuget ” 裡面下載
 
選擇：
 
0
下載最新版本的就行。
 
二、使用
 
在前端介面中，我們需要新增引用：
 
xmlns:oxy="http://oxyplot.org/wpf"
 
引用過後，新增圖表的承載控制元件PlotView：
 
1 <Grid>
2     <oxy:PlotView Model="{Binding Model}" />
3 </Grid>
 
其中的 “ Model ” 與 後端的 ViewModel 進行繫結，這個屬性相當於 ContentControl 控制元件的Content 屬性。
 
在後端的 ViewModel 中，我們定義 前端介面中繫結的屬性 “ Model ”:
 
1 private PlotModel model;
2 public PlotModel Model
3 {
4     get { return model; }
5     set { SetProperty(ref model, value); }
6 }
 
現在我們就可以開始 " 創作 " 了！
 
三、新增內容
 
這裡就直接上程式碼了，相應的解釋會放在程式碼中：
 
1、直線
 
首先我們先來畫一條直線
 1 Private void GetLine()
 2 {
 3     var tmp = new PlotModel 
 4     { 
 5         Title = "Demo", //圖表的Titile
 6         Subtitle = "直線" //圖表的說明
 7     };
 8     var series2 = new LineSeries 
 9     { 
10         Title = "Series 2", //線的說明
11         MarkerType = MarkerType.Square //標記點 的型別、形狀
12     };
13     series2.Points.Add(new DataPoint(0, 0));//新增線的第一個點座標 
14     series2.Points.Add(new DataPoint(4, 4));//新增線的第二個點的座標
15     tmp.Series.Add(series2);//將線新增到圖示的容器中
16     this.Model = tmp;//賦值
17 }
 
執行結果：
 
0

 

2、曲線
 
知道了直線怎麼畫，那麼看看平滑的曲線該怎麼畫
 
 1 Private void GetSpline（）
 2 {
 3       var lineSeries1 = new LineSeries { Title = "Series 1", MarkerType = MarkerType.Circle };
 4       //畫曲線主要是需要將線的 InterpolationAlgorithm 屬性 設定為 CanonicalSpline 就可變成曲線
 5       lineSeries1.InterpolationAlgorithm = InterpolationAlgorithms.CanonicalSpline; 
 6       lineSeries1.Points.Add(new DataPoint(0, 20));
 7             lineSeries1.Points.Add(new DataPoint(10, 21));
 8             lineSeries1.Points.Add(new DataPoint(20, 24));
 9             lineSeries1.Points.Add(new DataPoint(30, 22));
10             lineSeries1.Points.Add(new DataPoint(40, 17));
11             lineSeries1.Points.Add(new DataPoint(50, 21));
12             lineSeries1.Points.Add(new DataPoint(60, 23));
13             lineSeries1.Points.Add(new DataPoint(70, 27));
14             lineSeries1.Points.Add(new DataPoint(80, 27));
15             lineSeries1.Points.Add(new DataPoint(90, 22));
16             lineSeries1.Points.Add(new DataPoint(100, 25));
17             tmp.Series.Add(lineSeries1);
18             this.Model = tmp;
19 }

 

效果圖如下：
 
0

 

3、有填充的線
 
有時候有的需求是要將線進行填充，以達到更好的視覺效果：
 
以上面的例子為例：
 
 1 Private void GetSpline（）
 2 {
 3       //將線進行填充 ，主要是將線的型別改為 AreaSeries 即可 但是此時是不會顯示Mark點
 4       var lineSeries1 = new AreaSeries { Title = "Series 1", MarkerType = MarkerType.Circle };
 5       
 6       //畫曲線主要是需要將線的 InterpolationAlgorithm 屬性 設定為 CanonicalSpline 就可變成曲線
 7       lineSeries1.InterpolationAlgorithm = InterpolationAlgorithms.CanonicalSpline; 
 8       lineSeries1.Points.Add(new DataPoint(0, 20));
 9             lineSeries1.Points.Add(new DataPoint(10, 21));
10             lineSeries1.Points.Add(new DataPoint(20, 24));
11             lineSeries1.Points.Add(new DataPoint(30, 22));
12             lineSeries1.Points.Add(new DataPoint(40, 17));
13             lineSeries1.Points.Add(new DataPoint(50, 21));
14             lineSeries1.Points.Add(new DataPoint(60, 23));
15             lineSeries1.Points.Add(new DataPoint(70, 27));
16             lineSeries1.Points.Add(new DataPoint(80, 27));
17             lineSeries1.Points.Add(new DataPoint(90, 22));
18             lineSeries1.Points.Add(new DataPoint(100, 25));
19             tmp.Series.Add(lineSeries1);
20             this.Model = tmp;
21 }

 

0

 

4、標識
從 3、有填充的線 可以看到線的標識 遮擋住了一部分的線，這在構圖時可能會損失許多資料
 
為了避免這種情況，就必須要移動標識的位置
 
你在問什麼是標識？？？
 
0
 
這就是標識！！
 
以上面的例子為例：
 
 1 var tmp = new PlotModel { Title = "Demo", Subtitle = "曲線" };
 2             tmp.LegendBackground = OxyColor.FromArgb(200, 255, 255, 255);//設定背景顏色
 3             tmp.LegendBorder = OxyColors.Transparent;//設定邊框顏色
 4             tmp.LegendOrientation = LegendOrientation.Horizontal;//設定標識對其方式
 5             tmp.LegendPlacement = LegendPlacement.Outside;//設定標識在圖示中的相對位置 是在裡面還是在外面
 6             tmp.LegendPosition = LegendPosition.BottomLeft;//設定標識在整個容器中的位置 此時是左下角
 7             
 8       //將線進行填充 ，主要是將線的型別改為 AreaSeries 即可 但是此時是不會顯示Mark點
 9       var lineSeries1 = new AreaSeries { Title = "Series 1", MarkerType = MarkerType.Circle };      
10       //畫曲線主要是需要將線的 InterpolationAlgorithm 屬性 設定為 CanonicalSpline 就可變成曲線
11       lineSeries1.InterpolationAlgorithm = InterpolationAlgorithms.CanonicalSpline; 
12       lineSeries1.Points.Add(new DataPoint(0, 20));
13             lineSeries1.Points.Add(new DataPoint(10, 21));
14             lineSeries1.Points.Add(new DataPoint(20, 24));
15             lineSeries1.Points.Add(new DataPoint(30, 22));
16             lineSeries1.Points.Add(new DataPoint(40, 17));
17             lineSeries1.Points.Add(new DataPoint(50, 21));
18             lineSeries1.Points.Add(new DataPoint(60, 23));
19             lineSeries1.Points.Add(new DataPoint(70, 27));
20             lineSeries1.Points.Add(new DataPoint(80, 27));
21             lineSeries1.Points.Add(new DataPoint(90, 22));
22             lineSeries1.Points.Add(new DataPoint(100, 25));
23             tmp.Series.Add(lineSeries1);
24             this.Model = tmp;

 

效果圖如下：
 
0
 
 
下面是多條線的情況：
 1 var tmp = new PlotModel { Title = "Demo", Subtitle = "曲線" };
 2             tmp.LegendBackground = OxyColor.FromArgb(200, 255, 255, 255);//設定背景顏色
 3             tmp.LegendBorder = OxyColors.Transparent;//設定邊框顏色
 4             tmp.LegendOrientation = LegendOrientation.Horizontal;//設定標識對其方式
 5             tmp.LegendPlacement = LegendPlacement.Outside;//設定標識在圖示中的相對位置 是在裡面還是在外面
 6             tmp.LegendPosition = LegendPosition.BottomLeft;//設定標識在整個容器中的位置 此時是左下角
 7             
 8       //line1      
 9       //將線進行填充 ，主要是將線的型別改為 AreaSeries 即可 但是此時是不會顯示Mark點
10       var lineSeries1 = new AreaSeries { Title = "Series 1", MarkerType = MarkerType.Circle };            
11       //畫曲線主要是需要將線的 InterpolationAlgorithm 屬性 設定為 CanonicalSpline 就可變成曲線
12       lineSeries1.InterpolationAlgorithm = InterpolationAlgorithms.CanonicalSpline; 
13       lineSeries1.Points.Add(new DataPoint(0, 20));
14             lineSeries1.Points.Add(new DataPoint(10, 21));
15             lineSeries1.Points.Add(new DataPoint(20, 24));
16             lineSeries1.Points.Add(new DataPoint(30, 22));
17             lineSeries1.Points.Add(new DataPoint(40, 17));
18             lineSeries1.Points.Add(new DataPoint(50, 21));
19             lineSeries1.Points.Add(new DataPoint(60, 23));
20             lineSeries1.Points.Add(new DataPoint(70, 27));
21             lineSeries1.Points.Add(new DataPoint(80, 27));
22             lineSeries1.Points.Add(new DataPoint(90, 22));
23             lineSeries1.Points.Add(new DataPoint(100, 25));
24             tmp.Series.Add(lineSeries1);
25             
26             //Line2
27             var series2 = new LineSeries { Title = "Series 2", MarkerType = MarkerType.Square };
28             series2.Points.Add(new DataPoint(0, 0));
29             series2.Points.Add(new DataPoint(4, 4));
30             series2.Points.Add(new DataPoint(10, 12));
31             series2.Points.Add(new DataPoint(20, 16));
32             series2.Points.Add(new DataPoint(30, 25));
33             series2.Points.Add(new DataPoint(40, 5));
34             tmp.Series.Add(series2);
35             
36             this.Model = tmp;

 

執行效果如下：
 
0
 
 
5、設定座標軸，以及設定帶數值顯示的折線
 
 1 var tmp = new PlotModel { Title = "Demo", Subtitle = "曲線" };
 2             tmp.LegendBackground = OxyColor.FromArgb(200, 255, 255, 255);
 3             tmp.LegendBorder = OxyColors.Transparent;
 4             tmp.LegendOrientation = LegendOrientation.Horizontal;
 5             tmp.LegendPlacement = LegendPlacement.Outside;
 6             tmp.LegendPosition = LegendPosition.BottomLeft;
 7             tmp.LegendSymbolLength = 24;
 8 
 9             var linearAxis1 = new LinearAxis();
10             linearAxis1.MajorGridlineStyle = LineStyle.Solid;
11             linearAxis1.MinorGridlineStyle = LineStyle.Dot;
12             linearAxis1.Title = "Y";
13             linearAxis1.Minimum = 0;
14             linearAxis1.Maximum = 35;
15             tmp.Axes.Add(linearAxis1);
16 
17             var linearAxis2 = new LinearAxis();
18             linearAxis2.MajorGridlineStyle = LineStyle.Solid;
19             linearAxis2.MinorGridlineStyle = LineStyle.Dot;
20             linearAxis2.Position = AxisPosition.Bottom;
21             linearAxis2.Title = "X";
22             tmp.Axes.Add(linearAxis2);
23             
24             var lineSeries1 = new LineSeries { Title = "Series 1", MarkerType = MarkerType.Circle };
25          lineSeries1.LabelFormatString = "{1}";
26             lineSeries1.Points.Add(new DataPoint(0, 20));
27             lineSeries1.Points.Add(new DataPoint(10, 21));
28             lineSeries1.Points.Add(new DataPoint(20, 24));
29             lineSeries1.Points.Add(new DataPoint(30, 22));
30             lineSeries1.Points.Add(new DataPoint(40, 17));
31             lineSeries1.Points.Add(new DataPoint(50, 21));
32             lineSeries1.Points.Add(new DataPoint(60, 23));
33             lineSeries1.Points.Add(new DataPoint(70, 27));
34             lineSeries1.Points.Add(new DataPoint(80, 27));
35             lineSeries1.Points.Add(new DataPoint(90, 22));
36             tmp.Series.Add(lineSeries1);
37 
38             var series2 = new LineSeries { Title = "Series 2", MarkerType = MarkerType.Square };
39             series2.Points.Add(new DataPoint(0, 0));
40             series2.Points.Add(new DataPoint(4, 4));
41             series2.Points.Add(new DataPoint(10, 12));
42             series2.Points.Add(new DataPoint(20, 16));
43             series2.Points.Add(new DataPoint(30, 25));
44             series2.Points.Add(new DataPoint(40, 5));
45             
46          tmp.Series.Add(series2);    
47            this.Model = tmp;

 

執行圖如下：
 
0

 

暫時的學習就到這裡，剩餘的可能要以後才能更新。
 
如果有錯誤希望能夠及時得到大家的指導。

 

 

 

 

 

 

 
 
 

相關文章