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