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