Mindfusion教程：WinForms中的实时图表

时间 2021-01-14

在此示例中，我们将构建一个实时读取其数据并每秒更新一次的折线图。

我们首先创建一个空的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.