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

　　本文举例源代码或素材下载

　　在上篇文章中介绍了如何使用Silverlight Toolkit提供ChartControl控件绘制柱状图(Column,Bar)今天会继续

　　使用上文中所创建代码我们只要做很少修改就可以让柱状图显示变成饼图,折线图或散点图

　　好了开始今天正文

　　首先我们要新创建个饼图"Silverlight Control控件"并将其命名为:PieSample.xaml

　

　　然后我们拷贝相应ColumnSample.xamlColumnSample.xaml.cs中相应代码到: PieSample.xaml 和 Pie-

　　Sample.xaml.cs文件中接着我们修改PieSample.xaml.cs文件中dataServiceClient_GetEmployeeListCompleted

　　思路方法修改后结果如下:

voiddataServiceClient_GetEmployeeListCompleted(objectsender,GetEmployeeListCompletedEventArgse)
{
　　ObservableCollection<EmployeeInfo>employeeList=e.Result;
　　Action<Chart>chartModier=(chart)=>
　　{
　　　　AxisdateAxis=Axis{Orientation=AxisOrientation.Horizontal,Title="雇员名称",FontStyle=FontStyles.Normal,FontSize=12f,ShowGridLines=true};
　　　　EmployeeChart.Axes.Add(dateAxis);
　　　　AxisvalueAxis=Axis{Orientation=AxisOrientation.Vertical,Title="薪水",Minimum=-1000,Maximum=3000,ShowGridLines=true};
　　　　EmployeeChart.Axes.Add(valueAxis);
　　};
　　chartModier(EmployeeChart);
　　PieSeriesseries=PieSeries;
　　series.ItemsSource=employeeList;
　　series.IndependentValueBinding=.Windows.Data.Binding("EmployeeName");
　　series.DependentValueBinding=.Windows.Data.Binding("Salary");
　　series.AnimationSequence=AnimationSequence.LastToFirst;
　　EmployeeChart.Series.Add(series);
}

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

　　

　　当然如果大家对ChartControl控件中数据显示颜色不满意也可以按我们自己想法“自定义颜色”比如我们在

　　Xaml中定义下面类型

<UserControl.Resources>
　……
　　<samples:StylePalettex:Key="ColorCustomStyle">
　　　　<StyleTargetType="Control">
　　　　　　<SetterProperty="Background"Value="Yellow"/>
　　　　　　<SetterProperty="BorderBrush"Value="Black"/>
　　　　</Style>
　　　　<StyleTargetType="Control">
　　　　　　<SetterProperty="Background"Value="Purple"/>
　　　　　　<SetterProperty="BorderBrush"Value="Black"/>
　　　　</Style>
　　</samples:StylePalette>
</UserControl.Resources>

　　注意:StylePalette类型声明如下:

publicpartialStylePalette:Collection<Style>
{
　　publicStylePalette{}
}

　　这样当我们就可以在cs文件中使用该样式信息了如下:　　

PieSeriesseries=PieSeries;
series.ItemsSource=employeeList;
series.IndependentValueBinding=.Windows.Data.Binding("EmployeeName");
series.DependentValueBinding=.Windows.Data.Binding("Salary");
//绑定了该样式
series.StylePalette=this.Resources["ColorCustomStyle"]asCollection<Style>;
series.AnimationSequence=AnimationSequence.LastToFirst;

　　现在我们再看下其运行效果:

　　

　　可以看出我们只要将ColumnSeries换成PieSeries其它代码行不动就将柱状图显示成了饼图

　　是不是很方便呵呵

　　当然在饼图中也支持直接在Xaml中进行属性声明绑定比如:

<charting:ChartTitle="Xaml绑定"x:Name="FunctionSeriesSample"　BorderBrush="Gray"Margin="5">
　　<charting:Chart.Series>
　　　　<charting:PieSeries
　　　　　　　　ItemsSource="{BindingPugetSound,Source={StaticResourceCity}}"
　　　　　　　　IndependentValueBinding="{BindingName}"
　　　　　　　　DependentValueBinding="{BindingPopulation}"
　　　　　　　　IsSelectionEnabled="True"
　　　　　　　　SelectionChanged="BarSeries_SelectionChanged"StylePalette="{StaticResourceColorCustomStyle}"
　　　　　　　　Template="{StaticResourceCustomTemplate}">
　　　　</charting:PieSeries>
　　</charting:Chart.Series>
</charting:Chart>

　　另外就是饼图支持鼠标选择事件比如当我们使用鼠标选中饼图中某显示区域时我们可以将该区

　　域详细信息显示出来为了实现这个效果我们将下面代码加入了PieSample.Xaml中:

<controls:DockPanelLastChildFill="False"controls:DockPanel.Dock="Right">
　　<StackPanel　x:Name="InformationPanel"controls:DockPanel.Dock="Top"Margin="5">
　　　　<TextBlockText="SelectedCityDetails"FontWeight="Bold"/>
　　　　<StackPanelOrientation="Horizontal">
　　　　　　<TextBlockText="Name:"/>
　　　　　　<TextBlockText="{BindingName}"/>
　　　　</StackPanel>
　　　　<StackPanelOrientation="Horizontal">
　　　　　　<TextBlockText="Population:"/>
　　　　　　<TextBlockText="{BindingPopulation}"/>
　　　　</StackPanel>
　　</StackPanel>
　　<Button　Content="取消选中"Click="Unselect_Click"Margin="5"controls:DockPanel.Dock="Bottom"/>
</controls:DockPanel>

