Silverlight图表控件

Kagula

2011/10/28

内容简介

介绍Silverlight with C# 图表控件呈现饼图和折线图的方法，重点放在折线图。

本文中的代码在下面的环境中调试成功：

[1]Win7SP1 32位专业版

[2]VS2010SP1 专业版（英文版）

[3] Silverlight4 Toolkit (April 2010 Toolkit)

http://silverlight.codeplex.com/

正文

第一个图表控件项目

第一步：根据参考资料[3]安装Silverlight Toolkit

第二步：新建Silverlight应用项目

引入System.Windows.Controls.DataVisualization.Toolkit库，在MainPage.xaml.cs中加入System.Windows.Controls.DataVisualization.Charting名字空间引用。

第三步：在MainPage()构造函数中加入代码。

MainPage.xaml代码清单

<UserControl x:Class="testChart.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>

MainPage.xaml.cs代码清单

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Windows.Controls.DataVisualization.Charting;

namespace testChart
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            //创建图表控制，并加入到LayoutRoot节点中
            Chart chart = new Chart();
            chart.Title = "This is a Hello World!";
            chart.SetValue(Grid.RowProperty, 1);
            LayoutRoot.Children.Add(chart);


            //饼图
            PieSeries ps = new PieSeries();

            //横坐标
            System.Windows.Data.Binding keyBinding = new System.Windows.Data.Binding();
            keyBinding.Path = new PropertyPath("Key");
            ps.IndependentValueBinding = keyBinding;

            //垂直坐标
            System.Windows.Data.Binding valueBinding = new System.Windows.Data.Binding();
            valueBinding.Path = new PropertyPath("Value");
            ps.DependentValueBinding = valueBinding;


            ps.ItemsSource = new KeyValuePair<string, int>[] {
                   new KeyValuePair<string, int>("giraffle", 9), 
                   new KeyValuePair<string, int>("rhinoceros", 80), 
                   new KeyValuePair<string, int>("lizard", 6), 
                   new KeyValuePair<string, int>("locust", 100), 
                   new KeyValuePair<string, int>("caterpilla", 50) 
            };
            chart.Series.Add(ps);

            /*
            //折线图
            LineSeries lineSeries = new LineSeries();

            //折线图的横坐标
            System.Windows.Data.Binding keyBinding2 = new System.Windows.Data.Binding();
            keyBinding2.Path = new PropertyPath("Key");
            lineSeries.IndependentValueBinding = keyBinding2;

            //折线图的垂直坐标
            System.Windows.Data.Binding valueBinding2 = new System.Windows.Data.Binding();
            valueBinding2.Path = new PropertyPath("Value");
            lineSeries.DependentValueBinding = valueBinding2;

            //折线图的数据绑定
            lineSeries.ItemsSource = new KeyValuePair<DateTime, int>[] {
                   new KeyValuePair<DateTime, int>(DateTime.Now, 9), 
                   new KeyValuePair<DateTime, int>(DateTime.Now.AddDays(1), 8), 
                   new KeyValuePair<DateTime, int>(DateTime.Now.AddDays(3), 6), 
                   new KeyValuePair<DateTime, int>(DateTime.Now.AddDays(2), 9), 
                   new KeyValuePair<DateTime, int>(DateTime.Now.AddDays(4), 8) 
            };

            //动态数据放入图表控件中
            chart.Series.Add(lineSeries);
             */ 
        }
    }
}

运行效果图

图一 饼图

图二 饼图&折线图

chart.Series也可以加入多个Series

第二个图表控件项目-

在第一个项目的基础上对折线图的风格做了些自定义

第一步：新建Silverlight4应用项目,XAML源码如下

<UserControl x:Class="slChartVisualization.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="480" d:DesignWidth="640" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">

    <Grid x:Name="LayoutRoot" Background="White">
        <toolkit:Chart HorizontalAlignment="Center" Name="chart1" Title="Chart Title" VerticalAlignment="Center" Width="500" Height="400">
        </toolkit:Chart>
    </Grid>
</UserControl>

第二步：修改MainPage.xaml.cs源码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.DataVisualization.Charting;

namespace slChartVisualization
{
    public partial class MainPage : UserControl
    {
        List<DynamicData> dynamicData = new List<DynamicData>();

        public MainPage()
        {
            InitializeComponent();

            LineSeries lineSeries = new LineSeries();

            //折线图的横坐标、垂直坐标对应的字段名
            lineSeries.IndependentValueBinding = new System.Windows.Data.Binding("Time");
            lineSeries.DependentValueBinding = new System.Windows.Data.Binding("Point"); 

            //折线图所需要的数据绑定
            List<DynamicData> dynamicData = new List<DynamicData>();
            Random ra = new Random();
            for (int i = 0; i < 8; i++)
            {
                double value = ra.NextDouble();
                value = Math.Round(value, 2) * 100;
                DynamicData dyData = new DynamicData{ Point = value, Time = DateTime.Now.AddDays(i)};
                dynamicData.Add(dyData);
            };
            lineSeries.ItemsSource = dynamicData;

            //定义视图风格
            Style dataPointStyle = new System.Windows.Style();
            dataPointStyle.TargetType = typeof(System.Windows.Controls.Control);

            Style LegendStyle = new System.Windows.Style();
            LegendStyle.TargetType = typeof(System.Windows.Controls.Control);

            Setter setterDataRed = new Setter(System.Windows.Controls.Control.BackgroundProperty, new SolidColorBrush(Colors.Red));
            Setter setterLegendRed = new Setter(System.Windows.Controls.Control.BackgroundProperty, new SolidColorBrush(Colors.Red));

            dataPointStyle.Setters.Add(setterDataRed);
            LegendStyle.Setters.Add(setterLegendRed);
            lineSeries.DataPointStyle = dataPointStyle;
            lineSeries.LegendItemStyle = LegendStyle;
            lineSeries.Title = "我的测试值";
            //lineSeries.BorderThickness = new Thickness(100);
            //lineSeries.BorderBrush = new SolidColorBrush(Color.FromArgb(255, 0, 200, 200));            
            IAxis datetimeAxis = new DateTimeAxis { Orientation = AxisOrientation.X, FontStyle = FontStyles.Normal,
                FontSize = 12f,ShowGridLines = false, Title = "时间" };
            IAxis valueAxis = new LinearAxis { Orientation = AxisOrientation.Y, ShowGridLines = true, 
                 Minimum = 0 ,Maximum=200, Title = "测试值" };
            lineSeries.AnimationSequence = AnimationSequence.FirstToLast;

            chart1.Axes.Clear();
            chart1.Axes.Add(datetimeAxis);
            chart1.Axes.Add(valueAxis);

            //动态数据放入图表控件中
            chart1.Background = new SolidColorBrush(Color.FromArgb(255, 255, 200, 200));
            chart1.Series.Add(lineSeries);
        }
    }
}

DynamicData.cs源码清单

using System;

namespace slChartVisualization
{
    public class DynamicData
    {
        public DateTime Time
        { get; set; }
        public double Point
        { get; set; }
    }
}

运行结果如下：

图三 折线图

进一步的使用参考资料[4]

参考资料

[1]Silverlight Toolkit使用样例

http://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html

[2] Windows Phone 7.1 SDK Development (“Mango”)

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570

[3]《 Silverlight图表控件Chart的使用初体验》

http://www.xueit.com/silverlight/show-7809-2.aspx

[4]《Columns of a different color [Customizing the appearance of Silverlight charts with re-templating and MVVM]》

http://blogs.msdn.com/b/delay/archive/2009/02/04/columns-of-a-different-color-customizing-the-appearance-of-silverlight-charts-with-re-templating-and-mvvm.aspx