Chart在任何一个与统计有关的项目中都是必不可少的.Silverlight自带了Chart控件,也有不少第三方支持的控件,其中之一就是Visifire,不过现在已经收费了.
的确Silverlight自带的Chart控件不如其他第三方控件那么华丽,但是在不需要刻意追求绚丽视觉效果的项目中Silverlight自带的Chart包含的功能已经是绰绰有余的了.
好吧,进入正题,既然是初体验本章仅对最基本的四种类型进行介绍,点状图、线形图、柱状图和区域图(在后面会继续介绍饼图等其他类型图)。
既然是介绍Chart那么Chart控件就是必不可少的咯,我们在页面中拖入Chart和radioButton,如下图:
Silverlight Control(四)Chart (1) 初体验_www.fengfly.com
图表中最重要的就是数据了,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 Control(四)Chart (1) 初体验_www.fengfly.comSilverlight Control(四)Chart (1) 初体验_www.fengfly.com
Silverlight Control(四)Chart (1) 初体验_www.fengfly.comSilverlight Control(四)Chart (1) 初体验_www.fengfly.com
以下附上详细代码,相信对刚接触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(); } }}
转自:http://www.cnblogs.com/hades/archive/2010/08/09/1793847.html
原文来自:雨枫技术教程网 http://www.fengfly.com
原文网址:http://www.fengfly.com/plus/view-186648-1.html