【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;

运行图如下：

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

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

巴特西

【WPF】 OxyPlot图表控件学习

最新文章

热门文章