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),int>("lizard",6),int>("locust",100),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,new keyvaluePair<DateTime,int>(DateTime.Now.AddDays(1),8),int>(DateTime.Now.AddDays(3),int>(DateTime.Now.AddDays(2),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,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));
            chart1.Series.Add(lineseries);
        }
    }
}

DynamicData.cs源码清单

using System;

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

运行结果如下：