　　这里我们只要在PieSample.Xaml.cs文件中编写事件BarSeries_SelectionChanged处理代码即可:

privatevoidBarSeries_SelectionChanged(objectsender,SelectionChangedEventArgse)
{
　　InformationPanel.DataContext=(1<=e.AddedItems.Count)?e.AddedItems[0]:null;
}
privatevoidUnselect_Click(objectsender,.Windows.RoutedEventArgse)
{
　　(FunctionSeriesSample.Series[0]asPieSeries).SelectedItem=null;
}

　　下面看下运行效果:



　　这样当我们参照的前讲过将柱状图转成饼图思路方法将所有ColumnSeries修改为“PieSeries”的后

　　我们会看到下面显示效果:



　　其实看到这里相信大家会举返 3了下面要说“折线图”,“散点图”要如何绘制了不错对

　　于折线图使用Series为“LineSeries”而散点图使用是“ScatterSeries”不过有点就是这两个

　　图中X,Y轴数据绑定类型要做下转换的前我们使用X轴是EmployeeName,Y轴使用是

　　Salary.我们要修改是X轴新绑定是EmployeeID原因我猜是这两种图表要求XY两个轴只能是数

　　值型或日期型所致

　　下面以dataServiceClient_GetEmployeeListCompleted思路方法为例看下最终修改结果:

voiddataServiceClient_GetEmployeeListCompleted(objectsender,GetEmployeeListCompletedEventArgse)
{
　　ObservableCollection<EmployeeInfo>employeeList=e.Result;
　　Action<Chart>chartModier=(chart)=>
　　{
　　　　AxisdateAxis=Axis{Orientation=AxisOrientation.Horizontal,Title="雇员名称",FontStyle=FontStyles.Normal,FontSize=12f,ShowGridLines=true};
　　　　EmployeeChart.Axes.Add(dateAxis);
　　　　AxisvalueAxis=Axis{Orientation=AxisOrientation.Vertical,Title="薪水",Minimum=-1000,Maximum=3000,ShowGridLines=true};
　　　　EmployeeChart.Axes.Add(valueAxis);
　　};
　　chartModier(EmployeeChart);
　　LineSeriesseries=LineSeries;
　　series.ItemsSource=employeeList;
　　series.IndependentValueBinding=.Windows.Data.Binding("EmployeeID");
　　series.DependentValueBinding=.Windows.Data.Binding("Salary");
　　EmployeeChart.Series.Add(series);
}

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



　　当然“折线图”也支持多数据源绑定比如下面代码就演示了同时绑定数据源WidgetPopularity

　　GizmoPopularity图表:

<charting:ChartTitle="TypicalUse">
　　<charting:Chart.Series>
　　　　<charting:LineSeriesIsSelectionEnabled="True"Title="WidgetPopularity"
　　　　　　ItemsSource="{StaticResourceWidgetPopularity}"IndependentValueBinding="{BindingDate}"
　　　　　　DependentValueBinding="{BindingPercent}"/>
　　　　<charting:LineSeriesIsEnabled="True"Title="GizmoPopularity"
　　　　　　ItemsSource="{StaticResourceGizmoPopularity}"　IndependentValueBinding="{BindingDate}"
　　　　　　DependentValueBinding="{BindingPercent}"/>
　　</charting:Chart.Series>
</charting:Chart>

　　显示如下图:

　　

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



　　同时参考将“柱状图”转成“折线图”过程我们将“柱状图”转成“散点图”这里不再多做介绍说明了做

　　完相应转换后我们运行下源码包中ScatterSample.xaml看下效果:



　　看到这里相信有些朋友要说了通过将现有Series替换成另种Series就可以对图表做出番变化那我

　　能不能定制自己Series呢？答案是肯定在ToolkitSample代码中就有这个举例为了让大家阅读方便我已将

　　这块代码复制到了本DEMO举例中大家看下CustomSeries下两个文件SampleFunctionTypeConverter.cs

　　和FunctionSeries.cs即可

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







　　　好了今天内容就先到这里了

　　原文链接:http://www.cnblogs.com/daizhj/archive/2009/01/15/1376295.html



　　系列文章:

　　使用Silverlight Toolkit绘制图表(上)--柱状图

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

延伸阅读

• 2009-1-23-- silverlight:学Silverlight 2系列(8):使用样式封装Control控件观感
• 2009-1-23-- silverlight:学Silverlight 2系列(10):使用用户Control控件
• 2009-1-23-- silverlight:使用Silverlight 2 和 VS 2008创建 Hello World 程序
• 2009-1-23-- 微软silverlight:Silverlight 微软平台的再度膨胀
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- silverlight:Silverlight 2 (beta1)数据操作(3)——使用ADO.NET Data Service (Astoria)进行数据CRUD操作
• 2009-1-23-- silverlight:Silverlight 2中多语言支持实现(下)
• 2009-1-23-- silverlight:学Silverlight 2系列(32):图形图像综合例子— 功夫的王 剧照播放
• 2009-1-23-- silverlight:学Silverlight 2系列(22):在Silverlight中如何用JavaScript调用.NET代码
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 4)