利用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四种图形。
页面文件 省略了重复的代码
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
< phone:PhoneApplicationPage xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell ="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:charting ="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:local ="clr-namespace:DataVisualizationOnWindowsPhone" xmlns:d ="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:DataVisualization ="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:controls ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" x:Class ="DataVisualizationOnWindowsPhone.MainPage" SupportedOrientations ="PortraitOrLandscape" Orientation ="Portrait" mc:Ignorable ="d" d:DesignWidth ="480" d:DesignHeight ="800" shell:SystemTray.IsVisible ="False" > < phone:PhoneApplicationPage.Resources > <!-- Data --> < local:Activities x:Key ="Activities" /> </ phone:PhoneApplicationPage.Resources > < phone:PhoneApplicationPage.FontSize > < StaticResource ResourceKey ="PhoneFontSizeNormal" /> </ phone:PhoneApplicationPage.FontSize > < phone:PhoneApplicationPage.Foreground > < StaticResource ResourceKey ="PhoneForegroundBrush" /> </ phone:PhoneApplicationPage.Foreground > < Grid > < Grid.RowDefinitions > < RowDefinition /> </ Grid.RowDefinitions > <!-- Title --> < controls:Panorama Title ="图表控件" > …… < controls:PanoramaItem Header ="饼图" > < Grid > < charting:Chart x:Name ="pieChart" Style =" {StaticResource PhoneChartStyle} " Template =" {StaticResource PhoneChartPortraitTemplate} " Margin ="0,0,-7,0" > < charting:Chart.Palette > < DataVisualization:ResourceDictionaryCollection > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Blue" Offset ="0.9" /> < GradientStop Color ="DarkBlue" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Yellow" Offset ="0.8" /> < GradientStop Color ="Orange" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Red" Offset ="0.8" /> < GradientStop Color ="DarkRed" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Green" Offset ="0.8" /> < GradientStop Color ="DarkGreen" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Lime" Offset ="0.8" /> < GradientStop Color ="LimeGreen" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="LightGray" Offset ="0.8" /> < GradientStop Color ="DarkGray" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > </ DataVisualization:ResourceDictionaryCollection > </ charting:Chart.Palette > < charting:PieSeries x:Name ="pieSeries" ItemsSource =" {StaticResource Activities} " DependentValuePath ="Count" IndependentValuePath ="Activity" AnimationSequence ="FirstToLast" /> </ charting:Chart > </ Grid > </ controls:PanoramaItem > …… </ controls:Panorama > </ Grid > </ phone:PhoneApplicationPage >
后台代码部分
using System.Collections.Generic; using System.Windows; using System.Windows.Controls; using Microsoft.Phone.Controls; namespace DataVisualizationOnWindowsPhone { using System.Windows.Controls.DataVisualization.Charting; using System.Windows.Media; using DataVisualizationOnWindowsPhone.CustomPieChart; public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent(); } } // 活动信息的类 public class ActivityInfo { public string Activity { get ; set ; } public int Count { get ; set ; } } // 活动的活动列表类 数据源 public class Activities : List < ActivityInfo > { public Activities() { Add( new ActivityInfo { Activity = " 上班 " , Count = 100 }); Add( new ActivityInfo { Activity = " 吃饭 " , Count = 26 }); Add( new ActivityInfo { Activity = " 聊QQ " , Count = 6 }); Add( new ActivityInfo { Activity = " 陪老婆 " , Count = 60 }); Add( new ActivityInfo { Activity = " 旅游 " , Count = 10 }); Add( new ActivityInfo { Activity = " 发呆 " , Count = 18 }); } } }
组件常用方法:
Refresh:强制该组件从它的数据源刷新数据,然后重新渲染结果序列。
组件的常用属性:
ActualAxes:获取显示在该组件上的实际轴数。
Axes:获取或设置在组件中的轴的序列。
ChartAreaStyle:获取或设置ISeriesHost的图表区域样式。
LegendItems:获取图例项的集合。
LegendStyle:获取或设置图例的样式。
LegendTitle:获取或设置图例的标题内容。
PlotAreaStyle:获取或设置该组件绘图区域的样式。
Series:获取或设置显示在该组件中的数据序列集合。
StylePalette:获取或设置一个由ISeriesHost子项所使用的样式调色板。
Title:获取或设置该组件的标题。
TitleStyle:获取或设置该组件的标题的样式。