利用Silverlight自带的chart组件可以很轻易地编写出各种常用的图表图形。

组件所在命名空间：
System.Windows.Controls.DataVisualization.Charting

在System.Windows.Controls.DataVisualization.Charting空间下可以定义下面7种图形
1、LineSeries 线性图
2、PieSeries 饼图
3、ColumnSeries 柱形图
4、AreaSeries 区域图
5、BarSeries 条状图
6、ScatterSeries 散点图
7、BubbleSeries 气泡图

下面通过静态绑定的方法用Microsoft.Phone.Control.Panorama全景视图控件展现一下LineSeries、PieSeries、ColumnSeries、AreaSeries四种图形。

页面文件 省略了重复的代码

1. View Code   
2.  
3. <phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
4.                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
5.                             xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
6.                             xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
7.                             xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
8.                             xmlns:local="clr-namespace:DataVisualizationOnWindowsPhone" 
9.                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
10.                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
11.                             xmlns:DataVisualization="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
12.                             xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" 
13.                             x:Class="DataVisualizationOnWindowsPhone.MainPage" 
14.                             SupportedOrientations="PortraitOrLandscape" 
15.                             Orientation="Portrait" 
16.                             mc:Ignorable="d" 
17.                             d:DesignWidth="480" 
18.                             d:DesignHeight="800" 
19.                             shell:SystemTray.IsVisible="False"> 
20.  
21.     <phone:PhoneApplicationPage.Resources> 
22.         <!-- Data --> 
23.         <local:Activities x:Key="Activities" /> 
24.     </phone:PhoneApplicationPage.Resources> 
25.  
26.     <phone:PhoneApplicationPage.FontSize> 
27.         <StaticResource ResourceKey="PhoneFontSizeNormal" /> 
28.     </phone:PhoneApplicationPage.FontSize> 
29.     <phone:PhoneApplicationPage.Foreground> 
30.         <StaticResource ResourceKey="PhoneForegroundBrush" /> 
31.     </phone:PhoneApplicationPage.Foreground> 
32.  
33.     <Grid> 
34.         <Grid.RowDefinitions> 
35.             <RowDefinition /> 
36.         </Grid.RowDefinitions> 
37.  
38.         <!-- Title --> 
39.         <controls:Panorama Title="图表控件"  > 
40.             ……  
41.             <controls:PanoramaItem Header="饼图"> 
42.                 <Grid> 
43.                     <charting:Chart x:Name="pieChart" 
44.                                     Style="{StaticResource PhoneChartStyle}" 
45.                                     Template="{StaticResource PhoneChartPortraitTemplate}" Margin="0,0,-7,0"> 
46.                         <charting:Chart.Palette> 
47.                             <DataVisualization:ResourceDictionaryCollection> 
48.                                 <ResourceDictionary> 
49.                                     <Style x:Key="DataPointStyle" 
50.                                            TargetType="Control"> 
51.                                         <Setter Property="Background"> 
52.                                             <Setter.Value> 
53.                                                 <RadialGradientBrush MappingMode="Absolute"> 
54.                                                     <GradientStop Color="Blue" 
55.                                                                   Offset="0.9" /> 
56.                                                     <GradientStop Color="DarkBlue" 
57.                                                                   Offset="1.0" /> 
58.                                                 </RadialGradientBrush> 
59.                                             </Setter.Value> 
60.                                         </Setter> 
61.                                         <Setter Property="BorderBrush" 
62.                                                 Value="Transparent" /> 
63.                                     </Style> 
64.                                 </ResourceDictionary> 
65.                                 <ResourceDictionary> 
66.                                     <Style x:Key="DataPointStyle" 
67.                                            TargetType="Control"> 
68.                                         <Setter Property="Background"> 
69.                                             <Setter.Value> 
70.                                                 <RadialGradientBrush MappingMode="Absolute"> 
71.                                                     <GradientStop Color="Yellow" 
72.                                                                   Offset="0.8" /> 
73.                                                     <GradientStop Color="Orange" 
74.                                                                   Offset="1.0" /> 
75.                                                 </RadialGradientBrush> 
76.                                             </Setter.Value> 
77.                                         </Setter> 
78.  
79.                                         <Setter Property="BorderBrush" 
80.                                                 Value="Transparent" /> 
81.                                     </Style> 
82.                                 </ResourceDictionary> 
83.                                 <ResourceDictionary> 
84.                                     <Style x:Key="DataPointStyle" 
85.                                            TargetType="Control"> 
86.                                         <Setter Property="Background"> 
87.                                             <Setter.Value> 
88.                                                 <RadialGradientBrush MappingMode="Absolute"> 
89.                                                     <GradientStop Color="Red" 
90.                                                                   Offset="0.8" /> 
91.                                                     <GradientStop Color="DarkRed" 
92.                                                                   Offset="1.0" /> 
93.                                                 </RadialGradientBrush> 
94.                                             </Setter.Value> 
95.                                         </Setter> 
96.  
97.                                         <Setter Property="BorderBrush" 
98.                                                 Value="Transparent" /> 
99.                                     </Style> 
100.                                 </ResourceDictionary> 
101.                                 <ResourceDictionary> 
102.                                     <Style x:Key="DataPointStyle" 
103.                                            TargetType="Control"> 
104.                                         <Setter Property="Background"> 
105.                                             <Setter.Value> 
106.                                                 <RadialGradientBrush MappingMode="Absolute"> 
107.                                                     <GradientStop Color="Green" 
108.                                                                   Offset="0.8" /> 
109.                                                     <GradientStop Color="DarkGreen" 
110.                                                                   Offset="1.0" /> 
111.                                                 </RadialGradientBrush> 
112.                                             </Setter.Value> 
113.                                         </Setter> 
114.  
115.                                         <Setter Property="BorderBrush" 
116.                                                 Value="Transparent" /> 
117.                                     </Style> 
118.                                 </ResourceDictionary> 
119.                                 <ResourceDictionary> 
120.                                     <Style x:Key="DataPointStyle" 
121.                                            TargetType="Control"> 
122.                                         <Setter Property="Background"> 
123.                                             <Setter.Value> 
124.                                                 <RadialGradientBrush MappingMode="Absolute"> 
125.                                                     <GradientStop Color="Lime" 
126.                                                                   Offset="0.8" /> 
127.                                                     <GradientStop Color="LimeGreen" 
128.                                                                   Offset="1.0" /> 
129.                                                 </RadialGradientBrush> 
130.                                             </Setter.Value> 
131.                                         </Setter> 
132.  
133.                                         <Setter Property="BorderBrush" 
134.                                                 Value="Transparent" /> 
135.                                     </Style> 
136.                                 </ResourceDictionary> 
137.                                 <ResourceDictionary> 
138.                                     <Style x:Key="DataPointStyle" 
139.                                            TargetType="Control"> 
140.                                         <Setter Property="Background"> 
141.                                             <Setter.Value> 
142.                                                 <RadialGradientBrush MappingMode="Absolute"> 
143.                                                     <GradientStop Color="LightGray" 
144.                                                                   Offset="0.8" /> 
145.                                                     <GradientStop Color="DarkGray" 
146.                                                                   Offset="1.0" /> 
147.                                                 </RadialGradientBrush> 
148.                                             </Setter.Value> 
149.                                         </Setter> 
150.  
151.                                         <Setter Property="BorderBrush" 
152.                                                 Value="Transparent" /> 
153.                                     </Style> 
154.                                 </ResourceDictionary> 
155.  
156.                             </DataVisualization:ResourceDictionaryCollection> 
157.                         </charting:Chart.Palette> 
158.                         <charting:PieSeries x:Name="pieSeries" 
159.                                             ItemsSource="{StaticResource Activities}" 
160.                                             DependentValuePath="Count" 
161.                                             IndependentValuePath="Activity" 
162.                                             AnimationSequence="FirstToLast" /> 
163.                     </charting:Chart> 
164.                 </Grid> 
165.             </controls:PanoramaItem> 
166.             ……  
167.         </controls:Panorama> 
168.  
169.     </Grid> 
170.  
171. </phone:PhoneApplicationPage> 

