0%

oxyplot的初次使用

oxyplot简介

oxyplot

oxyplot是一个跨平台的作图库,其核心库可以移植到多种平台使用,定制化的控件可以在WPF, Windows 8, Windows Phone, Windows Phone Silverlight, Windows Forms, Silverlight, GTK#, Xwt, Xamarin.iOS, Xamarin.Android, Xamarin.Forms and Xamarin.Mac使用。oxyplot文档目前还在建设,在我使用中没有查阅到有帮助的信息,只能从oxylot的github上clone,然后学习Source/Examples给的实例。

oxplot安装和添加控件

因为oxyplot的文档资源还在建设中,所以并没有给出如何在vstudio的toolbox中添加控件的方法。我又去查阅了其他.net下的graphics库,发现了liveCharts库,其文档资源丰富,照其教程编译了一个example,感觉和winform的画风有差距,更偏向于heml的svg,但是,采用相同方法将oxyplot的control成功添加进了toolbox,猜想此方法具有通用性。
具体的:

1.新建一个项目

2.在解决方案窗口又击引用,选择NuGet(如果vstudio没有自带,需额外安装)

oxyplot_1
oxyplot_2

3.在NuGet中搜索oxplot,选择oxyplot.WinForm安装,安装成后,编译生成

oxyplot_3

4.调出toolbox工具栏,右击选择其他项,浏览文件夹到debug下,在生成文件文件中添加oxyplot.WinForm.dll,确定后会将oxyplot的plotview控件添加进入工具栏。

oxyplot_4
oxyplot_5
oxyplot_5

winform简单的示例

根据github上的简单示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
namespace WindowsFormsDemo
{
using System;
using System.Drawing;
using System.Windows.Forms;

using OxyPlot;
using OxyPlot.Series;

public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
var pm = new PlotModel
{
Title = "Trigonometric functions",
Subtitle = "Example using the FunctionSeries",
PlotType = PlotType.Cartesian, // 定义plot类型为笛卡尔坐标系
Background = OxyColors.White
};
pm.Series.Add(new FunctionSeries(Math.Sin, -10, 10, 0.1, "sin(x)")); //在PlotModel中添加数据点,数据点的产生方式为FunctionSerie函数
pm.Series.Add(new FunctionSeries(Math.Cos, -10, 10, 0.1, "cos(x)"));
pm.Series.Add(new FunctionSeries(t => 5 * Math.Cos(t), t => 5 * Math.Sin(t), 0, 2 * Math.PI, 0.1, "cos(t),sin(t)"));
plot1.Model = pm; //plot1为form中的oxyplot控件plotview的name,将生成的plotModel传递给plotview显示
}
}
}

其中,FunctionSeries 根据oxyplot文档解释数据点的产生方式应该是通过String.Format方式,框架作者将其封装好,直接调用,例如我要用的StairStepSeries产生阶梯信号。

使用StairStepSeries产生阶梯曲线

oxyplot/Source/Examples/ExampleLibrary/Series/StairStepSeriesExamples.cs中给出了StairStepSeries的示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// --------------------------------------------------------------------------------------------------------------------
// <copyright file="StairStepSeriesExamples.cs" company="OxyPlot">
// Copyright (c) 2014 OxyPlot contributors
// </copyright>
// <summary>
// Provides examples for the <see cref="StairStepSeries" />.
// </summary>
// --------------------------------------------------------------------------------------------------------------------

namespace ExampleLibrary
{
using System;

using OxyPlot;
using OxyPlot.Series;

/// <summary>
/// Provides examples for the <see cref="StairStepSeries" />.
/// </summary>
[Examples("StairStepSeries"), Tags("Series")]
public static class StairStepSeriesExamples
{
[Example("StairStepSeries")]
public static PlotModel StairStepSeries()
{
return CreateExampleModel(new StairStepSeries());
}

[Example("StairStepSeries with labels")]
public static PlotModel StairStepSeriesWithLabels()
{
return CreateExampleModel(new StairStepSeries { LabelFormatString = "{1:0.00}" });
}

[Example("StairStepSeries with markers")]
public static PlotModel StairStepSeriesWithMarkers()
{
return CreateExampleModel(new StairStepSeries
{
Color = OxyColors.SkyBlue,
MarkerType = MarkerType.Circle,
MarkerSize = 6,
MarkerStroke = OxyColors.White,
MarkerFill = OxyColors.SkyBlue,
MarkerStrokeThickness = 1.5
});
}

[Example("StairStepSeries with thin vertical lines")]
public static PlotModel StairStepSeriesThinVertical()
{
return CreateExampleModel(new StairStepSeries
{
StrokeThickness = 3,
VerticalStrokeThickness = 0.4,
MarkerType = MarkerType.None
});
}

[Example("StairStepSeries with dashed vertical lines")]
public static PlotModel StairStepSeriesDashedVertical()
{
return CreateExampleModel(new StairStepSeries
{
VerticalLineStyle = LineStyle.Dash,
MarkerType = MarkerType.None
});
}

/// <summary>
/// Creates an example model and fills the specified series with points.
/// </summary>
/// <param name="series">The series.</param>
/// <returns>A plot model.</returns>
private static PlotModel CreateExampleModel(DataPointSeries series)
{
var model = new PlotModel { Title = "StairStepSeries", LegendSymbolLength = 24 };
series.Title = "sin(x)";
for (double x = 0; x < Math.PI * 2; x += 0.5)
{
series.Points.Add(new DataPoint(x, Math.Sin(x)));
}

model.Series.Add(series);
return model;
}
}
}

重点看到最后CreateExampleModel,其中series其实为

1
var series = new StairStepseries();

StairStepseries中添加数据点

1
series.Points.Add(new DataPoint(x, Math.Sin(x));

最后将添加完成的StairStepseries曲线,添加进PlotModel

1
plotModel.Series.Add(stairStepseries)

用oxyplot画出的正弦曲线

sin

使用oxyplot的StairStepSeries得到的采样阶梯曲线

stairstep