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四種圖形。

頁面文件 省略了重複的代碼

<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：獲取或設置該組件的標題的樣式。