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

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

        首先我们设置一个实体类，该类包含（ComputerName，NetWorkNum）两个属性，分别代码电脑名和电脑网络发包量：

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

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

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

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

1. /// <summary> 
2.   /// DataPoint被点击执行事件 
3.   /// </summary> 
4.   /// <param name="sender"></param> 
5.   /// <param name="e"></param> 
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.   /// <summary> 
20.   /// Legend文字被点击执行的事件 
21.   /// </summary> 
22.   /// <param name="sender"></param> 
23.   /// <param name="e"></param> 
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 下载源码。运行效果如下：

本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/821502