【WPF】 OxyPlot图表控件学习

2021年9月2日 8点热度 0条评论 来源: 干杯Archer

最近在学习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;     

 

运行图如下:  

 

暂时的学习就到这里,剩余的可能要以后才能更新。   如果有错误希望能够及时得到大家的指导。

 

 

 

 

 

 

     

    原文作者:干杯Archer
    原文地址: https://www.cnblogs.com/ganbei/p/15216894.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。