彩票走势图

Mindfusion教程:WinForms中的实时图表

翻译|使用教程|编辑:王香|2019-02-18 09:35:05.000|阅读 725 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

下载Mindfusion最新版本

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

Mindfusion

我们首先创建一个空的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&rdquo;并使用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.
            

购买Mindfusion正版授权,请点击“”哟!


标签:JavaScript 图表

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP