&&&&WPF WPFToolkit Chart 线性图表例子
&WPF WPFToolkit Chart 线性图表例子
先看效果吧，基本上其他类型的图表可以举一反三。
http://blog.csdn.net/sliphades/article/details/7314127
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
开发技术下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
WPF WPFToolkit Chart 线性图表例子
所需积分：10
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
WPF WPFToolkit Chart 线性图表例子
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员C#&Chart控件，chart、Series、ChartArea曲线图绘制的重要属性
原文有备份，如有错误和需要改进的地方，请不吝指正<img STYLE="WiDTH: 22 HeiGHT: 22px" src="/blog7style/images/common/sg_trans.gif" real_src ="/uc/myshow/blog/misc/gif/E___6742EN00SIGG.gif" TYPE="face"
ALT="C#&Chart控件，chart、Series、ChartArea曲线图绘制的重要属性"
TITLE="C#&Chart控件，chart、Series、ChartArea曲线图绘制的重要属性" /><img src="/blog7style/images/common/sg_trans.gif" real_src ="/uc/myshow/blog/misc/gif/E___6742EN00SIGG.gif" TYPE="face"
ALT="C#&Chart控件，chart、Series、ChartArea曲线图绘制的重要属性"
TITLE="C#&Chart控件，chart、Series、ChartArea曲线图绘制的重要属性" />会继续修改的
8个月没写博客了-
-，一来是有不想继续干开发的想法，二来是赖的写，三来还是不想总结。所以为了继续坚持自己的开发和总结的信念，总结一下C#
chart控件的一些基本属性，由于属性太多了，一时半会儿写不完，以后继续补充，这里总结重要的常用的属性
为避免耽误不喜欢这种曲线图效果的亲们的时间，先看一下小DEMO效果图：
先简单说一下，从图中可以看到一个chart可以绘制多个ChartArea，每个ChartArea都可以绘制多条Series。ChartArea就是就是绘图区域，可以有多个ChartArea叠加在一起，series是画在ChartAarea上的，Series英文意思是“序列、连续”，其实就是数据线，它可以是曲线、点、柱形、条形、饼图...可以注意该chart当数据非常多的时候可以通过鼠标选择查看区域，进一步拖拽横纵向滚动条来缩小曲线图查看。
代码中的Chart控件的命名是chartData，数据源是dt，由于chart属性太多，不好一一解释，所以请仔细看截图，尤其重视本例用到的属性
一、数据源：
数据返回方式是DataSet.Tables[0],即DataTable，也是最基本的数据源方式。这里只介绍DataTable绑定数据源，很简单：
&&&&&&&&&&&&&&&&chartData.DataSource
&&&&&&&&&&&&&&&
chartData.DataBind();
二、Series：
Series是画在ChartArea上的线、点、柱形、条形、饼图，简单点儿说就是画在上面的数据，直接说属性，
“标记”：就是数据点，某个数据值的点。如下图所示：
&&&&&&&&&&&&&&&MarkerBorderColor&&&
数据点边框的颜色
&&&&&&&&&&&&&&
MarkerBorderWidth&&&
数据点边框的宽度
&&&&&&&&&&&&&&&MarkColor&&&&&&&&&&&
数据点的颜色
&&&&&&&&&&&&&&&MakerSize&&&&&&&&&&&
数据点的大小，默认值为0数据点不存在，建议代码控制
&&&&&&&&&&&&&&
MarkerStep&&&&&&&&&&
数据点显示的频率
&&&&&&&&&&&&&&
MarkerStyle&&&&&&&&&
数据点的样式，可以是方块、圆圈、三角、叉子....
&&&&&&&&&&&&&&&
“标签”：就是现在是在数据点旁边数据值&&&&&&&&
&&&&&&&&&&&&IsValueShownAsLabel&&&&&&&&&&&&&&&&&&&&数据值是否显示，建议代码控制
&&&&&&&&&&&&SmartLabelStyle&&&&&&&&&&&&&&&&&&&&&&&&数据值样式
&&&&&&&&&&&
SmartLabelStyle.Enabled&&&&&&&&&&&&&&&
直接控制可用不可用，建议不可用
&&&&&&&&&&&&SmartLabelStyle.AllowOutsidePloArea&&&&数据值显示是否允许在外面
&&&&&&&&&&&
其他属性自己试吧
注意：如果要使用SmartLabelStyle的话，所有的数据点的值都会自动找位置显示出来，如果某一个区域数据点较多，就会直线指示；如果不用的话，数据点的值会在数据点旁边显示，不会有直线。如下图所示也可以看到AllowOutsidePlotArea的区别：
3. “Font”：数据标签上的字体和样式
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&
Font&&&&&&&&&&&&&&&&&&&&&
标签字体设置
&&&&&&&&&&&&&&&&&&&&
Font.Unit&&&&&&&&&&&&&&&&
个人设置此值为Document，自己体会
&&&&&&&&&&&&&&&&&&&&
LabelAngle&&&&&&&&&&&&&&&
标签角度，斜多少度，建议就正着
&&&&&&&&&&&&&&&&&&&&
LabelBackColor&&&&&&&&&&&
标签背景颜色
&&&&&&&&&&&&&&&&&&&&
LabelBorderColor&&&&&&&&&
标签边框颜色
&&&&&&&&&&&&&&&&&&&&
LabelBorderDahStyle&&&&&&
标签边框样式
&&&&&&&&&&&&&&&&&&&&
LabelBorderWidth&&&&&&&&&
标签边框宽度
&&&&&&&&&&&&&&&&&&&&
LabelForeColor&&&&&&&&&&&
标签字体颜色
&&&&&&&&&&&&&&&&&&&&
其他属性自己试
&&&&&&&&&&&&&&&&
真好看<img src="/blog7style/images/common/sg_trans.gif" real_src ="/uc/myshow/blog/misc/gif/E___6725EN00SIGG.gif" TYPE="face"
ALT="C#&Chart控件，chart、Series、ChartArea曲线图绘制的重要属性"
TITLE="C#&Chart控件，chart、Series、ChartArea曲线图绘制的重要属性" />数据多的时候本来显示就乱拉，这样更是画蛇添足，建议透明，正常点的颜色就好
空白点：就是连续的数据，譬如X轴对应Y轴没数据，或Y轴对应X轴没数据，这样的数据点可以对其设置相应的属性，属性大多都是上面说过的，自己试一下即可
&&&&&&&&&&&&&&
4.&数据：其实就是就是serie的名字和值类型
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&
Name&&&&&&&&&&&&&&&&&
就是唯一的名字
&&&&&&&&&&&&&&&&&&&&&&&&&&
XvalueType&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&
YValuesPerPoint&&&&&&
数据点的Y值数目
&&&&&&&&&&&&&&&&&&&&&&&&&&
YValueType&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&
其他属性自己试
默认不用设置就好，主要是X轴和Y轴值类型设置的是Auto，也就是根据X轴上的值和Y轴上的值的类型自动匹配，当然手动设置的话不设错就行了。
&&&&&&&&&&&&&&&&&&&&&&&&&&
5. 数据源：注意这里是Series的数据源
&&&&&&&&&&&
&&& 注意：
第一，这两个属性对应的是DataTable的两个列，也就是一般的X轴对应时间，Y轴对应数据值，但是也要注意对DataTable的每个数据单元的值做判断，尤其是DBNull或空。我这里的数据库的NewDateTime列数据类型是DateTime类型，NewFyj是Double类型。
&&&&第二，Series的数据源和Chart控件的数据源有区别，只有DataTable先绑定了Chart，Series才对应到列，否则无法对应。
第三，假如用户需要先查看所有数据，然后取消某几条进行数据对比，但是不需要重新查询数据，推荐赋值string.Empty实现，如下图:
&&&&&&&&&&&&&&&&&&&&
图表：也就是Serie画在哪个ChartArea上，ChartType是Serie的图表类型，也就是画何种图，曲线图、直线图、点、柱状图、饼图等...
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&
图例：也就是每个Serie的名字和样式，只要创建Serie就会自动产生加载在Legend里，里面的属性可以试一下，如果想调整Legend的位置，可以去Legend集合里设置，比较简单，这里不多说
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&
9. 映射区：鼠标放在数据点上出现的小提示，建议用代码控制
&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&
EmptyPointValue&&&&&&&&&
空数据点的值做平均还是做零处理
&&&&&&&&&&&&&&&&&&&&&&&&&
LabelStyle&&&&&&&&&&&&&&
对标签硬性的规定显示在数据点旁的哪个位置
轴：也就是X轴和Y轴，X轴有主轴和副轴，Y轴也有主轴和副轴，主轴为Primary，副轴为Secondary。X主轴在下方，Y主轴在右方，X副轴在上方，Y副轴在右方。
&&&&&&&&&&&&&&&&&&&&&&&&
三、ChartAreas：
Chart控件里最重要的，每个Serie都画在ChartArea上，Chart控件可以有多个ChartArea叠加在一起显示。比如第一个ChartArea绘制的是曲线，第二个画的柱状图或者是什么什么，这也是上面说过的Serie的ChartType，我们也可以把多个Serie画在一个ChartArea上，但是如果有一个列数据单位范围在500~10000之间的数据浮动最大，有一列数据单位范围在0.1~2.0之间，有一列数据单位范围在50~100之间，那画在同一个ChartArea上显示的话，0.1到2.0的数据会变成一条直线。当只有1、2条这样的数据时，可以在Serie中设置主轴和副轴，但当出现多条数据，多种类型的显示，就需要多个ChartArea来解决了。由于属性太多了，捡重点属性介绍，其他的属性自己试一下
1. 对齐：ChartArea对齐方式
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&AlignmentOrientation&&&&&&&&&&&
水平对齐、垂直对齐、全部对齐
&&&&&&&&&&&&&&&&&&&
AlignmentStyle&&&&&&&&&&&&&&&&&
根据哪种方式对齐
&&&&&&&&&&&&&&&&&&&&AlignmentWithChartArea&&&&&&&&&&和哪个对齐
老实说，没啥用，可以设置Position，一会儿在外观里会说到
2. 三维：自己试试，效果很沉重，不是很好
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
3. 外观：可以对ChartArea颜色、边框、位置的设置
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&
BackColor&&&&&&&&&&&&&&&&&&&&&&
ChartArea的背景颜色
&&&&&&&&&&&&&&&&&&&&&&&
BackGradientStyle&&&&&&&&&&&&&&
背景颜色的渐变方式
&&&&&&&&&&&&&&&&&&&&&&&&BackHatchStyle&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&
BackImage&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&
BackImageAlignment&&&&&&&&&&&&&
图片显示位置
&&&&&&&&&&&&&&&&&&&&&&&
BackImageTransparentColor&&&&&&
绘制图像时显示的颜色
&&&&&&&&&&&&&&&&&&&&&&&
BackImageWrapMode&&&&&&&&&&&&&&
包装模式&&
&&&&&&&&&&&&&&&&&&&&&&&
BackSecondaryColor&&&&&&&&&&&&&
ChartArea的第二背景颜色，搭配渐变用的
&&&&&&&&&&&&&&&&&&&&&&&
BorderColor&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&
BorderDashStyle&&&&&&&&&&&&&&&&
边框线的样式
&&&&&&&&&&&&&&&&&&&&&&&
BorderWidth&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&
ShadowColor&&&&&&&&&&&&&&&&&&&&
整个图标的背影颜色
&&&&&&&&&&&&&&&&&&&&&&&
ShadowOffset&&&&&&&&&&&&&&&&&&&
背影偏移量
第一，InnerPlotPosition和Position一个是大的，一个是内部绘制的，试一下就明白了，这里最重要的是多个ChartArea重叠在一起的时候，两个Position一定要设置相同，否则就重叠不上了。
&&&&第二，多个ChartArea重叠在一起的时候，颜色或图片只能在叠在最底下的ChartArea来设置，上面的ChartArea都设置为透明即可，最底下的ChartArea是ChartAreas[0]，所以不要设置错。
游标：CursorX和CursorY，就是横向和纵向滚动条
&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&CursorX.AutoScroll&&&&&&&&&&&&&&&&&
滚动条自动滚动
&&&&&&&&&&&&&&&&&&&&&&&CursorX.AxisType&&&&&&&&&&&&&&&&&&&
游标作用在主轴还是副轴
&&&&&&&&&&&&&&&&&&&&&&&CursorX.Interval&&&&&&&&&&&&&&&&&&&
游标偏移的间隔
&&&&&&&&&&&&&&&&&&&&&&&CursorX.IntervalOffset&&&&&&&&&&&&&
游标间隔偏移量
&&&&&&&&&&&&&&&&&&&&&&&CursorX.IntervalOffsetType&&&&&&&&&
游标间隔的单位，建议Auto
&&&&&&&&&&&&&&&&&&&&&&&CursorX.Type&&&&&&&&&&&&&&&&&&&&&&&
游标间隔偏移量的单位，建议Auto
&&&&&&&&&&&&&&&&&&&&&&&CursorX.IsUserEnabled&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&CursorX.IsUserSelectedEnabled&&&&&&
启用游标选择区域
&&&&&&&&&&&&&&&&&&&&&&
CursorX.LineColor&&&&&&&&&&&&&&&&&&
游标线颜色
&&&&&&&&&&&&&&&&&&&&&&
CursorX.LineDashStyle&&&&&&&&&&&&&&&游标线样式
&&&&&&&&&&&&&&&&&&&&&&&CursorX.LineWidth&&&&&&&&&&&&&&&&&&
游标线的宽度
&&&&&&&&&&&&&&&&&&&&&&
CursorX.SelectionColor&&&&&&&&&&&&&
游标选择区域的颜色
&&&&&&&&&&&&&&&&&&&&&&
CursorY相同，其他属性自己试
首先强调一下，只要想选择区域细看曲线图，就一定要启用游标，游标的设置只能在叠加在最上面的ChartArea进行设置，也就是ChartArea[ChartArea.Count-1]，。列了这么多属性看一下图更直观：
X轴和Y轴上有游标，可以拖动，可以注意看有个按钮上面有个圆圈，就是向后退，图中的蓝色矩形方块就是用户选择的区域，松开鼠标就会变成该区域的图形。
5. 杂项：Name，没啥好说的
&&&&&&&&&&&&&&&&&&&&&&
6. 轴Axes！！：非常重要，一个ChartArea有4个轴：主轴X
axis、主轴Y（Value）axis、副轴X
axis、副轴Y（Value）axis，每个轴属性均相同，只说一个一个轴
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&IsLabelAutoFit&&&&&&&&&&&&&&&&&
轴上的标签自动调整
&&&&&&&&&&&&&&&&&&&&&&
&LabelAutoFitMaxFontSize&&&&&&&&
轴上标签自适应字体大号
&&&&&&&&&&&&&&&&&&&&&&&&LabelAutoFitMaxFontSize&&&&&&&&
轴上标签自适应字体小号
&&&&&&&&&&&&&&&&&&&&&&
&LabelStyle.Angle&&&&&&&&&&&&&&&&标签显示角度
&&&&&&&&&&&&&&&&&&&&&&
&LabelStyle.IsEndLabelVisible&&&&最后一个标签是否显示&&&&&
&&&&&&&&&&&&&&&&&&&&&&
&其他属性自己试
&&&&我的Interval这里设置都是NotSet，没有设置Auto，为什么，自己试就明白了。
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&TextOrientation&&&&&&&&&&&&
轴的标题方向
&&&&&&&&&&&&&&&&&&&&&&&
Title&&&&&&&&&&&&&&&&&&&&&&
轴的名字，X轴是时间轴，Title就是时间
&&&&&&&&&&&&&&&&&&&&&&&
其他属性自己试，简单
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&IntervalAutoMode&&&&&&&&&&&&
间隔是固定值还是随着轴变化，自己试
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&ScaleView&&&&&&&&&&&&&&&&&&&&&
数据视图，就是当前绘制展开的图！重要！
&&&&&&&&&&&&&&&&&&&&&
MinSizeType&&&&&&&&&&&&&&&&&&&
游标滚动类型
&&&&&&&&&&&&&&&&&&&&&
ScrollBar&&&&&&&&&&&&&&&&&&&&&&滚动条
ScaleView是数据视图，也就是当前绘制出图表的一个区域，如果用鼠标选择某个区域展开显示，新展开的就又是一个ScaleView，只把它想成当前显示的视图就好理解了。
ScrollBar就是游标，之前我们说的ChartArea.CursorX或Y是也是游标，这里的ScrollBar是滚动条，仔细看两者的属性不难发现，一个是选择区域，一个是拖拽滚动条查看所有数据。
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&
这些属性都不是重点，自己试试吧，就是外观设计
&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&不多说了，需要网格的在这里设置就行，感觉设置完了很丑，不过各花入个眼，如下图，还不错哈
&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&别忘了，咱们还停留在ChartArea.Axis里呢，这仅是一个轴，有需要的别忘了设置其他的轴哦<img src="/blog7style/images/common/sg_trans.gif" real_src ="/uc/myshow/blog/misc/gif/E___6722EN00SIGG.gif" TYPE="face"
ALT="C#&Chart控件，chart、Series、ChartArea曲线图绘制的重要属性"
TITLE="C#&Chart控件，chart、Series、ChartArea曲线图绘制的重要属性" />
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
第一章 ASP.NET 教程 （基础）
第二章 ASP.NET 教程（高级）13:17 提问
100个chart控件实时绘图时，单击单个chart控件显示每个chart控件的放大曲线时总是滞后
我有100个chart控件组成的数据采集界面，一段时间要对这100个单独的chart控件进行数据绘图，单独点击某一个chart控件还能看到每一个chart控件的放大曲线图，遇到的问题就是：恰好在对100个chart控件同时进行绘图时，此时单击任何一个chart控件都会卡住，只到100个chart的绘图过程结束，单个chart的放大界面曲线才能看到，有什么办法能让这两个过程互不影响吗？线程也试了，单个放大曲线界面还是要优先的，希望点击单个chart控件时就能弹出，不需要等待后台100个绘图结束，希望可以得到大师的指点。
按赞数排序
请问这个是VB的chart吗?
chart那么大的对象，一起现实肯定会卡。建议在每个chart显示的时候才绘制，其他的就停在那里别画了，或者后台线程画
像你这种特殊需求，完全应该自己设计一个chart控件，并且你设计的控件应该一个控件内直接绘制所有的图表，而不是放100个控件。每个控件相当于一个窗口，有自己的消息，这个开销是很大的。
自己设计控件，可以针对你的特殊需求做出优化，比如只绘制可见的客户区，不需要像通用控件那样拥有很多属性和判断，因为你绘制的图表是特定外观的。
可以更直接地优化绘图的逻辑。同时，因为你所有的东西都是windowless的，所以可以减少极大的系统开销。
240关注|837收录
1358关注|1280收录
2607关注|145收录
其他相似问题> 使用WPF toolkit--Charts使你的数据展现更加形象
使用WPF toolkit--Charts使你的数据展现更加形象
今天在wooboo上看我们移动广告的收入情况时，发现上面的那个图表挺好看的，这个图表是用flex做的，查了下还挺有名，叫fusionchart，有免费版本和收费版本。
（flex上有名的fusion chart）
虽然.net没有提供线程的wpf/silverlight图表控件，但是在wpf/silverlight toolkit中包含了常用实用控件：AreaSeries，PieSeries，LineSeries，BarSeries，BubbleSeries，ColumnSeries，ScatterSeries。
实战toolkit-charts
为了展示toolkit-charts的使用，我们来建立一个wpf项目。
首先加入程序集引用：System.Windows.Controls.DataVisualization.Toolkit然后再xaml中加入命名空间
xmlns:chart=&clr-namespace:System.Windows.Controls.DataVisualization.Cassembly=System.Windows.Controls.DataVisualization.Toolkit&
这样我们就可以在toolkit中使用这些控件。
&chart:Chart Background=&#FF673EFF& TitleStyle=&{DynamicResource TitleStyle2}& Style=&{DynamicResource ChartStyle2}&&&&&&&&&&&&&&&&& &chart:AreaSeries Title=&AreaSeries& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ItemsSource=&{Binding Path=ChartData}&&&&&&&&&&&&&&&&&&&& IndependentValueBinding=&{Binding Left}&&&&&&&&&&&&&&&&&&&& DependentValueBinding=&{Binding Right}& Style=&{DynamicResource AreaSeriesStyle1}&/&&&&&&&&&&&& &/chart:Chart&
ItemsSource的数据就是areaseries对应的数据。
IndependentValueBinding和DependentValueBinding分别对应每个节点数据的名称和数据值。
这属性绑定到的目标名称会通过反射得到相应对象的字段（Left和Right分别对应我自定义类型Tuple&T1,T2&中的Left和Right属性）
然后我们建立这个视图的viewmodel，采用标准的MVVM结构：
ChartsViewModelpublic&class&ChartsViewModel&&&&{&&&&&&&&private&static&readonly&Random&seed&=&new&Random();&&&&&&&&public&ObservableCollection&Tuple&string,&double&&&ChartData&&&&&&&&{&&&&&&&&&&&&get;&&&&&&&&&&&&private&set;&&&&&&&&}&&&&&&&&public&ChartsViewModel()&&&&&&&&{&&&&&&&&&&&&ChangeDataCommand&=&new&RelayCommand((o)&=&&changeData());&&&&&&&&&&&&ChartData&=&new&ObservableCollection&Tuple&string,&double&&();&&&&&&&&}&&&&&&&&public&ICommand&ChangeDataCommand&&&&&&&&{&&&&&&&&&&&&get;&&&&&&&&&&&&private&set;&&&&&&&&}&&&&&&&&private&void&changeData()&&&&&&&&{&&&&&&&&&&&&ChartData.Add(new&Tuple&string,&double&(&A&&+&seed.NextDouble(),&<span style="color: #.5&+&seed.Next(<span style="color: #)));&&&&&&&&}&&&&}&
RelayCommand是一个ICommand的实现，比较简单，代码如下：
RelayCommandpublic&class&RelayCommand&:&ICommand&&&&{&&&&&&&&private&Action&object&&_&&&&&&&&private&Predicate&object&&_&&&&&&&&public&RelayCommand(Action&object&&execute)&&&&&&&&&&&&:&this(execute,&null)&&&&&&&&{&&&&&&&&&}&&&&&&&&public&RelayCommand(Action&object&&execute,&Predicate&object&&predicate)&&&&&&&&{&&&&&&&&&&&&_execute&=&&&&&&&&&&&&&_predicate&=&&&&&&&&&}&&&&&&&&public&bool&CanExecute(object&parameter)&&&&&&&&{&&&&&&&&&&&&if&(_predicate&==&null)&&&&&&&&&&&&&&&&return&true;&&&&&&&&&&&&return&_predicate(parameter);&&&&&&&&}&&&&&&&&&public&event&EventHandler&CanExecuteC&&&&&&&&&public&void&Execute(object&parameter)&&&&&&&&{&&&&&&&&&&&&_execute(parameter);&&&&&&&&}&&&&}&
这样我们就将View中的data和command绑定到ViewModel中。
为了更加形象的展示数据的联动效果，再加上一个button，绑定其命令到ViewModel，在触发命令的时候改变图表对应的数据。
private void changeData()&&&&&&& {&&&&&&&&&&& ChartData.Add(new Tuple&string, double&(&A& + seed.NextDouble(), 1.5 + seed.Next(10)));&&&&&&& }
在app.xaml中加入viewmodel作为资源：
&Application.Resources&
&&&&&&& &ResourceDictionary&
&&&&&&&&&&& &vm:ChartsViewModel x:Key=&chartViewModel& /&
&&&&&&& &/ResourceDictionary&
&&& &/Application.Resources&
运行效果如下：
不过toolkit自带的图表控件还不像fusionchart的效果那么生动，功能相比也有些欠缺。这里介绍另一个wpf/silverlight的图表控件：，上的一个开源项目（不过有收费版本，viisifir比较特殊，它是Dual License的- Open Source & Commercial），具备2D、3D的wpf/silverlight/windows phone图表控件，可以说比toolkit-chart和fusion要强大的多，关于visifire的使用，我会找时间在后期进行讲解。
本文地址 ：
------分隔线----------------------------