然后我们使用WCF方式发布数据源信息，这里我们创建一个"Silverlight功能的WCF"，并将其命名为： DataService.svc 接着将下面的代码拷贝到该类文件中：
public class EmployeeInfo
{
int EmployeeID { set ; get ; }
string Employeename { Salary { [] Cost { City { ; }
}
[ServiceContract(namespace = "" )]
[AspNetCompatibilityRequirements(RequirementsMode AspNetCompatibilityRequirementsMode.Allowed)]
DataService
{
[OperationContract]
List < EmployeeInfo > GetEmployeeList()
{
List employeeList new ();
employeeList.Add( EmployeeInfo { EmployeeID 1 , Employeename " 张三 " 1000 合肥 });
employeeList.Add( 2 李四 1500 天津 3 王五 2000 上海 4 赵六 - 800 北京 5 尤七 2100 武汉 6 马八 2300 海口 });
return employeeList;
}
}
这里数据源我们就创建完成了，它将会返回6个雇员信息。
下面我们往该Silverlight应用的Xaml文件上拖（或手工声明）一个Chart控件，如下：
< charting:Chart Title ="员工薪水" x:name ="EmployeeChart" ></ charting:Chart >
我们看到在该控件上我们指定了Title信息，该信息会显示在图表的最上方。
下面开始编写CS代码。
1.首先我们向该Silverlight应用中添加对刚才声明的WCF的引用。
2.使用WCF生成的客户端类来获取相应的数据源，代码如下：
voID LoaDWcfData()
{
dataServiceClIEnt.GetEmployeeListCompleted += EventHandler GetEmployeeListCompletedEventArgs (dataServiceClIEnt_GetEmployeeListCompleted);
dataServiceClIEnt.GetEmployeeListAsync();
}
3.将WCF返回的数据源信息绑定到相应的图形控件上，并初始化该控件的相应信息，如下：
dataServiceClIEnt_GetEmployeeListCompleted( object sender, GetEmployeeListCompletedEventArgs e)
{
ObservableCollection e.Result;
Action Chart chartModifIEr (chart) =>
{
Axis dateAxis Axis { OrIEntation AxisOrIEntation.Horizontal, Title 雇员名称 FontStyles.normal, FontSize 12f, ShowGrIDlines true };
EmployeeChart.Axes.Add(dateAxis);
Axis valueAxis AxisOrIEntation.Vertical,0)">薪水 3000 };
EmployeeChart.Axes.Add(valueAxis);
};
chartModifIEr(EmployeeChart);
ColumnSerIEs serIEs ColumnSerIEs();
serIEs.ItemsSource employeeList;
serIEs.IndependentValueBinding System.windows.Data.Binding( Employeename );
serIEs.DependentValueBinding Salary );
serIEs.Title ;
EmployeeChart.SerIEs.Add(serIEs);
}
在上面的代码中我们创建了Axis对象用以将X,Y轴的描述信息绑定到指定的图形控件上，然后将我们的指定数据源绑定到该图形控件的ItemsSource属性上，最后再绑定两个座标轴要显示的相应数据： X轴: serIEs.IndependentValueBinding = new System.windows.Data.Binding("Employeename");
Y轴: serIEs.DependentValueBinding = new System.windows.Data.Binding("Salary");
下面我们来看一下最终的显示效果，如下图所示：
大家看到，在Y轴上我们既显示了正轴也显示了负轴，这就是通过Minimum = -1000,Maximum = 3000这一行 设置 实现的。
还不错了，到这里我们只是简要的领略了一个图形控件的基本功能。接着我们再了解一下它还有那些更高级的使用技巧。 首先是图形的定时加载刷新，要实现这个演示，我们需要一个实时变化的数据源，以便当我们定时刷新控件时能显示不同的数据信息。所以我们要在WCF中创建一个这样的数据源： [OperationContract]
GetEmployeeDynamicList()
{
Random random Random();
List ();
employeeList.Add( random.Next( 500 ),0)"> });
employeeList.Add( });
employeeList;
}
大家看到，这里使用了Random来模拟一个动态数据源信息，其生成的随机数介于500-3000之间，那么接下来，我们再Silverlight的XAML上创建这样一个Chart对象，用以显示该动态数据源信息，如下：
="动态员工薪水" ="DynamicEmployeeChart" />
接着就是相应的CS代码了，这里为了方便起见，这里直接使用dispatcherTimer来定时(3秒)获取相应的数据源信息，如下：
LoadDynamicdata()
{
System.windows.Threading.dispatcherTimer dispatcherTimer System.windows.Threading.dispatcherTimer();
dispatcherTimer.Interval TimeSpan.FromSeconds( );
dispatcherTimer.Tick delegate
{
dataServiceClIEnt.GetEmployeeDynamicListCompleted GetEmployeeDynamicListCompletedEventArgs (dataServiceClIEnt_GetEmployeeDynamicListCompleted);
dataServiceClIEnt.GetEmployeeDynamicListAsync();
};
dispatcherTimer.Start();
}
接着就是初始化相应的图形控件并绑定相应的数据源了，代码与上面的CS代码相似，如下：
dataServiceClIEnt_GetEmployeeDynamicListCompleted( e.Result;
DynamicEmployeeChart.Axes.Clear();
DynamicEmployeeChart.SerIEs.Clear();
Action };
DynamicEmployeeChart.Axes.Add(dateAxis);
Axis valueAxis 0 };
DynamicEmployeeChart.Axes.Add(valueAxis);
};
chartModifIEr(DynamicEmployeeChart);
ColumnSerIEs serIEs ;
DynamicEmployeeChart.SerIEs.Add(serIEs);
}
好了，这里我们看一下最终的运行效果，首先是刚启动运行时的截图：
然后是三秒之后的运行截图：
到这里还不算完，因为该控件还支持数据的分组显示，比如说如果我们的数据中有数组类型的字段信息，该控件是以数组为单位（数组长度就是图表的列信息）。这个有些难以理解，下面就以一个示例来加以说明。
首先，我们要创建一个具有数组类型字段的数据源，如下： GetMultiSerIEsEmployeeList()
{
List [] { 100 160 } });
employeeList.Add( 260 200 360 330 430 560 530 660 600 } });
employeeList;
}
大家看到了，在该数据源中的Cost属性即是数据类型字段，该字段记录了雇员的交费信息：第一项为“住房公积金”，第二项为“个人养老金”。
下面我们就来看一下该如何绑定这类数据源信息。
首先在XAML中创建该图表控件，如下：
="MultiSerIEs" MouseleftbuttonDown ="OnMouseleftbuttonDown" />
大家看到这里我们还绑定了鼠标单击事件，该事件主要用于稍后演示图表的动态效果，这里先行略过:)
接着就是我们的CS代码了，首先是获取数据源：
LoadMultiSerIEs()
{
dataServiceClIEnt.GetMultiSerIEsEmployeeListCompleted GetMultiSerIEsEmployeeListCompletedEventArgs (dataServiceClIEnt_GetMultiSerIEsEmployeeListCompleted);
dataServiceClIEnt.GetMultiSerIEsEmployeeListAsync();
}
然后是相应的控件初始化和数据绑定代码：
dataServiceClIEnt_GetMultiSerIEsEmployeeListCompleted( e.Result;
Action 注 1:住房公积金 2:个人养老金 14f,0)"> };
MultiSerIEs.Axes.Add(dateAxis);
Axis valueAxis 税金 };
MultiSerIEs.Axes.Add(valueAxis);
};
chartModifIEr(MultiSerIEs);
foreach (EmployeeInfo itemsSource in employeeList)
{
ColumnSerIEs serIEs ColumnSerIEs();
serIEs.ItemsSource itemsSource.Cost;
serIEs.DependentValueBinding null ;
serIEs.IndependentValueBinding ;
serIEs.Title itemsSource.Employeename + ID: itemsSource.EmployeeID;
serIEs.AnimationSequence AnimationSequence.FirstTolast;
MultiSerIEs.SerIEs.Add(serIEs);
}
}
这里我们看到在控件的数据源绑定上与前两个DEMO存在一定的差异。因为每个雇员的交费字段本身就是一个数组（整形），所以这里将该交费字段直接绑定到了ColumnSerIEs的ItemsSource属性上。同时将ColumnSerIEs 的属性 DependentValueBinding，IndependentValueBinding分别设置为null。这里给该ColumnSerIEs的动态显示效果设置成了AnimationSequence.FirstTolast。下面我们会看到显示效果，而相应的鼠标单击事件代码摘自TOOKIT的代码示例包，这里就不多加解释了。下面是相应的显示效果：
当我们在图表上单击鼠标时，显示效果如下：
等图表全被隐去时，这时我们再单击鼠标，图表会依次再显示出来。
除了数据动态加载，Chart还支持数据的静态绑定，如下面的XAML代码即是初始并绑定一个已存在的数据源：
="Xaml绑定" ="FunctionSerIEsSample" >
charting:Chart.SerIEs
charting:ColumnSerIEs
="人口" AnimationSequence ="FirstTolast"
ItemsSource =" {Binding PugetSound, Source={StaticResource City}} "
IndependentValueBinding {Binding name}
DependentValueBinding {Binding Population} " />
</ charting:Chart.Axes charting:Axis AxisType ="category" Title ="城市" OrIEntation ="Horizontal" FontStyle ="Italic" ="linear" ="Vertical" Minimum ="0" Maximum ="600000" Interval ="100000" ShowGrIDlines ="True" FontStyle
而数据源是在程序中直接写死的，如下：
Code
/**//// <summary>
City business object used for charting samples.
</summary>
public class City
{
/**/
Gets or sets the name of the city.
</summary>
int ID { get; set; }
/**/</summary>
string name
/**/ Gets or sets the population of the city.
</summary>
Population
/**/ Initializes a new instance of the City class.
</summary>
City()
{
}
/**/ Returns a string that represents the current object.
</summary>
<returns>A string that represents the current object.</returns>
overrIDe ToString()
{
return name;
}
/**/ Gets a collection of citIEs in the Puget Sound area.
static ObjectCollection PugetSound
{
ObjectCollection pugetSound =new ObjectCollection();
pugetSound.Add( City { name "张庄"3123441 });
pugetSound.Add( City 李庄4112122);
pugetSound.Add( City 赵庄2613913);
pugetSound.Add( City 马家河子5300224);
pugetSound;
}
}
}
到这里，有关柱状图的主要功能介绍的差不多了，但如果开发过相应图表功能的朋友会发现，之前的DEMO显示的都是垂直的柱状图，但很多的网站上显示的都是水平方向的柱状图，比如说投票功能等，其实Chart实现这个功能非常简要，只要在我们原有的CS代码基础上做很少的改动即可实现，这里以上面的第一个DEMO为例，看一下如何进行改造： 下面是其dataServiceClIEnt_GetEmployeeListCompleted方法的改造后的代码：
e.Result;
Action
{
Axis dateAxis };
EmployeeChart.Axes.Add(dateAxis);
Axis valueAxis };
EmployeeChart.Axes.Add(valueAxis);
};
chartModifIEr(EmployeeChart);
barSerIEs serIEs barSerIEs();
serIEs.ItemsSource employeeList;
serIEs.IndependentValueBinding );
serIEs.DependentValueBinding );
EmployeeChart.SerIEs.Add(serIEs);
}
在这里，我们看到了之前所设置的X,Y轴在AxisOrIEntation属性上被做了交换设置。而接着的ColumnSerIEs对象也被替换成了barSerIEs。这样我们就完成了相应的改造(更多信息参见DEMO源码barSample)。 其它的DEMO只要参照一下上面所说的替换方式替换一下即可，最终我们看一个显示效果，如下图所示：
好了，今天的内容就先到这里了，源码下载，请点击这里。
原文链接: [url]http://daizhj.blog.51cto.com/285189/129472[/url] 作者: daizhj,代震军 Tags: silverlight,chart,图表,柱状图,Column,bar,饼图,PIE,折线图,line,散点图,Scatter 网址: [url]http://daizhj.blog.51cto.com/[/url]
在微软的Silverlight 开源控件项目: Silverlight Toolkit 总结
以上是内存溢出为你收集整理的使用Silverlight Toolkit绘制图表(上)--柱状图全部内容，希望文章能够帮你解决使用Silverlight Toolkit绘制图表(上)--柱状图所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）