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