Silverlight Control（四）Chart (1) 初体验
Chart在任何一个与统计有关的项目中都是必不可少的.Silverlight自带了Chart控件,也有不少第三方支持的控件,其中之一就是Visifire,不过现在已经收费了.
的确Silverlight自带的Chart控件不如其他第三方控件那么华丽,但是在不需要刻意追求绚丽视觉效果的项目中Silverlight自带的Chart包含的功能已经是绰绰有余的了.
好吧,进入正题,既然是初体验本章仅对最基本的四种类型进行介绍,点状图、线形图、柱状图和区域图（在后面会继续介绍饼图等其他类型图）。
既然是介绍Chart那么Chart控件就是必不可少的咯，我们在页面中拖入Chart和radioButton，如下图:
图表中最重要的就是数据了，OK我们来准备一套测试数据:
public class DynamicData
{
public double 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
{
public partial class Control_Chart : Page
{
public class DynamicData
{
public double 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.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void 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();
}
}
}
更丰富的运用,请看这里