Chart图表应用


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