使用Silverlight Toolkit绘制图表(下)--饼图,折线图,散点图

使用Silverlight Toolkit绘制图表(下)--饼图,折线图,散点图,第1张

概述       在 上一篇文章中,介绍了如何使用Silverlight Toolkit提供的Chart控件绘制柱状图(Column,Bar),今天会继续使用上文中所创建的代码,我们只要做很少的修改就可以让柱状图显示变成饼图,折线图或散点图。      好了,开始今天的正文。             首先,我们要新创建一个饼图的"Silverlight 控件",并将其命名为:PieSample.xam        在 上一篇文章中,介绍了如何使用Silverlight Toolkit提供的Chart控件绘制柱状图(Column,bar),今天会继续使用上文中所创建的代码,我们只要做很少的修改就可以让柱状图显示变成饼图,折线图或散点图。

     好了,开始今天的正文。  
    
     首先,我们要新创建一个饼图的"Silverlight 控件",并将其命名为:PIESample.xaml  

  
    
     然后我们拷贝相应的ColumnSample.xaml,ColumnSample.xaml.cs中的相应代码到: PIESample.xaml 和 PIE-Sample.xaml.cs文件中。接着我们修改PIESample.xaml.cs文件中的dataServiceClIEnt_GetEmployeeListCompleted方法,修改后的结果如下:
    
voID  dataServiceClIEnt_GetEmployeeListCompleted( object  sender, GetEmployeeListCompletedEventArgs e)
{
    ObservableCollection
< EmployeeInfo >  employeeList  =  e.Result;

    Action
< Chart >  chartModifIEr  =  (chart)  =>
    {
        Axis dateAxis 
=   new  Axis { OrIEntation  =  AxisOrIEntation.Horizontal, Title  =   " 雇员名称 " , FontStyle  =  FontStyles.normal, FontSize  =  12f, ShowGrIDlines  =   true };
        EmployeeChart.Axes.Add(dateAxis);
        Axis valueAxis 
=   new  Axis { OrIEntation  =  AxisOrIEntation.Vertical, Title  =   " 薪水 " , Minimum  =   - 1000 , Maximum  =   3000 , ShowGrIDlines  =   true };
        EmployeeChart.Axes.Add(valueAxis);
    };
    chartModifIEr(EmployeeChart);

    PIESerIEs serIEs 
=   new  PIESerIEs();
    serIEs.ItemsSource 
=  employeeList;
    serIEs.IndependentValueBinding 
=   new  System.windows.Data.Binding( " Employeename " );
    serIEs.DependentValueBinding 
=   new  System.windows.Data.Binding( " Salary " );
    serIEs.AnimationSequence 
=  AnimationSequence.LastToFirst;
    EmployeeChart.SerIEs.Add(serIEs);
}


    现在,我们运行一下这个DEMO,看一下效果:
    


  
    
    当然如果大家对Chart控件中的数据显示颜色不满意,也可以按我们自己的想法“自定义颜色”,比如我们在Xaml中定义下面的类型
< UserControl.Resources >
   


    
< samples:StylePalette  x:Key ="colorCustomStyle" >
        
< Style  targettype ="Control" >
            
< Setter  Property ="Background"  Value ="Yellow" />
            
< Setter  Property ="borderBrush"  Value ="Black" />
        
</ Style >
        
< Style  targettype ="Control" >
            
< Setter  Property ="Background"  Value ="Purple" />
            
< Setter  Property ="borderBrush"  Value ="Black" />
        
</ Style >
    
</ samples:StylePalette >
</ UserControl.Resources >

    注意:StylePalette类型声明如下:
public   partial   class  StylePalette : Collection < Style >
{
    
public  StylePalette(){}
}

    
    这样,当我们就可以在cs文件中使用该样式信息了,如下:   
   
