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

博客园 - hades

python + selenium webdriver 自动化测试之环境异常处理（持续更新）推荐一个娱乐化学习python的网站 Silverlight 导出Excel Silverlight Control（三）DataGrid Silverlight Control（二）ListBox Silverlight 中使用 WCF RIA Service Silverlight Control（六）GroupBox Silverlight Control（五）TimePicker 在Silverlight中请谨慎使用MVVM Silverlight Chart 综合运用(样式、多轴、数据绑定、点状图、线形图、DataGrid、Chart导出综合运用) C# 关闭其他程序窗口、进程 Silverlight 如何导出图片 Silverlight Control（一）ComboBox 数据绑定、自定义、取值 Silverlight Style (二) 自定义样式在后台代码中应用 Silverlight Style (一) 如何在页面应用样式 Silverlight Binding (One Time,One Way,Two Way) ASP.NET项目中不能有重名的文件夹给部队做项目开发的一点想法企业工作流的定制(SPS实现)

hades · 2010-08-09 · via 博客园 - hades

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

}
}

更丰富的运用,请看这里

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - hades