分类导航

silverlight 发布时间：2022-05-04 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了使用Silverlight Toolkit绘制图表(上)--柱状图，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

概述

Silverlight Toolkit提供了绘制柱状图(column,Bar)，饼图(PiE)，折线图(LinE), 散点图(Scatter)等控件。我们可以很方便的将已有的数据源绑定到相应图形控件上，设置好相应的X,Y轴显示样式和数据字段之后就大功告成了，同时其还支持图形的定时加载刷新，图形的动态加载动画效果。今天就先以柱状图为例，简要的总结一下如何使用该控件来显示我们的数据。

@H_801_18@ Silverlight Toolkit提供了绘制柱状图(column,Bar)，饼图(PiE)，折线图(LinE),散点图(Scatter)等控件。
我们可以很方便的将已有的数据源绑定到相应图形控件上，设置好相应的X,Y轴显示样式和数据字段之后就大功告
成了，同时其还@L_675_1@图形的定时加载刷新，图形的动态加载动画效果。今天就先以柱状图为例，简要的总结一下如
何使用该控件来显示我们的数据。

@H_801_18@

@H_801_18@     首先，我们需要创建一个Silverlight项目，命名为：DataVisualization。

     然后我们使用WCF方式发布数据源信息，这里我们创建一个"Silverlight功能的WCF"，并将其命名为：

@H_801_18@ Dataservice.svc

@H_801_18@

@H_801_18@ 接着将下面的代码拷贝到该类文件中：

public class employeeInfo
{
     public int employeEID { set ; get ; }
     public String employeename { set ; get ; }
     public int Salary { set ; get ; }
     public int [] Cost { get ; set ; }
     public String City { set ; get ; }
}

[serviceContract(Namespace = "" )]
[AspNetCompatibilityrequirements(requirementsMode = AspNetCompatibilityrequirementsMode.Allowed)]
public class Dataservice
{
    [OperationContract]
     public List < employeeInfo > GetemployeeList()
    {
        List < employeeInfo > employeeList = new List < employeeInfo > ();
        employeeList.Add( new employeeInfo { employeEID = 1 , employeename = " 张三 " , Salary = 1000 , City = " 合肥 " });
        employeeList.Add( new employeeInfo { employeEID = 2 , employeename = " 李四 " , Salary = 1500 , City = " 天津 " });
        employeeList.Add( new employeeInfo { employeEID = 3 , employeename = " 王五 " , Salary = 2000 , City = " 上海 " });
        employeeList.Add( new employeeInfo { employeEID = 4 , employeename = " 赵六 " , Salary = - 800 , City = " 北京 " });
        employeeList.Add( new employeeInfo { employeEID = 5 , employeename = " 尤七 " , Salary = 2100 , City = " 武汉 " });
        employeeList.Add( new employeeInfo { employeEID = 6 , employeename = " 马八 " , Salary = 2300 , City = " 海口 " });
         return employeeList;
    }
}

@H_801_18@

@H_801_18@    这里数据源我们就创建完成了，它将会返回6个雇员信息。

    下面我们往该Silverlight应用的Xaml文件上拖（或手工声明）一个Chart控件，如下：

< charTing:Chart title ="员工薪水" x:Name ="employeeChart" ></ charTing:Chart >

@H_801_18@
    我们看到在该控件上我们指定了title信息，该信息会显示在图表的最上方。


    下面开始编写CS代码。

    1.首先我们向该Silverlight应用中添加对刚才声明的WCF的引用。

    2.使用WCF生成的客户端类来获取相应的数据源，代码如下：

void LoadWcfData()
{
dataserviceClient.GetemployeeListCompleted += new EventHandler < GetemployeeListCompletedEventArgs > (dataserviceClient_GetemployeeListCompleted);
dataserviceClient.GetemployeeListAsync();
}

@H_801_18@

@H_801_18@ 3.将WCF返回的数据源信息绑定到相应的图形控件上，并初始化该控件的相应信息，如下：

void dataserviceClient_GetemployeeListCompleted( object sender, GetemployeeListCompletedEventArgs E)
{
    ObservableCollection < employeeInfo > employeeList = e.Result;

    Action < Chart > chartModifier = (chart) =>
    {
        Axis dateAxis = new Axis { Orientation = AxisOrientation.Horizontal, title = " 雇员名称 " , FontStyle = FontStyles.Normal, FontSize = 12f, ShowGridLines = true };
        employeeChart.Axes.Add(dateAxis);
        Axis valueAxis = new Axis { Orientation = AxisOrientation.Vertical, title = " 薪水 " , Minimum = - 1000 , Maximum = 3000 , ShowGridLines = true };
        employeeChart.Axes.Add(valueAxis);
    };
    chartModifier(employeeChart);

    columnSeries series = new columnSeries();
    series.Itemssource = employeeList;
    series.IndependentValueBinding = new System.Windows.Data.binding( " employeename " );
    series.DependentValueBinding = new System.Windows.Data.binding( " Salary " );
    series.title = " 薪水 " ;
    employeeChart.Series.Add(series);
}

