跟我一起学习做Visifire图表实时更新示例

　　Visifire是由visifire公司开发的一款WPF&Silverlight图表控件，可全面应用于WEB、桌面和移动应用程序，支持图表仪表所有的属性实时更新。本文我们将学习如何使用Visifire图表创建一个实时更新的示例。

注意：请确保你已经下载了visifire并获取了visifire程序集。下载地址：

Step1：

打开Page.xaml文件。Page.xaml文件的默认内容如下所示：

xmlns=""

xmlns:x=""

Width="400" Height="300">

接下来，在网格内创建2个名为 ChartGrid1 和ChartGrid2的网格，并将其置于父网格内，如图所示（蓝色突出部分）：

xmlns=""

xmlns:x=""

Width="400" Height="300">

Step 2：

我们将在网格中创建2个图表：ChartGrid1和ChartGrid2。打开隐藏文件Page.xaml.cs的代码，确保已定义如下的命名空间：

using Visifire.Charts;
using Visifire.Commons;

Step 3:

创建InitializeData()函数，从构造函数中调用该函数，如下所示：

public Page()
{
InitializeComponent();
InitializeData();
}
private void InitializeData()
{
CreateColumnChart();
CreateLineChart();
}

Step 4：

声明全部变量chart1和chart2。

Chart _chart1;
Chart _chart2;
Double[] _data = new Double[20];

Page.xaml.cs中的代码如图所示：

Step 5：

在InitializeData（）函数中调用下列2个函数CreateColumnChart（）和CreateLineChart（），如图所示：

private void CreateColumnChart()

{

_chart1 = new Chart();

_chart1.Width = 70;

_chart1.Height = 120;

_chart1.AnimationEnabled = false;

_chart1.Watermark = false;

_chart1.Background = new SolidColorBrush(Colors.Black);

Axis axisX = new Axis();

axisX.Enabled = false;

_chart1.AxesX.Add(axisX);

Axis axisY = new Axis();

axisY.Enabled = false

ChartGrid grid = new ChartGrid();
grid.Enabled = false;
axisY.Grids.Add(grid);
_chart1.AxesY.Add(axisY);
Title title = new Title();
title.VerticalAlignment = VerticalAlignment.Bottom;
title.FontColor = new SolidColorBrush(Colors.White);
_chart1.Titles.Add(title);
_chart1.Series.Add(new DataSeries() { RenderAs = RenderAs.Column });
_chart1.Series[0].Color = new SolidColorBrush(Color.FromArgb((Byte)0xff, (Byte)0x00,(Byte)0xff, (Byte)0x00));
_chart1.Series[0].DataPoints.Add(new DataPoint());
ChartGrid1.Children.Add(_chart1);
}

在上面的代码中，我们需要创建6个对象，Chart, Axis, ChartGrid, Title, DataSeries, DataPoint。DataSeries应添加到图表系列集合；Axis应被添加到图表的AxesX 和AxesY集合；ChartGrid应被添加到Axis的网格集合；Title应被添加到图表的Title集合；DataPoint 应被添加到DataSeries的DataPoints集合；最后，将chart1 添加到ChartGrid1中。

Page.xaml.cs文件中的代码如下：

现在，添加CreateLineChart()函数，代码如下：

private void CreateLineChart()

