ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 使用Silverlight Toolkit 绘制图表---区域图和冒泡图

使用Silverlight Toolkit 绘制图表---区域图和冒泡图

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-07-24 17:00:35 0 删除 编辑

大约在半年前,我写了几篇介绍Silverlight Toolkit的文章,对里面的一些可能会用
到的控件做了介绍,文章链接如下:

 

     前两天,当再次拜访其官方链接之后,发现其版本已升级到了3.0,其中又新增了不少
有意思的控件,我将会用四篇文章来简要介绍一下:)

     首先就是其图表控件集合中新增了两种类型,分别为:Area,Bubble(区域图和冒泡图)。

     下面就是其演示效果:

   
     
     首先,我们要创建一个SL应用,并在项目中加载对下面DLL文件的引用(来自下载的源
码包):    

       System.Windows.Controls.DataVisualization.Toolkit.dll

   

     然后在相应的XAML文件中添加对控件的声明,如下:

<UserControl x:Class="Silverlight_ToolKit3.DataVisualization"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml" 
    <!--引用声明--
>
    xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    Width="800" Height="300">
    
<Grid x:Name="LayoutRoot" Background="White">    
        
<Grid.ColumnDefinitions>
            
<ColumnDefinition Width="400"/>
           
<ColumnDefinition Width="400"/>
        
Grid.ColumnDefinitions>
        
<!--控件定义-->
        
<chartingToolkit:Chart x:Name="AreaEmployeeList" Grid.Row="0" Grid.Column="0" Title="区域图" />
        
<chartingToolkit:Chart x:Name="BubbleEmployeeList" Grid.Row="0" Grid.Column="1" Title="气泡图" /> 
    
Grid>
UserControl>

    
      因为要显示数据,所以我直接将数据对象集合“硬编码”到CS文件中,如下:

 

public List<EmployeeInfo> GetEmployeeList()
{
    List
<EmployeeInfo> employeeList = new List<EmployeeInfo>();
    employeeList.Add(
new EmployeeInfo { EmployeeID = 1, EmployeeName = "大林", Salary = 1000, City = "合肥" });
    employeeList.Add(
new EmployeeInfo { EmployeeID = 2, EmployeeName = "小林", Salary = 1000, City = "合肥" });
    employeeList.Add(
new EmployeeInfo { EmployeeID = 3, EmployeeName = "张三", Salary = 1000, City = "合肥" });
    employeeList.Add(
new EmployeeInfo { EmployeeID = 4, EmployeeName = "李四", Salary = 1500, City = "天津" });
    employeeList.Add(
new EmployeeInfo { EmployeeID = 5, EmployeeName = "王五", Salary = 2000, City = "上海" });         
    
return employeeList;
}

public List<EmployeeInfo> GetOtherEmployeeList()
{
    List
<EmployeeInfo> employeeList = new List<EmployeeInfo>();
    employeeList.Add(
new EmployeeInfo { EmployeeID = 6, EmployeeName = "赵六", Salary = 800, City = "北京" });
    employeeList.Add(
new EmployeeInfo { EmployeeID = 7, EmployeeName = "尤七", Salary = 2100, City = "武汉" });
    employeeList.Add(
new EmployeeInfo { EmployeeID = 8, EmployeeName = "马八", Salary = 1209, City = "海口" });
    employeeList.Add(
new EmployeeInfo { EmployeeID = 9, EmployeeName = "许九", Salary = 1600, City = "海口" });
    employeeList.Add(
new EmployeeInfo { EmployeeID = 10, EmployeeName = "代十", Salary = 2300, City = "海口" });
    
return employeeList;
}

public class EmployeeInfo
{
    
public int EmployeeID { setget; }
    
public string EmployeeName { setget; }
    
public int Salary { setget; }
    
public int[] Cost { getset; }
    
public string City { setget; }
}  

    
      因为这两个控件都支持多数据源绑定,所以我用了两个方法分别获取对象集合,分别是:    
       GetEmployeeList();    
       GetOtherEmployeeList();    
    
      接着,就要对相应的图表控件进行初始化和数据绑定操作了,首先是“区域图表控件”,其
