使用Silverlight Toolkit 绘制图表---区域图和冒泡图-阿里云开发者社区

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

2017-11-14 1138

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

前两天，当再次拜访其官方链接之后，发现其版本已升级到了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"
    
         < 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 { set ; get ; }
     public string EmployeeName { set ; get ; }
     public int Salary { set ; get ; }
     public int [] Cost { get ; set ; }
     public string City { set ; get ; }
}

      因为这两个控件都支持多数据源绑定，所以我用了两个方法分别获取对象集合，分别是:
        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轴单位数值会从左侧变到右侧）：

       好的，今天的内容就先到这里了，感兴趣的朋友可以亲自本文的源码或去 SilverlightToolKit

官方下载一试便知。

本文转自 daizhenjun 51CTO博客，原文链接：http://blog.51cto.com/daizhj/182692，如需转载请自行联系原作者

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

热门文章

最新文章

相关电子书

相关实验场景