@H_801_18@

@H_801_18@
在上面的代码中我们创建了Axis对象用以将X,Y轴的描述信息绑定到指定的图形控件上，然后将我们的指定数据
源绑定到该图形控件的Itemssource属性上，最后再绑定两个座标轴要显示的相应数据：

@H_801_18@    X轴: series.IndependentValueBinding = new System.Windows.Data.binding("employeename");

    Y轴: series.DependentValueBinding = new System.Windows.Data.binding("Salary");


    下面我们来看一下最终的显示效果，如下图所示：

     大家看到，在Y轴上我们既显示了正轴也显示了负轴，这就是通过Minimum = -1000,Maximum = 3000这一行
设置实现的。

     还不错了，到这里我们只是简要的领略了一个图形控件的基本功能。接着我们再了解一下它还有那些更高级的使
用技巧。

@H_801_18@ 首先是图形的定时加载刷新，要实现这个演示，我们需要一个实时变化的数据源，以便当我们定时刷新控件时能
显示不同的数据信息。所以我们要在WCF中创建一个这样的数据源：

[OperationContract]
public List < employeeInfo > GetemployeeDynamicList()
{
    random random = new random();
    List < employeeInfo > employeeList = new List < employeeInfo > ();
    employeeList.Add( new employeeInfo { employeEID = 1 , Salary = random.Next( 500 , 3000 ), City = " 合肥 " });
    employeeList.Add( new employeeInfo { employeEID = 2 , City = " 天津 " });
    employeeList.Add( new employeeInfo { employeEID = 3 , City = " 上海 " });
    employeeList.Add( new employeeInfo { employeEID = 4 , City = " 北京 " });
    employeeList.Add( new employeeInfo { employeEID = 5 , City = " 武汉 " });
    employeeList.Add( new employeeInfo { employeEID = 6 , City = " 海口 " });
     return employeeList;
}

@H_801_18@

    大家看到，这里使用了Random来模拟一个动态数据源信息，其生成的随机数介于500-3000之间，那么接下来，我
们再Silverlight的XAML上创建这样一个Chart对象，用以显示该动态数据源信息，如下：

< charTing:Chart title ="动态员工薪水" x:Name ="DynamicemployeeChart" />

@H_801_18@
    接着就是相应的CS代码了，这里为了方便起见，这里直接使用DispatcherTimer来定时(3秒)获取相应的数据源信
息，如下：

void LoadDynamicData()
{
    System.Windows.Threading.DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer();
    dispatcherTimer.Interval = TimeSpan.FromSeconds( 3 );
    dispatcherTimer.Tick += delegate
    {
        dataserviceClient.GetemployeeDynamicListCompleted += new EventHandler < GetemployeeDynamicListCompletedEventArgs > (dataserviceClient_GetemployeeDynamicListCompleted);
        dataserviceClient.GetemployeeDynamicListAsync();
    };
    dispatcherTimer.Start();
}

@H_801_18@

    接着就是初始化相应的图形控件并绑定相应的数据源了，代码与上面的CS代码相似，如下：

void dataserviceClient_GetemployeeDynamicListCompleted( object sender, GetemployeeDynamicListCompletedEventArgs E)
{
    ObservableCollection < employeeInfo > employeeList = e.Result;
    DynamicemployeeChart.Axes.Clear();
    DynamicemployeeChart.Series.Clear();
    Action < Chart > chartModifier = (chart) =>
    {
        Axis dateAxis = new Axis { Orientation = AxisOrientation.Horizontal, ShowGridLines = true };
        DynamicemployeeChart.Axes.Add(dateAxis);
        Axis valueAxis = new Axis { Orientation = AxisOrientation.Vertical, Minimum = 0 , ShowGridLines = true };
        DynamicemployeeChart.Axes.Add(valueAxis);
    };
    chartModifier(DynamicemployeeChart);

    columnSeries series = new columnSeries();
    series.Itemssource = employeeList;
    series.IndependentValueBinding = new System.Windows.Data.binding( " employeename " );
    series.DependentValueBinding = new System.Windows.Data.binding( " Salary " );
    series.title = " 薪水 " ;
    DynamicemployeeChart.Series.Add(series);
}

@H_801_18@

