图表应用于表现数据量,进行直观的对比,但是在某一些领域中如果数据之间大小差异过大,那么会出现某一些数据因为过小,而无法让用户看见的情况。例如在统 计一组用户电脑的网络发包量的时候,有一些用户开启电脑几十个小时,有一些用户开启电脑几秒钟。很明显用户开机几十个小时的发包量巨大,而开机几秒钟的发 包量极小,如果放在一个Visifire的图标中组成一个统计列的时候,发包量小的电脑几乎看不见了。这种情况下,我们就可以通过点击文字标注栏的 Legend文字来确定某一个在图表上看不见的用户电脑的发包量。

        首先我们设置一个实体类,该类包含(ComputerName,NetWorkNum)两个属性,分别代码电脑名和电脑网络发包量:

 

   
   
   
   
  1. ///  
  2.   /// 电脑信息 
  3.   ///  
  4.   public class  ComputerInfomation 
  5.   { 
  6.       string _ComputerName; 
  7.       string _NetWorkNum; 
  8.       ///  
  9.       /// 电脑名称 
  10.       ///  
  11.       public string ComputerName 
  12.       { 
  13.           get { return _ComputerName; } 
  14.           set { _ComputerName = value; } 
  15.       } 
  16.       ///  
  17.       /// 网络发送包 
  18.       ///  
  19.       public string NetWorkNum 
  20.       { 
  21.           get { return _NetWorkNum; } 
  22.           set { _NetWorkNum = value; } 
  23.       } 
  24.   } 

        再实例化该类形成多个实体类对象集合,MainPage.xaml.cs的构造函数中敲入代码如下:

 

   
   
   
   
  1. ComputerList = new List()  
  2.           { 
  3.           new ComputerInfomation(){ComputerName="张三的电脑", NetWorkNum="32143242223"}, 
  4.           new ComputerInfomation(){ComputerName="李四的电脑", NetWorkNum="23432423"}, 
  5.           new ComputerInfomation(){ComputerName="王五的电脑", NetWorkNum="12342342344"}, 
  6.           new ComputerInfomation(){ComputerName="刘六的电脑", NetWorkNum="562342"}, 
  7.           new ComputerInfomation(){ComputerName="林七的电脑", NetWorkNum="55353453445"}, 
  8.           new ComputerInfomation(){ComputerName="马林的电脑", NetWorkNum="2454555543"
  9.           }; 
  10.           BindChart(ComputerList); 

        现在用户电脑数据已经准备好了,我们开始制作一个函数,此函数创建一个图表并且设置相应的Legend文字标注栏的事件绑定:

 

   
   
   
   
  1. List ComputerList = new List(); 
  2. ///  
  3. /// 绑定一个图标 
  4. ///  
  5. /// name="computerList">用户电脑类实体集合 
  6. public void BindChart( List computerList) 
  7. Chart chart = new Chart(); 
  8. chart.Width = 400; 
  9. chart.Height = 550; 
  10. chart.Name = "Chart"
  11. chart.SetValue(Canvas.LeftProperty, 30.0); 
  12. chart.SetValue(Canvas.TopProperty, 30.0); 
  13. chart.Theme = "Theme1";//设置皮肤 
  14. chart.BorderBrush = new SolidColorBrush(Colors.Gray); 
  15. chart.AnimatedUpdate = true
  16. chart.CornerRadius = new CornerRadius(7); 
  17. chart.ShadowEnabled = true
  18. chart.Padding = new Thickness(4, 4, 4, 10); 
  19.  
  20. #region 设置Title 
  21. Title title = new Title(); 
  22. title.Text = "电脑网络发包统计"
  23. chart.Titles.Add(title); 
  24. #endregion 
  25.  
  26. #region 设置AxesX 
  27. Axis xAxis = new Axis(); 
  28. xAxis.Title = "用户电脑"
  29. chart.AxesX.Add(xAxis); 
  30. #endregion 
  31.  
  32. #region 设置AxesY 
  33. Axis yAxis = new Axis(); 
  34. yAxis.Title = "用户网卡发送包"
  35. yAxis.Prefix = "发送:"
  36. yAxis.Suffix = "包"
  37. chart.AxesY.Add(yAxis); 
  38. #endregion 
  39.  
  40. #region 设置PlotArea 
  41. PlotArea plot = new PlotArea(); 
  42. plot.ShadowEnabled = false
  43. chart.PlotArea = plot; 
  44. #endregion 
  45.  
  46. #region 设置Legends 
  47. Legend legend = new Legend(); 
  48. //Legend文字标注栏绑定一个事件Legend_MouseLeftButtonDown 
  49. legend.MouseLeftButtonDown += new EventHandler(Legend_MouseLeftButtonDown); 
  50. chart.Legends.Add(legend); 
  51. #endregion 
  52. #region 
  53. Visifire.Charts.ToolTip tip = new Visifire.Charts.ToolTip(); 
  54. tip.VerticalAlignment = VerticalAlignment.Bottom; 
  55. chart.ToolTips.Add(tip); 
  56. #endregion 
  57. #region 创建数据序列和数据点 
  58. foreach (ComputerInfomation cominfo in computerList) 
  59. DataSeries dseries = new DataSeries(); 
  60. //设置一个数据序列的LengendText值为ComputerName 
  61. dseries.LegendText = cominfo.ComputerName; 
  62. //设置图表的类型为RenderAs.StackedColumn 
  63. dseries.RenderAs = RenderAs.StackedColumn; 
  64. //设置一个数据点 
  65. DataPoint dpointUpload = new DataPoint(); 
  66. //数据点的Y坐标值 
  67. dpointUpload.YValue =double.Parse(cominfo.NetWorkNum); 
  68. //数据点的Tag值也为电脑名称,用于数据点被点击后对比判断当前点击的点 
  69. dpointUpload.Tag = cominfo.ComputerName; 
  70. //设置数据点被点击之后触发事件Dpoint_MouseLeftButtonDown 
  71. dpointUpload.MouseLeftButtonDown += new MouseButtonEventHandler(Dpoint_MouseLeftButtonDown); 
  72. dseries.DataPoints.Add(dpointUpload); 
  73. chart.Series.Add(dseries); 
  74. #endregion 
  75. #region 设置遮罩,将Visifire的LOGO遮挡住。 
  76. StackPanel sp = new StackPanel(); 
  77. sp.Width = 145; 
  78. sp.Height = 15; 
  79. sp.Margin = new Thickness(0, 3, 3, 0); 
  80. sp.VerticalAlignment = VerticalAlignment.Top
  81. sp.HorizontalAlignment = HorizontalAlignment.Right
  82. sp.Background = new SolidColorBrush(Colors.White); 
  83. #endregion 
  84. LayoutRoot.Children.Add(chart); 
  85. LayoutRoot.Children.Add(sp); 

        关键在于Lengend事件的设置,那么下面我们贴出Lengend被点击事件和DataPoint被点击事件的处理函数:

 

   
   
   
   
  1. ///  
  2.   /// DataPoint被点击执行事件 
  3.   ///  
  4.   /// name="sender"
  5.   /// name="e"
  6.   void Dpoint_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
  7.   { 
  8.       //接收到当前被点击的LengendText的值 
  9.       DataPoint dpoint = sender as DataPoint; 
  10.       string str = dpoint.Tag.ToString(); 
  11.       foreach (ComputerInfomation cominfo in ComputerList) 
  12.       { 
  13.           if (str == cominfo.ComputerName) 
  14.           { 
  15.               MessageBox.Show(cominfo.ComputerName + "网络发送:" + cominfo.NetWorkNum + "数据包"); 
  16.           } 
  17.       } 
  18.   } 
  19.   ///  
  20.   /// Legend文字被点击执行的事件 
  21.   ///  
  22.   /// name="sender"
  23.   /// name="e"
  24.   private void Legend_MouseLeftButtonDown(object sender, LegendMouseButtonEventArgs e) 
  25.   { 
  26.       //接收到当前被点击的LengendText的值 
  27.       string str = e.DataSeries.LegendText.ToString(); 
  28.       foreach (ComputerInfomation cominfo in ComputerList) 
  29.       { 
  30.           if (str == cominfo.ComputerName) 
  31.           { 
  32.               MessageBox.Show(cominfo.ComputerName + "网络发送:" + cominfo.NetWorkNum + "数据包"); 
  33.           } 
  34.       } 
  35.   } 

        如此就解决了本文开头所述的图标绘制的问题。本实例采用VS2010+Silverlight 4.0编写,点击 SLTOVisiFire.rar 下载源码。运行效果如下:

 

15.Visifire图表控件的使用二(DataPoint点击事件和Legend文字标注栏的点击事件)_第1张图片