Silverlight Control（四）Chart (1) 初体验

Chart在任何一个与统计有关的项目中都是必不可少的.Silverlight自带了Chart控件,也有不少第三方支持的控件,其中之一就是Visifire,不过现在已经收费了.

的确Silverlight自带的Chart控件不如其他第三方控件那么华丽,但是在不需要刻意追求绚丽视觉效果的项目中Silverlight自带的Chart包含的功能已经是绰绰有余的了.

好吧,进入正题,既然是初体验本章仅对最基本的四种类型进行介绍,点状图、线形图、柱状图和区域图（在后面会继续介绍饼图等其他类型图）。

既然是介绍Chart那么Chart控件就是必不可少的咯，我们在页面中拖入Chart和radioButton，如下图:

图表中最重要的就是数据了，OK我们来准备一套测试数据:

 

publicclass DynamicData
{
     publicdouble Point
     { get; set; }
     public DateTime Time
     { get; set; }
}

 

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);s
}

这里随机生成了一些数据。

有了数据，那么接下来就是数据绑定了。

 

ScatterSeries scatterSeries =new ScatterSeries 
{
    ItemsSource=dynamicData,Title="点状图",
    IndependentValueBinding=new Binding("Time"), //X轴
     DependentValueBinding=new Binding("Point"),  //Y轴

};

ScatterSeries是点类型对象，相应的还有LineSeries，ColumnSeries，AreaSeries，PieSeries等。

我们用ItemsSource属性进行数据绑定，IndependentValueBinding和DependentValueBinding分别指定X轴和Y轴绑定的数据对象。

想要把数据显示在Chart中，我们当然还要把这些对象加载到Chart对象。

 

myChart.Series.Add(scatterSeries);

经过以上几个步骤，一个功能简单的Chart就完成了。另外我们可以设置一些样式，让它们看起来效果更好一些。

 

关于样式的设置请看这里和这里。

 

 

以下附上详细代码，相信对刚接触Silverlight的朋友会有帮助:

 

<navigation:Page x:Class="MySilverlightTest.Control_Chart" 
           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"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="800" d:DesignHeight="600"
           Title="myChart Page" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">
    <Grid x:Name="LayoutRoot">
        <chartingToolkit:Chart HorizontalAlignment="Left" Margin="12,49,0,0" Name="myChart" VerticalAlignment="Top" Height="539" Width="776"/>
        <Button Content="Button" Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="btnShow" VerticalAlignment="Top" Width="82" Click="btnShow_Click"/>
        <RadioButton Content="点" Height="18" HorizontalAlignment="Left" Margin="132,17,0,0" Name="radioButtonScatter" VerticalAlignment="Top" Width="54" GroupName="Chart" IsChecked="True"/>
        <RadioButton Content="线" Height="18" HorizontalAlignment="Left" Margin="192,17,0,0" Name="radioButtonLine" VerticalAlignment="Top" Width="52" GroupName="Chart"/>
        <RadioButton Content="柱" Height="18" HorizontalAlignment="Left" Margin="255,17,0,0" Name="radioButtonColumn" VerticalAlignment="Top" Width="53" GroupName="Chart"/>
        <RadioButton Content="区域" GroupName="Chart" Height="18" HorizontalAlignment="Left" Margin="305,17,0,0" Name="radioButtonArea" VerticalAlignment="Top" Width="53"/>
    </Grid>
</navigation:Page>

 

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.Navigation;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;

namespace MySilverlightTest
{
    publicpartialclass Control_Chart : Page
    {
        publicclass DynamicData
        {
            publicdouble Point
            { get; set; }
            public DateTime Time
            { get; set; }
        }

        List<DynamicData> dynamicData =new List<DynamicData>();

        public Control_Chart()
        {
            InitializeComponent();
            Loaded +=new RoutedEventHandler(myChart_Loaded);
        }

        void myChart_Loaded(object sender, RoutedEventArgs e)
        {
            //定义平面图的样式
            Style plotAreaStyle =new System.Windows.Style(typeof(Grid));
            Setter setterPlotArea =new Setter(Grid.BackgroundProperty, new SolidColorBrush(Color.FromArgb(225, 255, 255, 200)));
            plotAreaStyle.Setters.Add(setterPlotArea);

            myChart.Title ="ChartDemo";
            myChart.Background =new SolidColorBrush(Color.FromArgb(100, 225, 225, 200));
            myChart.PlotAreaStyle = plotAreaStyle;
        }

        void BindData()
        {
            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);

            ScatterSeries scatterSeries =new ScatterSeries 
            {
                ItemsSource=dynamicData,Title="点状图",
                IndependentValueBinding=new Binding("Time"), //X轴
                DependentValueBinding=new Binding("Point"),  //Y轴
                DataPointStyle = dataPointStyle,           //点的样式
                LegendItemStyle = LegendStyle,            //右边Legend的样式
            };

            LineSeries lineSeries =new LineSeries
            { 
                ItemsSource = dynamicData,
                Title ="线形图",
                IndependentValueBinding =new Binding("Time"), //X轴
                DependentValueBinding =new Binding("Point"),  //Y轴
                DataPointStyle = dataPointStyle,
                LegendItemStyle = LegendStyle,
            };

            ColumnSeries columnSeries =new ColumnSeries
            {
                ItemsSource = dynamicData,
                Title ="柱状图",
                IndependentValueBinding =new Binding("Time"), //X轴
                DependentValueBinding =new Binding("Point"),  //Y轴
                DataPointStyle = dataPointStyle,
                LegendItemStyle = LegendStyle,
            };

            AreaSeries areaSeries =new AreaSeries
            {
                ItemsSource = dynamicData,
                Title ="区域图",
                IndependentValueBinding =new Binding("Time"), //X轴
                DependentValueBinding =new Binding("Point"),  //Y轴
                DataPointStyle = dataPointStyle,
                LegendItemStyle = LegendStyle,
            };
            
            if (true== radioButtonScatter.IsChecked)
                myChart.Series.Add(scatterSeries);
            if (true== radioButtonLine.IsChecked)
                myChart.Series.Add(lineSeries);
            if (true== radioButtonColumn.IsChecked)
                myChart.Series.Add(columnSeries);
            if (true== radioButtonArea.IsChecked)
                myChart.Series.Add(areaSeries);

            IAxis datetimeAxis =new DateTimeAxis { Orientation=AxisOrientation.X,ShowGridLines=false,Title="时间" };
            IAxis valueAxis =new LinearAxis { Orientation=AxisOrientation.Y,ShowGridLines =true, Title="测试值" };

            myChart.Axes.Add(datetimeAxis);
            myChart.Axes.Add(valueAxis);
        }

        // Executes when the user navigates to this page.
protectedoverridevoid OnNavigatedTo(NavigationEventArgs e)
        {
        }

        privatevoid btnShow_Click(object sender, RoutedEventArgs e)
        {
            dynamicData.Clear(); 
            myChart.Series.Clear();
            myChart.Axes.Clear();

            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);
            }

            BindData();
        }

    }
}

 

 更丰富的运用,请看这里