@H_801_18@    好了，这里我们看一下最终的运行效果，首先是刚启动运行时的截图：

    然后是三秒之后的运行截图：

到这里还不算完，因为该控件还@L_675_1@数据的分组显示，比如说如果我们的数据中有数组类型的字段信息，
该控件是以数组为单位（数组长度就是图表的列信息）。这个有些难以理解，下面就以一个示例来加以说明。
首先，我们要创建一个具有数组类型字段的数据源，如下：

[OperationContract]
public List < employeeInfo > GetMultiSeriesemployeeList()
{
    List < employeeInfo > employeeList = new List < employeeInfo > ();
    employeeList.Add( new employeeInfo { employeEID = 1 , Cost = new int [] { 100 , 160 } });
    employeeList.Add( new employeeInfo { employeEID = 2 , Cost = new int [] { 260 , 200 } });
    employeeList.Add( new employeeInfo { employeEID = 3 , Cost = new int [] { 360 , 330 } });
    employeeList.Add( new employeeInfo { employeEID = 4 , Salary = 800 , Cost = new int [] { 160 , 430 } });
    employeeList.Add( new employeeInfo { employeEID = 5 , Cost = new int [] { 560 , 530 } });
    employeeList.Add( new employeeInfo { employeEID = 6 , Cost = new int [] { 660 , 600 } });
     return employeeList;
}

@H_801_18@

@H_801_18@ 大家看到了，在该数据源中的Cost属性即是数据类型字段，该字段记录了雇员的交费信息：第一项为
“住房公积金”，第二项为“个人养老金”。

@H_801_18@     下面我们就来看一下该如何绑定这类数据源信息。

     首先在XAML中创建该图表控件，如下：

< charTing:Chart title ="MultiSeries" x:Name ="MultiSeries" MouSELEftButtonDown ="OnMouSELEftButtonDown" />

@H_801_18@

@H_801_18@    大家看到这里我们还绑定了鼠标单击事件，该事件主要用于稍后演示图表的动态效果，这里先行略过:)

    接着就是我们的CS代码了，首先是获取数据源：

void LoadMultiSeries()
{
dataserviceClient.GetMultiSeriesemployeeListCompleted += new EventHandler < GetMultiSeriesemployeeListCompletedEventArgs > (dataserviceClient_GetMultiSeriesemployeeListCompleted);
dataserviceClient.GetMultiSeriesemployeeListAsync();
}

@H_801_18@

@H_801_18@ 然后是相应的控件初始化和数据绑定代码：

void dataserviceClient_GetMultiSeriesemployeeListCompleted( object sender, GetMultiSeriesemployeeListCompletedEventArgs E)
{
    ObservableCollection < employeeInfo > employeeList = e.Result;

    Action < Chart > chartModifier = (chart) =>
    {
        Axis dateAxis = new Axis { Orientation = AxisOrientation.Horizontal, title = " 注 1:住房公积金  2:个人养老金 " , FontSize = 14f, ShowGridLines = true };
        MultiSeries.Axes.Add(dateAxis);

        Axis valueAxis = new Axis { Orientation = AxisOrientation.Vertical, title = " 税金 " , Maximum = 800 , ShowGridLines = true };
        MultiSeries.Axes.Add(valueAxis);
    };
    chartModifier(MultiSeries);

     foreach (employeeInfo itemssource in employeeList)
    {
        columnSeries series = new columnSeries();
        series.Itemssource = itemssource.Cost;
        series.DependentValueBinding = null ;
        series.IndependentValueBinding = null ;
        series.title = itemssource.employeename + " ID: " + itemssource.employeEID;
        series.AnimationSequence = AnimationSequence.FirstToLast;
        MultiSeries.Series.Add(series);
    }
}

@H_801_18@

@H_801_18@ 这里我们看到在控件的数据源绑定上与前两个DEMO存在一定的差异。因为每个雇员的交费字段本身就是一个数
组（整形），所以这里将该交费字段直接绑定到了columnSeries的Itemssource属性上。同时将columnSeries 的属
性 DependentValueBinding，IndependentValueBinding分别设置为null。这里给该columnSeries的动态显示效果
设置成了AnimationSequence.FirstToLast。下面我们会看到显示效果，而相应的鼠标单击事件代码摘自TOOKIT的
代码示例包，这里就不多加解释了。下面是相应的显示效果：

@H_801_18@

    当我们在图表上单击鼠标时，显示效果如下：

@H_801_18@

@H_801_18@
     等图表全被隐去时，这时我们再单击鼠标，图表会依次再显示出来。



     除了数据动态加载，Chart还@L_675_1@数据的静态绑定，如下面的XAML代码即是初始并绑定一个已存在的数据源：

