在此示例中,我们将构建一个实时读取其数据并每秒更新一次的折线图。
我们首先创建一个空的WinForms项目。我们假设您已经安装了Charting for WinForms组件,您可以在VisualStudio工具箱中看到包含图表组件的列表。
拖动LineChart控件并将其放在窗体上。您现在应该看到对您需要自动添加到项目中的三个库的引用:
MindFusion.Charting;
MindFusion.Charting.WinForms;
MindFusion.Common;
1.系列和数据
我们的图表将在X轴上绘制时间戳。这就是我们选择DateTimeSeries类来创建图表系列的原因。构造函数需要两个列表 - 一个具有DateTime值,另一个具有double值。它们分别为X轴和Y轴提供数据。我们还必须提供另外两个参数:一个用于开始,一个用于时间段结束。
List<DateTime> dates = new List<DateTime>(); List<double> values = new List<double>();
为了模仿实时功能,我们将使用计时器。我们的计时器每秒会产生一个随机数。一开始我们将有一个没有值的列表。渐渐地,我们将填充值,一旦达到100,我们将开始删除第一个值并在数组末尾添加新值。
这就是我们初始化计时器的方式:
Random ran; ran = new Random(); Timer dataTimer = new Timer(); dataTimer.Tick += new EventHandler(GenerateData); dataTimer.Interval = 1000; dataTimer.Start();
我们来看看GenerateData方法:
private void GenerateData(object sender, EventArgs e) { dates.Add(DateTime.Now); values.Add(2 + ran.NextDouble() * 8.0); if (dates.Count > 100) { dates.RemoveAt(0); values.RemoveAt(0); } ... }
我们总是添加当前的DateTime。由于计时器每秒都会滴答,这正是我们想要的。一旦值为100,我们就开始删除列表开头的值。
现在让我们创建DateTime系列。它需要周期开始和结束的参数。我们总是将第一个和最后一个DateTime值分配为此系列的DateTime数据的边界:
DateTimeSeries series = new DateTimeSeries(dates, values, dates[0], dates[dates.Count-1]);
然后我们看看我们是否已经添加了一个系列,如果是的话 - 替换它。如果没有添加系列 - 添加新系列:
if (lineChart1.Series.Count > 0) lineChart1.Series[0] = series; else lineChart1.Series.Add(series);
默认情况下,DateTimeSeries从X轴渲染其值 - DateTime实例作为X轴的标签。我们可以使用DateTimeFormat属性自定义它们的外观。预定义的DateTimeFormat成员没有选项,其中值作为时间戳呈现为“14:23:34”。因此,我们选择DateTimeFormat “CustomDateTime”并使用CustomDateTime指定格式:
series.DateTimeFormat = DateTimeFormat.CustomDateTime; series.CustomDateTimeFormat = "H:mm:ss";
2. X轴
我们希望每个时刻只能看到最后10个值。应该渲染其他90或者它们,但是用户必须滚动才能看到它们。我们使用DateTimeSeries的MinValue和MaxValue属性实现:
series.MinValue = 0; series.MaxValue = 0.1 * dates.Count;
为了只渲染最后10个系列,我们使用XAxis属性 - MaxValue和MinValue一旦DateTimeSeries 的MaxValue大于1,这意味着至少添加了10个值,我们调整了值的可见范围。 X轴,只有最后10个可见:
if (series.MaxValue > 1) { lineChart1.XAxis.MaxValue = series.MaxValue; lineChart1.XAxis.MinValue = series.MaxValue - 1.0; }
我们还为此轴设置了title:
lineChart1.XAxis.Title = "Time";
让我们使用ShowXCoordinates属性隐藏在DateTime标记顶部渲染的数值:
lineChart1.ShowXCoordinates = false;
3.Y轴
lineChart1.YAxis.MinValue = 0; lineChart1.YAxis.MaxValue = 20; lineChart1.YAxis.Interval = 2;
我们还更改了轴标题,我们使用NumberFormat属性来渲染具有浮点的间隔:
lineChart1.YAxis.Title = "Visitors (in thousands)"; lineChart1.YAxis.NumberFormat = "N";
4.Grid
让我们渲染垂直网格条纹。我们希望它们是虚线和浅灰色。我们使用GridType GridColor和GridLineStyle来自定义网格:
lineChart1.GridType = GridType.Vertical; lineChart1.Theme.GridLineStyle = System.Drawing.Drawing2D.DashStyle.Dash; lineChart1.Theme.GridLineColor = Color.FromArgb(192, 192, 192);
请注意,GridColor和GridLineStyle是LineChart的Theme属性的属性,添加一个额外的 - 当用户沿轴滚动图表时停止网格条纹移动:
lineChart1.PinGrid = true;
5.图例
图例从Series的Title属性中获取其标签。在我们的例子中我们设置:
series.Title = "Server Requests";
我们想要更改图例背景以使图例更容易被发现:
lineChart1
我们使用半透明画笔,当用户将图例移动到另一个图表元素时,可以看到图表细节。
6.线条颜色
我们想要用红色渲染线条。我们选择MixedSeriesStyle类作为我们应用程序的样式类。您可以使用适合您的任何其他* SeriesStyle类:
// assign a reb brush for the series lineChart1.Plot.SeriesStyle = new MixedSeriesStyle() { UniformStrokeThickness = 5, UniformStroke = new MindFusion.