Windows Phone 7 chart图表编程

利用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四种图形。

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

View Code

< 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：获取或设置该组件的标题的样式。