PIESerIEs serIEs  =   new  PIESerIEs();
serIEs.ItemsSource 
=  employeeList;
serIEs.IndependentValueBinding 
=   new  System.windows.Data.Binding( " Employeename " );
serIEs.DependentValueBinding 
=   new  System.windows.Data.Binding( " Salary " );
// 绑定了该样式
serIEs.StylePalette  =   this .Resources[ " colorCustomStyle " as  Collection < Style > ;
serIEs.AnimationSequence 
=  AnimationSequence.LastToFirst;     
    现在我们再看一下其运行效果:
    
  


    
    
    可以看出,我们只要将ColumnSerIEs换成PIESerIEs,其它的代码一行不动,就将柱状图显示成了饼图,是不是很方便,呵呵。

    当然在饼图中也支持直接在Xaml中进行属性声明绑定,比如:
    
< charting:Chart  Title ="Xaml绑定"  x:name ="FunctionSerIEsSample"   borderBrush ="Gray"  margin ="5" >
    
< charting:Chart.SerIEs >
        
< charting:PIESerIEs
                
ItemsSource =" {Binding PugetSound, Source={StaticResource City}} "
                IndependentValueBinding
=" {Binding name} "
                DependentValueBinding
=" {Binding Population} "
                IsSelectionEnabled
="True"
                SelectionChanged
="barSerIEs_SelectionChanged"  StylePalette =" {StaticResource colorCustomStyle} "
                Template
=" {StaticResource CustomTemplate} " >
        
</ charting:PIESerIEs >
    
</ charting:Chart.SerIEs >
</ charting:Chart >


    另外就是饼图支持鼠标选择事件,比如当我们使用鼠标选中饼图中的某一显示区域时,我们可以将该区域的详细信息显示出来。为了实现这个效果,我们将下面的代码加入了PIESample.Xaml中:

< controls:DockPanel  LastChildFill ="False"  controls:DockPanel.Dock ="Right" >
    
< StackPanel   x:name ="informationPanel"  controls:DockPanel.Dock ="top"  margin ="5" >
        
< TextBlock  Text ="Selected City Details"  FontWeight ="Bold" />
        
< StackPanel  OrIEntation ="Horizontal" >
            
< TextBlock  Text ="name: " />
            
< TextBlock  Text =" {Binding name} " />
        
</ StackPanel >
        
< StackPanel  OrIEntation ="Horizontal" >
            
< TextBlock  Text ="Population: " />
            
< TextBlock  Text =" {Binding Population} " />
        
</ StackPanel >
    
</ StackPanel >
    
< button   Content ="取消选中"  Click ="Unselect_Click"  margin ="5"  controls:DockPanel.Dock ="Bottom" />
</ controls:DockPanel >

    这里,我们只要在PIESample.Xaml.cs文件中编写事件barSerIEs_SelectionChanged处理代码即可:
    
private   voID  barSerIEs_SelectionChanged( object  sender, SelectionChangedEventArgs e)
{
    informationPanel.DataContext 
=  ( 1   <=  e.AddedItems.Count)  ?  e.AddedItems[ 0 ] :  null ;
}

private   voID  Unselect_Click( object  sender, System.windows.RoutedEventArgs e)
{
    (FunctionSerIEsSample.SerIEs[
0 as  PIESerIEs).SelectedItem  =   null ;
}

        
    下面看一下运行效果:
    
   


    
    
    这样当我们参照之前讲过的将柱状图转成饼图的方法将所有的ColumnSerIEs修改为“PIESerIEs”之后,我们会看到下面的显示效果:


    
     其实看到这里,相信大家会举一返三了,下面要说的“折线图”,“散点图”要如何绘制了。不错,对于折线图使用的SerIEs为“lineserIEs”,而散点图使用的是“ScatterSerIEs”。不过有一点就是这两个图中的X,Y轴的数据绑定类型要做一下转换,因为之前我们使用的X轴是Employeename,Y轴使用的是Salary.我们要修改的是X轴,新绑定的是EmployeeID,原因我猜是这两种图表要求XY两个轴只能是数值型或日期型所致。

     下面以dataServiceClIEnt_GetEmployeeListCompleted方法为例,看一下最终的修改结果:
    
voID  dataServiceClIEnt_GetEmployeeListCompleted( object  sender, ShowGrIDlines  =   true };
        EmployeeChart.Axes.Add(valueAxis);
    };
    chartModifIEr(EmployeeChart);

    lineserIEs serIEs 
=   new  lineserIEs();
    serIEs.ItemsSource 
=  employeeList;
    serIEs.IndependentValueBinding 
=   new  System.windows.Data.Binding( " EmployeeID " );
    serIEs.DependentValueBinding 
=   new  System.windows.Data.Binding( " Salary " );
    EmployeeChart.SerIEs.Add(serIEs);
}

    
    这样当我们运行该DEMO(linesample.xaml)时,显示的效果如下图:
    
   


    
    
    当然“折线图”也支持多数据源绑定,比如下面的代码就演示了同时绑定数据源WidgetPopularity,GizmoPopularity的图表:
    
< charting:Chart  Title ="Typical Use" >
     
< charting:Chart.SerIEs >
         
< charting:lineserIEs  IsSelectionEnabled ="True"  Title ="Widget Popularity"
             ItemsSource
=" {StaticResource WidgetPopularity} "  IndependentValueBinding =" {Binding Date} "
             DependentValueBinding
=" {Binding Percent} "   />
         
< charting:lineserIEs  IsEnabled ="True"  Title ="Gizmo Popularity"
             ItemsSource
=" {StaticResource GizmoPopularity} "   IndependentValueBinding =" {Binding Date} "
             DependentValueBinding
=" {Binding Percent} "   />
     
</ charting:Chart.SerIEs >
 
</ charting:Chart >
                
                
    显示如下图:
    
  


    
    
    当做完所有必要的修改之后,最终linesample.xaml的运行效果:   
    

 

    
    
     同时,参考将“柱状图”转成“折线图”的过程,我们将“柱状图”转成“散点图”,这里不再多做说明了,做完相应转换后,我们运行一下源码包中的ScatterSample.xaml,看一下效果:


    
    
     看到这里,相信有一些朋友要说了,通过将现有的SerIEs替换成另一种SerIEs就可以对图表做出一番变化,那我能不能定制自己的SerIEs呢?答案是肯定的,在Toolkit的Sample代码中就有这个示例,为了让大家阅读方便,我已将这块代码复制到了本DEMO示例中,大家看一下CustomSerIEs下的两个文件SampleFunctionTypeConverter.cs 和FunctionSerIEs.cs,即可。

    最终的运行效果(CustomSerIEsSample.xaml)如下:




    
    
     好了,今天的内容就先到这里了,源码下载,请点击这里。
    
     原文链接: [url]http://daizhj.blog.51cto.com/285189/131059[/url]

     作者: daizhj,代震军

     Tags: silverlight,chart,图表,柱状图,Column,bar,饼图,PIE,折线图,line,散点图,Scatter

     网址: http://daizhj.blog.51cto.com
    
     在微软的Silverlight 开源控件项目: Silverlight Toolkit 总结

以上是内存溢出为你收集整理的使用Silverlight Toolkit绘制图表(下)--饼图,折线图,散点图全部内容,希望文章能够帮你解决使用Silverlight Toolkit绘制图表(下)--饼图,折线图,散点图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1062035.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存