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

概述       在 上一篇文章中，介绍了如何使用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绘制图表(下)--饼图,折线图,散点图所遇到的程序开发问题。

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