博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用Silverlight Toolkit 绘制图表---区域图和冒泡图
阅读量:6328 次
发布时间:2019-06-22

本文共 5697 字,大约阅读时间需要 18 分钟。

  前两天,当再次拜访其官方链接之后,发现其版本已升级到了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 { 
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轴单位数值会从左侧变到右侧):


       

      

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

 官方下载一试便知。

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

你可能感兴趣的文章
windows的服务中的登录身份本地系统账户、本地服务账户和网络服务账户修改
查看>>
JAVA中循环删除list中元素的方法总结
查看>>
redis 安装
查看>>
C# tips ---值类型的装箱和拆箱
查看>>
SQL some any all
查看>>
电子书下载:Programming Windows Identity Foundation
查看>>
有理想的程序员必须知道的15件事
查看>>
用于测试的字符串
查看>>
VisualSvn Server介绍
查看>>
财付通和支付宝资料收集
查看>>
PHPCMS V9数据库表结构分析
查看>>
『原创』+『参考』基于PPC的图像对比程序——使用直方图度量
查看>>
理解 IEnumerable 与 IEnumerator
查看>>
NHibernate 2.0 Beta 1 Released和一些工具
查看>>
【每天一个Linux命令】12. Linux中which命令的用法
查看>>
软件接口数据一致性机制
查看>>
微服务架构介绍和RPC框架对比
查看>>
Debian下使用OpenLDAP 管理端
查看>>
泛型排序器TComparer
查看>>
9个offer,12家公司,35场面试,从微软到谷歌,应届计算机毕业生的2012求职之路...
查看>>