{

_chart2 = new Chart();

_chart2.Width = 200;

_chart2.Height = 120;

_chart2.AnimationEnabled = false;

_chart2.ScrollingEnabled = false;

_chart2.Watermark = false;

_chart2.Background = new SolidColorBrush(Colors.Black);

 

Axis axisX = new Axis();

axisX.AxisLabels = new AxisLabels();

axisX.AxisLabels.Enabled = false;

 

ChartGrid gridX = new ChartGrid();

gridX.LineColor = new SolidColorBrush(Color.FromArgb((Byte)0xff, (Byte)0x00,(Byte)0x80, (Byte)0x40));

gridX.LineThickness = 1;

axisX.Grids.Add(gridX);

 

Ticks tickX = new Ticks();

tickX.Enabled = false;

axisX.Ticks.Add(tickX);

 

_chart2.AxesX.Add(axisX);

 

Axis axisY = new Axis();

axisY.AxisMinimum = -100;

axisY.AxisMaximum = 100;

axisY.AxisLabels = new AxisLabels();

axisY.AxisLabels.Enabled = false;

 

ChartGrid gridY = new ChartGrid();

gridY.LineColor = new SolidColorBrush(Color.FromArgb((Byte)0xff, (Byte)0x00,(Byte)0x80, (Byte)0x40));

gridY.LineThickness = 1;

axisY.Grids.Add(gridY);

 

Ticks tickY = new Ticks();

tickY.Enabled = false;

axisY.Ticks.Add(tickY);

_chart2.AxesY.Add(axisY);

_chart2.Series.Add(new DataSeries() { RenderAs = RenderAs.Line });

_chart2.Series[0].Color = new SolidColorBrush(Color.FromArgb((Byte)0xff, (Byte)0x00,(Byte)0xff, (Byte)0x00));

for (Int32 i = 0; i < _data.Length; i++)

_chart2.Series[0].DataPoints.Add(new DataPoint());

ChartGrid2.Children.Add(_chart2);

}

在上面的代码中，我们需要创建6个对象，Chart, Axis, ChartGrid, Title, DataSeries, DataPoint。DataSeries应添加到图表系列集合；Axis应被添加到图表的AxesX 和AxesY集合；ChartGrid应被添加到Axis的网格集合；Title应被添加到图表的Title集合；DataPoint 应被添加到DataSeries的DataPoints集合；最后，将chart2 添加到ChartGrid2中。

在CreateColumnChart（）函数下面添加CreateLineChart()函数后，代码如下图所示：

Step 6:

创建一个 DispatcherTimer实例，取名为timer。

System.Windows.Threading.DispatcherTimer _timer = new System.Windows.Threading.DispatcherTimer();

在添加DispatcherTimer后，Page.xaml.cs文件如下所示：

Step 7：

在页面构造函数中附上timer的tick事件处理器，

public Page()

{
InitializeComponent();

InitializeData();

_timer.Tick += new EventHandler(_timer_Tick);

_timer.Interval = TimeSpan.FromSeconds(1);

LayoutRoot.Loaded += new RoutedEventHandler(LayoutRoot_Loaded);

}

在上面的构造函数中，我们给timer对象的时间间隔定为1秒，意味着图表每一秒都会进行更新。我们为LayoutRoot的 Loaded事件附上了更多的时间处理器。

Step 8：

在LayoutRoot的Loaded事件的事件处理器中启动timer。

void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
_timer.Start();
}

添加上面的代码后，Page.xaml.cs文件的代码如图所示：

Step 9：

现在，声明Boolean类型全局变量oddState，可检查正值和负值。

Boolean _oddState = false;

创建一个的UpdateData（）函数

private Double[] UpdateData()
{
Random rand = new Random();
Int32 i;
for (i = 0; i < _data.Length-1; i++)
{
_data[i] = _data[i + 1];
}
if (!_oddState)
{
_oddState = true;

_data[i] = rand.Next(0, 100);
}
else
{
_oddState = false;

_data[i] = -_data[i];
}
return _data;
}

添加上面的代码后，Page.xaml.cs 如图所示：

Step 10：

void _timer_Tick(object sender, EventArgs e)
{
UpdateData();

for (Int32 i = 0; i < _data.Length; i++)

{
_chart2.Series[0].DataPoints[i].YValue = _data[i];

}
_chart1.Series[0].DataPoints[0].YValue = Math.Abs(_data[_data.Length - 1]);

_chart1.Titles[0].Text = Convert.ToString(Math.Abs(_data[_data.Length - 1]))+ "%";

}

首先调用UpdateData() 函数，然后创建一个循环。在循环中，将数组值分配到第二个图表系列的DataPoint YValues中。一旦循环完成，我们分配数组的最后一个值到第一个系列的DataPoint YValue中。相同的值被作为图表的标题文本显示出来。

添加代码后的Page.xaml.cs文件如图所示：

记载完后，图表便显示出来了。

现在，运行图表应用程序并查看输出，如下截图：