Visifire是由visifire公司開發的一款WPF&Silverlight圖表控件，可全面應用于WEB、桌面和移動應用程序，支持圖表儀表所有的屬性實時更新。本文我們將學習如何使用Visifire圖表創建一個實時更新的示例。

注意：請確保你已經下載了visifire并獲取了visifire程序集。

Step1：

打開Page.xaml文件。Page.xaml文件的默認內容如下所示：

<UserControl x:Class="SilverlightApplication3.Page"

xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x=&quot;//schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid x:Name="LayoutRoot" Background="White">

</Grid>

</UserControl>

接下來，在網格內創建2個名為 ChartGrid1 和ChartGrid2的網格，并將其置于父網格內，如圖所示（藍色突出部分）：

<UserControl x:Class="Sample1.Page"

xmlns="//schemas.microsoft.com/client/2007"

xmlns:x="//schemas.microsoft.com/winfx/2006/xaml&quot;

Width="400" Height="300">

<Grid x:Name="LayoutRoot" Background="White">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="70"/>

<ColumnDefinition Width="200"/>

</Grid.ColumnDefinitions>

<Grid x:Name="ChartGrid1" Width="70" Height="120" Grid.Column="0"/>

<Grid x:Name="ChartGrid2" Width="200" Height="120" Grid.Column="1"/>

</Grid>

</UserControl>

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文件如圖所示：

記載完后，圖表便顯示出來了。

現在，運行圖表應用程序并查看輸出，如下截圖：