原創(chuàng)|其它|編輯:郝浩|2012-10-19 15:55:35.000|閱讀 620 次
概述:實際應用中,我們可能會遇到需要實時的顯示某一些數據的情況,比如心電圖、CPU當前使用率或者內存使用率等等,在Silverlight有一個Timer組件可以輕松的做到這一點,本文將做一定的介紹
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
在實際應用中,我們可能會遇到需要實時的顯示某一些數據的情況,比如心電圖、CPU當前使用率或者內存使用率等等。在Visifire Silverlight有一個Timer組件可以輕松的做到這一點,該組件可以每隔一段時間就調用一次需要處理的函數,在此這個函數中通過WebService,WCF等獲取到相應的值,然后更新UI上的圖表控件,以達到實時更新數據的作用。
現在我們來看看Timer組件的使用思路:
首先將現有的UI線程賦值出來,并且初始化Timer組件Timer timer=Timer(TimerCallback, Object, Int32, Int32) 這里有4個參數。
第一個參數是需要處理的函數的委托
第二個參數是需要帶入處理函數的參數對象
第三個參數是從創(chuàng)建Timer對象到Timer對象執(zhí)行委托函數的時間間隔
第四個參數是每隔多少毫秒執(zhí)行一次委托函數
然后再委托函數中我們獲取到當前的需要顯示的數據值,調用UI線程顯示到圖表中(在本實例中我們使用Random.Next(100)的隨機數來模擬數據源)。在數據顯示過程中我們可以通過調用timer.Change(int32,int32)來重置Timer啟動時間和處理委托函數的間隔時間,也可以通過調用timer.Disponse()方法來釋放Timer組件對象。
本實例中為了讓節(jié)面顯得更加的美觀大方,我們初始化了30個值50的點,然后在每調用Timer委托的函數中每在最后添加一個點,就將最前面的點減去。下面我們看項目的實例源碼:
/// <summary> /// 創(chuàng)建一個圖表 /// </summary> /// <param name="tableName">表名字</param> /// <param name="updateTime">時間段的集合</param> /// <param name="value">對應時間段集合的值</param> /// <param name="row">本表在主Grid里面的ROW值</param> /// <param name="column">本表在主Grid里面的column值</param> /// <param name="rihgtStr">Y軸的后綴</param> /// <param name="tspan">時間段間隔</param> /// <param name="chartInterval">圖表兩點之間的間隔</param> /// <param name="intervaltype">圖表的X軸坐標按什么來分類,如時分秒</param> public void CreateChart(string tableName, int row, int column, string rihgtStr, TimeSpan tspan, int chartInterval, IntervalTypes intervaltype) { // 創(chuàng)建一個圖標 Chart chart = new Chart(); // 設置圖標的寬度和高度 chart.Width = 500; chart.Height = 400; chart.ToolBarEnabled = true; // 設置圖標的屬性 chart.ScrollingEnabled = false; chart.View3D = true; // 創(chuàng)建一個標題的對象 Title title = new Title(); // 設置標題的名稱 title.Text = tableName; title.Padding = new Thickness(0, 10, 5, 0); // 向圖標添加標題 chart.Titles.Add(title); // 初始化一個新的Axis Axis xAxis = new Axis(); // 設置axis的屬性 //圖表的X軸坐標按什么來分類,如時分秒 xAxis.IntervalType = intervaltype; //圖表中的X軸坐標間隔如2,3,20等,單位為xAxis.IntervalType設置的時分秒。 xAxis.Interval = chartInterval; //設置X軸的時間顯示格式為7-10 11:20 xAxis.ValueFormatString = "hh:mm:ss"; //給圖標添加Axis chart.AxesX.Add(xAxis); Axis yAxis = new Axis(); //設置圖標中Y軸的最小值永遠為0 yAxis.AxisMinimum = 0; //設置圖表中Y軸的后綴 yAxis.Suffix = rihgtStr; chart.AxesY.Add(yAxis); // 創(chuàng)建一個新的數據線。 DataSeries dataSeries = new DataSeries(); // 設置數據線的格式。 dataSeries.RenderAs = RenderAs.Line; dataSeries.XValueType = ChartValueTypes.DateTime; // 添加數據線到數據序列。 chart.Series.Add(dataSeries); //將生產的圖表增加到Grid,然后通過Grid添加到上層Grid. Grid gr = new Grid(); gr.Children.Add(chart); Grid.SetRow(gr, row); Grid.SetColumn(gr, column); gr.Margin = new Thickness(5); gr.VerticalAlignment = VerticalAlignment.Top; gr.HorizontalAlignment = HorizontalAlignment.Left; //增加一個遮罩層到gr,將visifire的水印遮掉。 StackPanel sp = new StackPanel(); sp.Width = 160; sp.Height = 18; sp.Margin = new Thickness(0, 3, 6, 0); sp.VerticalAlignment = VerticalAlignment.Top; sp.HorizontalAlignment = HorizontalAlignment.Right; sp.Background = new SolidColorBrush(Colors.White); gr.Children.Add(sp); LayoutRoot.Children.Add(gr); //初始化30個DataPoint點,這些點都是50的值,一個平滑的曲線,目的在于讓后續(xù)點的出現不會太唐突導致不美觀。 int s = 30; for (int n = 0; n < 30; n++) { DataPoint dpoint = new DataPoint(); dpoint.XValue = new DateTime(2010, 2, 15, 6, s+n, 03); Random rom = new Random(); dpoint.YValue = 50.0; chart.Series[0].DataPoints.Add(dpoint); } //將當前的UI進程賦給thread;以供下面使用 thread = System.Threading.SynchronizationContext.Current; //啟動Timer組件,開始增加DataPoint點 time = new Timer(AddPoint, chart, 1000, 1000); } //時間標志,不用關注 int TimeFlag = 0; Timer time; System.Threading.SynchronizationContext thread; public void AddPoint(object state) { //UI線程更新內容 thread.Post(delegate { Chart chart = state as Chart; DataPoint dpoint = new DataPoint(); dpoint.XValue = new DateTime(2010, 2, 15, 7, TimeFlag, 03); //獲取到隨機數 Random rom = new Random(); int num= rom.Next(100); dpoint.YValue = double.Parse(num.ToString()); chart.Series[0].DataPoints.Add(dpoint); //設置每增加了一個點,就將最前面的那個點去掉。 chart.Series[0].DataPoints.Remove(chart.Series[0].DataPoints[0]); TimeFlag++; }, null); //此處我們設置標志等于59的時候取消Timer的運行 if (TimeFlag == 59) { time.Dispose(); } }
本實例只模擬了59個點,如有需要稍微修改一下邏輯即可。VS2010+Silverlight 4.0的開發(fā)環(huán)境,下面請看效果圖如下:
本站文章除注明轉載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:博客園