最近在學習OxyPlot圖表控制元件，一些基本的學習心得，在這裡記錄一下，方便以後進行查詢。
一、引用
OxyPlot控制元件可以直接在VS的 “ Nuget ” 裡面下載
選擇：
下載最新版本的就行。
二、使用
在前端介面中，我們需要新增引用：
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 }
執行結果：
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 }
效果圖如下：
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 }
4、標識
從 3、有填充的線 可以看到線的標識 遮擋住了一部分的線，這在構圖時可能會損失許多資料
為了避免這種情況，就必須要移動標識的位置
你在問什麼是標識？？？
這就是標識！！
以上面的例子為例：
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;
效果圖如下：
下面是多條線的情況：
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;
執行效果如下：
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;
執行圖如下：
暫時的學習就到這裡，剩餘的可能要以後才能更新。
如果有錯誤希望能夠及時得到大家的指導。