【WPF】 OxyPlot图表控件学习
最近在学习OxyPlot图表控件，一些基本的学习心得，在这里记录一下，方便以后进行查找。
一、引用
OxyPlot控件可以直接在VS的 “ Nuget ” 里面下载
选择：
下载最新版本的就行。
二、使用
在前端界面中，我们需要添加引用：
xmlns:oxy="//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;
运行图如下：
暂时的学习就到这里，剩余的可能要以后才能更新。
如果有错误希望能够及时得到大家的指导。
