【WPF】 OxyPlot图表控件学习

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

运行图如下：

 

暂时的学习就到这里，剩余的可能要以后才能更新。

 

如果有错误希望能够及时得到大家的指导。