代码如下:  

#region 区域图
  AreaSeries areaSeries1 
= new AreaSeries();
  areaSeries1.ItemsSource 
= GetEmployeeList();
  areaSeries1.IndependentValueBinding 
= new System.Windows.Data.Binding("EmployeeID");
  areaSeries1.DependentValueBinding 
= new System.Windows.Data.Binding("Salary");
  AreaEmployeeList.Series.Add(areaSeries1);

  AreaSeries areaSeries2 
= new AreaSeries();
  areaSeries2.ItemsSource 
= GetOtherEmployeeList();
  areaSeries2.IndependentValueBinding 
= new System.Windows.Data.Binding("EmployeeID");
  areaSeries2.DependentValueBinding 
= new System.Windows.Data.Binding("Salary");
  areaSeries2.Foreground 
= new SolidColorBrush(Colors.Red);
  AreaEmployeeList.Series.Add(areaSeries2);
  
#endregion

  
      上面代码依次声明了两个AreaSeries实例用于绑定两个数据源, 同时对第二个AreaSeries实
例指定了红色背景来加以区别。当然对于AreaSeries的声明也可以放在XAML中进行定义,形如: 

<chartingToolkit:Chart Title="Typical Use">
     
<chartingToolkit:Chart.Series>
         
<chartingToolkit:AreaSeries
             
Title="Particulate Levels"
             IndependentValueBinding
="{Binding EmployeeID}"
             DependentValueBinding
="{Binding Salary}"/>
     
chartingToolkit:Chart.Series>
 
chartingToolkit:Chart>

 
      注:我这样写只是想演示如何使用代码方式来初始化控件和绑定数据。
    
     上面是关于Area图,下面再看一下Bubble图的初始化方法,其实因为ToolKit中的图表设计使用
了统一的接口,因此不同的图表在具体实现时有些相似,下面的代码与上面的Area代码相差无几:

 

#region 气泡图
BubbleSeries bubbleSeries1 
= new BubbleSeries();
bubbleSeries1.ItemsSource 
= GetEmployeeList();
bubbleSeries1.IndependentValueBinding 
= new System.Windows.Data.Binding("EmployeeID");
bubbleSeries1.DependentValueBinding 
= new System.Windows.Data.Binding("Salary");
bubbleSeries1.AnimationSequence 
= AnimationSequence.LastToFirst;
BubbleEmployeeList.Series.Add(bubbleSeries1);

BubbleSeries bubbleSeries2 
= new BubbleSeries();
bubbleSeries2.ItemsSource 
= GetOtherEmployeeList();
bubbleSeries2.IndependentValueBinding 
= new System.Windows.Data.Binding("EmployeeID");
bubbleSeries2.DependentValueBinding 
= new System.Windows.Data.Binding("Salary");
BubbleEmployeeList.Series.Add(bubbleSeries2);
bubbleSeries1.AnimationSequence 
= AnimationSequence.FirstToLast;
#endregion


       大家看到了吧,唯一的区别就在BubbleSeries上,而不是Area图表的AreaSeries。
   
       最后补充一下,因为当前版本与之前我写的文章使用的版本不同,导致如果想向图表的X,Y轴
添加‘标题属性’所使用的类不同,在3.0里可用如下代码向X,Y轴绑定标题名称:

 Action<Chart> chartModifier = (chart) =>
 {
     DisplayAxis dateAxis 
= new CategoryAxis { Orientation = AxisOrientation.X, Title = "雇员ID", FontStyle = FontStyles.Italic, ShowGridLines = true, FontSize = 14f };
     AreaEmployeeList.Axes.Add(dateAxis);
     DisplayAxis valueAxis 
= new CategoryAxis { Orientation = AxisOrientation.Y, Title = "薪水", FontStyle = FontStyles.Normal, ShowGridLines = true};
     AreaEmployeeList.Axes.Add(valueAxis);
 };
 chartModifier(AreaEmployeeList);

     
       这样,其显示效果就会变成如下图所示(注:Y轴单位数值会从左侧变到右侧):

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-610374/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-01-04

  • 博文量
    2376
  • 访问量
    5297335