后台代码部分

1. using System.Collections.Generic;  
2. using System.Windows;  
3. using System.Windows.Controls;  
4. using Microsoft.Phone.Controls;  
5.  
6. namespace DataVisualizationOnWindowsPhone  
7. {  
8.     using System.Windows.Controls.DataVisualization.Charting;  
9.     using System.Windows.Media;  
10.  
11.     using DataVisualizationOnWindowsPhone.CustomPieChart;  
12.  
13.     public partial class MainPage : PhoneApplicationPage  
14.     {  
15.         public MainPage()  
16.         {  
17.             InitializeComponent();  
18.         }  
19.     }  
20.  
21.     //活动信息的类  
22.     public class ActivityInfo  
23.     {  
24.         public string Activity { get; set; }  
25.         public int Count { get; set; }  
26.     }  
27.  
28.     //活动的活动列表类  数据源  
29.     public class Activities : List<ActivityInfo> 
30.     {  
31.         public Activities()  
32.         {  
33.             Add(new ActivityInfo { Activity = "上班", Count = 100 });  
34.             Add(new ActivityInfo { Activity = "吃饭", Count = 26 });  
35.             Add(new ActivityInfo { Activity = "聊QQ", Count = 6 });  
36.             Add(new ActivityInfo { Activity = "陪老婆", Count = 60 });  
37.             Add(new ActivityInfo { Activity = "旅游", Count = 10 });  
38.             Add(new ActivityInfo { Activity = "发呆", Count = 18 });  
39.         }  
40.     }  
41. } 

组件常用方法：
Refresh：强制该组件从它的数据源刷新数据，然后重新渲染结果序列。

组件的常用属性：
ActualAxes：获取显示在该组件上的实际轴数。
Axes：获取或设置在组件中的轴的序列。
ChartAreaStyle：获取或设置ISeriesHost的图表区域样式。
LegendItems：获取图例项的集合。
LegendStyle：获取或设置图例的样式。
LegendTitle：获取或设置图例的标题内容。
PlotAreaStyle：获取或设置该组件绘图区域的样式。
Series：获取或设置显示在该组件中的数据序列集合。
StylePalette：获取或设置一个由ISeriesHost子项所使用的样式调色板。
Title：获取或设置该组件的标题。
TitleStyle：获取或设置该组件的标题的样式。

本文转自linzheng 51CTO博客，原文链接:http://blog.51cto.com/linzheng/1078686