Silverlight實用竅門系列：14.Visifire圖表控件的使用一(圖表的建立和基礎使用)

    在實際項目開展中，往往會牽扯到需要繪制圖表的情況。而Visifire是一個比較美觀大方的第三方圖表控件，本文會講述如何初步使用Visifire控件。

        準備工作做好了，此時我在這裡直接編寫了一個函數如下：

/// <summary> 

     /// 建立一個圖表 

     /// </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, List<DateTime> updateTime, List<string> value, int row, int column, string rihgtStr, TimeSpan tspan, int chartInterval, IntervalTypes intervaltype) 

     { 

         // 建立一個圖示 

         Chart chart = new Chart(); 

         // 設定圖示的寬度和高度 

         chart.Width = 500; 

         chart.Height = 400; 

         chart.ToolBarEnabled = true; 

         // 設定圖示的屬性 

         chart.ScrollingEnabled = false; 

         chart.View3D = true; 

         // 建立一個标題的對象 

         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); 

         for (Int32 j = 0; j < 1; j++) 

         { 

             // 建立一個新的資料線。 

             DataSeries dataSeries = new DataSeries(); 

             // 設定資料線的格式。 

             dataSeries.RenderAs = RenderAs.Line; 

             dataSeries.XValueType = ChartValueTypes.DateTime; 

             // 設定資料點 

             DataPoint dataPoint; 

             for (int i = 0; i < updateTime.Count; i++) 

             { 

                 // 建立一個資料點的執行個體。 

                 dataPoint = new DataPoint(); 

                 // 設定X軸點 

                 dataPoint.XValue = updateTime[i]; 

                 //設定Y軸點 

                 dataPoint.YValue = double.Parse(value[i]); 

                 dataPoint.MarkerSize = 8; 

                 dataPoint.Tag = tableName.Split('(')[0]; 

                 //設定資料點顔色 

                // dataPoint.Color = new SolidColorBrush(Colors.LightGray); 

                 dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown); 

                 //添加資料點 

                 dataSeries.DataPoints.Add(dataPoint); 

             } 

             // 添加資料線到資料序列。 

             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); 

     } 

        通過此函數我們可以很友善的建立了一個Visifire圖表，其建立的步驟那些我在這裡不細說，大家直接看源碼上的注釋就可以了。因為我使用的 Visifire是免費的版本，所有會有水印，在使用的過程中可以建立一個白色背景的StackPanel來遮蓋住水印的位置。在這個函數執行的時候，還 為每個DataPoint點加載了一個點選事件，處理當這些點被點選之後觸發的事件（在事件裡面擷取DataPoint的X軸，Y軸等，以便進行相關操 作）,其源碼如下：

void dataPoint_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

{ 

DataPoint dp = sender as DataPoint; 

MessageBox.Show(dp.YValue.ToString()); 

} 

複制代碼 

        最後我們模拟一個記憶體使用率的圖示，設定了8個時間點的8個記憶體使用值的初始值。在MainPage.xaml.cs的主函數中我們編寫以下代碼： 

public MainPage() 

InitializeComponent(); 

//模拟的8個時間點 

List<DateTime> DTimeList = new List<DateTime>() 

new DateTime(2010,2,15,7,11,03), 

new DateTime(2010,2,15,7,12,03), 

new DateTime(2010,2,15,7,13,03), 

new DateTime(2010,2,15,7,14,03), 

new DateTime(2010,2,15,7,15,03), 

new DateTime(2010,2,15,7,16,03), 

new DateTime(2010,2,15,7,17,03), 

new DateTime(2010,2,15,7,18,03) 

}; 

//模拟的8個記憶體使用率值 

List<string> strList = new List<string>() { "20", "55", "40", "70", "57", "12", "49", "60" }; 

//按照1分鐘的間隔來顯示X軸坐标之間的數字。每隔20秒為一個機關長度，Y軸值的字尾為"%" 

CreateChart("記憶體使用率", DTimeList, strList, 0, 0, "%", new TimeSpan(0,0,20) , 1, IntervalTypes.Minutes); 

        一個Visifire圖表的組成如下圖：

<a target="_blank" href="http://blog.51cto.com/attachment/201203/125409913.jpg"></a>

         由上圖我們可以看出一個Visifire圖表由 （Title,ChartGrid,Ticks,PlotArea,TrendLind,ToolTip,AxisLabels,Axis,DataSeries,DataPoint,Legend） 組成。每個部分都是一個類，是以我們在使用Visifire過程中，如果有什麼需要修改的地方，直接在背景建立圖表的時候，修改相應的類就可以了。

<a target="_blank" href="http://blog.51cto.com/attachment/201203/125348468.jpg"></a>

本文轉自程興亮 51CTO部落格，原文連結:http://blog.51cto.com/chengxingliang/821499