< charTing:Chart title ="Xaml绑定" x:Name ="FunctionSeriesSample" MouSELEftButtonDown ="OnMouSELEftButtonDown" >
     < charTing:Chart.Series >
         < charTing:columnSeries
             title ="人口" AnimationSequence ="FirstToLast"
            Itemssource =" {Binding PugetSound, source={Staticresource City}} "
            independentValueBinding =" {Binding NAME} "
            DependentValueBinding =" {Binding Population} " />
     </ charTing:Chart.Series >
     < charTing:Chart.Axes >
         < charTing:Axis AxisType ="Category" title ="城市" Orientation ="Horizontal" FontStyle ="Italic" />
         < charTing:Axis AxisType ="Linear" title ="人口" Orientation ="Vertical" Minimum ="0" Maximum ="600000" Interval ="100000" ShowGridLines ="True"   FontStyle ="Italic" />
     </ charTing:Chart.Axes >
</ charTing:Chart >

@H_801_18@

@H_801_18@
而数据源是在程序中直接写死的，如下：

Code

@H_801_18@

@H_801_18@
到这里，有关柱状图的主要功能介绍的差不多了，但如果开发过相应图表功能的朋友会发现，之前的
DEMO显示的都是垂直的柱状图，但很多的网站上显示的都是水平方向的柱状图，比如说投票功能等，其实
Chart实现这个功能非常简要，只要在我们原有的CS代码基础上做很少的改动即可实现，这里以上面的第
一个DEMO为例，看一下如何进行改造：

@H_801_18@ 下面是其dataserviceClient_GetemployeeListCompleted方法的改造后的代码：

@H_801_18@

void dataserviceClient_GetemployeeListCompleted( object sender, GetemployeeListCompletedEventArgs E)
{
     ObservableCollection < employeeInfo > employeeList = e.Result;

     Action < Chart > chartModifier = (chart) =>
     {
         Axis dateAxis = new Axis { Orientation = AxisOrientation.Vertical, ShowGridLines = true };
         employeeChart.Axes.Add(dateAxis);
         Axis valueAxis = new Axis { Orientation = AxisOrientation.Horizontal, ShowGridLines = true };
         employeeChart.Axes.Add(valueAxis);
     };
     chartModifier(employeeChart);

     BarSeries series = new BarSeries();
     series.Itemssource = employeeList;
     series.IndependentValueBinding = new System.Windows.Data.binding( " employeename " );
     series.DependentValueBinding = new System.Windows.Data.binding( " Salary " );
     employeeChart.Series.Add(series);
}

@H_801_18@
在这里，我们看到了之前所设置的X,Y轴在AxisOrientation属性上被做了交换设置。而接着的columnSeries对象
也被替换成了BarSeries。这样我们就完成了相应的改造(更多信息参见DEMO源码BarSamplE)。

@H_801_18@ 其它的DEMO只要参照一下上面所说的替换方式替换一下即可，最终我们看一个显示效果，如下图所示：

    好了，今天的内容就先到这里了，源码下载，请点击这里。

    原文链接:http://www.cnblogs.com/daizhj/archive/2009/01/15/1376181.html

@H_801_18@ 作者: daizhj,代震军

@H_801_18@ Tags: silverlight,chart,图表,柱状图,column,Bar,饼图,Pie,折线图,Line,散点图,Scatter

@H_801_18@    网址: http://daizhj.cnblogs.com/

    在微软的Silverlight 开源控件项目: Silverlight Toolkit

大佬总结

以上是大佬教程为你收集整理的使用Silverlight Toolkit绘制图表(上)--柱状图全部内容，希望文章能够帮你解决使用Silverlight Toolkit绘制图表(上)--柱状图所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：silverlight toolkit 使用图图表柱状绘制

上一篇: 使用Silverlight Toolkit绘制图表... 下一篇:Silverlight 2.0学习笔记——RIA...

猜你在找的silverlight相关文章

silverlight – 如何在Windows Phone 7中创建连续动画？ 2022-05-04
wpf – 嵌入图像在UserControl中不显示 2022-05-03
WPF的Deepzoom 2022-05-03
silverlight – 设置ComboBoxItem的文本和值 2022-05-03
wpf – 寻找股票图表组件 2022-05-03
如何在Silverlight中以编程方式转到特定的URL？ 2022-05-03
Silverlight Webservice“远程服务器返回错误：NotFound” 2022-05-03
osx – 无法输入Silverlight 5输入字段(Chrome)MacOS 2022-05-03
客户端WCF DataContract具有来自服务的空/空值 2022-05-03
使用MVVM Light Messenger与Silverlight 4 ChildWindow对话框类 2022-05-03