在Silverlight 2中实现超酷图表

引言

Silverlight对于图形图像处理方面,从1.0时代起就给予了很强大的支持,所以我们可以在Silverlight中实现非常棒的各种统计图表,然而现在有了一些开源的项目,使得这项工作更加的简单。

本文我将介绍一个开源的项目visifire,使用它可以在Silverlight 2中实现超酷的图表。

简单图表

首先我们需要下载Visifire项目Silverlight开发包,在建立完项目后,添加对Visifire.Charts.dll和Visifire.Commons.dll程序集引用,添加命名空间:

TerryLee_0033

创建图表,此处的LayoutRoot是我们放置图表的控件,它可以使Grid、StackPanel或者Canvas等控件。

TerryLee_0035

添加数据,这里为了简单起见随机创建了六组数据,注意我们需要把DataPoint数据添加到DataSeries对象的Children属性中,而不能添加在DataPoints属性上:

TerryLee_0036

添加图表到容器上面:

TerryLee_0037

最后完整的代码如下所示:

TerryLee_0034

现在运行后,可以看到效果如下图所示:

TerryLee_0038

当鼠标放在图表上时,可以显示具体的数值:

TerryLee_0041

去除水印

我们注意到在上面的图形右上角添加了“Powered by Visifire”的水印效果,好在Visifire给我们提供了一个属性,可以隐藏该水印效果:

TerryLee_0039

现在运行后可以看到水印效果已经隐藏:

TerryLee_0040

实现3D效果

除此之外,还可以实现3D效果的图表,通过View3D属性来设置,如下代码所示:

TerryLee_0043

运行后效果如下图所示:

TerryLee_0042

设置图表Theme

在Visifire中,我们还可以为图表设置Theme,内置的有3种Themes,它们默认的动画类型以及颜色集合如下表所示:

TerryLee_0044

设置Theme如下代码所示:

TerryLee_0045

运行后效果如下图所示:
TerryLee_0046

设置动画类型

Visifire还可以指定图标加载时的动画类型,内置了5中动画类型,它们的描述如下所示:

TerryLee_0047

设置动画类型:

TerryLee_0048

这样在加载图表时,可以显示不同的动画。Visifire项目代码还需要进一步完善,很多东西都没有使用枚举,而是用字符串来表示,如上面提到的Theme和AnimationType等。

设置颜色集合

Visifire内置了很多的图标颜色集合,我们可以为最终生成的图表设置颜色,如下代码所示:

TerryLee_0049

最终生成的图表效果如下图所示:

TerryLee_0050

设置图表类型

Visifire中内置了各种图表类型,包括柱状图,饼图等。它提供了ChartTypes枚举:

TerryLee_0051

但是这个枚举似乎并没有什么用,在设置时仍然需要用枚举对应的字符串,并且图表类型的设置实在DataSeries对象上,而不是Chart对象,如下代码所示:

TerryLee_0052

运行后效果如下图所示:

TerryLee_0053 

关于Visifire就简单的介绍这么多,大家可以去查看相关的文档。

相关资源

下载Visifire项目开发包

源代码:http://code.google.com/p/visifire/

SVN地址:http://visifire.googlecode.com/svn/trunk

在线文档:http://www.visifire.com/visifire_charts_documentation.php

总结

本文简单的介绍了使用Visifire项目在Silverlight 2中实现图形报表,希望对大家有所帮助。

示例下载:

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
Tag标签: Silverlight
posted @ 2008-06-21 16:02 TerryLee 阅读(8966) 评论(88)  编辑 收藏 网摘 所属分类: [03]  银光点亮世界

  回复  引用    
#1楼 2008-06-21 16:13 | Movie-123 [未注册用户]
酷!!
  回复  引用    
#2楼 2008-06-21 16:14 | LanYo2 [未注册用户]
MS如此多东西, 还真不懂选择了!
  回复  引用  查看    
#3楼 [楼主]2008-06-21 16:22 | TerryLee      
@Movie-123
是挺酷:)
  回复  引用  查看    
#4楼 [楼主]2008-06-21 16:22 | TerryLee      
@LanYo2
Silverlight前途无量啊,呵呵
  回复  引用    
#5楼 2008-06-21 16:28 | isal [未注册用户]
以后看LZ教程学Silverlight
  回复  引用  查看    
#6楼 2008-06-21 16:33 | Eeyore      
有点像以前用VML实现的图~
  回复  引用  查看    
#7楼 2008-06-21 16:35 | Oran      
看起来应用非常简, SL看来是无可阻挡.
  回复  引用    
#8楼 2008-06-21 16:51 | eee [未注册用户]
lz长的像吴启华,和sl一样帅。
  回复  引用  查看    
#9楼 2008-06-21 17:19 | Indigo Dai      
感觉Silverlight其实并不难,像ASP.NET那样声明式的布局,会了C#,再学这些新技术感觉还是水到渠成的…… 差的就是best practices了。
不过楼主新技术学习的可真快啊,:-)
  回复  引用  查看    
#10楼 2008-06-21 17:24 | alisx      
very good!
  回复  引用  查看    
#11楼 2008-06-21 17:49 | aspnetx      
visifire确实不错,已经用了很长时间,里面封装的也很全,绝对推荐使用.
  回复  引用  查看    
#12楼 2008-06-21 18:31 | 王孟军!      
楼上的也 忒缺D了,呵呵

是不错,
感觉实现起来挺简单的,
比asp.net自带的RDLC好多了,呵呵

  回复  引用  查看    
#13楼 2008-06-21 19:13 | 张波sun      
很酷.
  回复  引用  查看    
#14楼 2008-06-21 20:08 | Meazza-mFrog      
可以给读取自己数据库的数据的DEMO么?
  回复  引用  查看    
#15楼 2008-06-21 20:40 | kkun      
爽歪歪的效果...
  回复  引用  查看    
#16楼 [楼主]2008-06-21 21:28 | TerryLee      
@isal
:)
  回复  引用  查看    
#17楼 [楼主]2008-06-21 21:29 | TerryLee      
@Eeyore
可是这完全是两种不同的东西啊。。。
  回复  引用  查看    
#18楼 [楼主]2008-06-21 21:29 | TerryLee      
@Oran
嗯,的确很不错
  回复  引用  查看    
#19楼 [楼主]2008-06-21 21:29 | TerryLee      
@eee
可不可以只讨论技术,而不要讨论这个话题,谢了!
  回复  引用  查看    
#20楼 [楼主]2008-06-21 21:30 | TerryLee      
@Indigo Dai
使用起来还是有很多值得讨论的话题。。。
  回复  引用  查看    
#21楼 [楼主]2008-06-21 21:31 | TerryLee      
@alisx
:)
  回复  引用  查看    
#22楼 [楼主]2008-06-21 21:31 | TerryLee      
@aspnetx
不过visifire的代码需要进一步改善啊。。。
  回复  引用    
#23楼 2008-06-21 21:32 | 网易 [未注册用户]
怎样卸载silverlight。
  回复  引用  查看    
#24楼 [楼主]2008-06-21 21:32 | TerryLee      
@34324fd
不要讨论这个话题好不好,我还是删除了吧
  回复  引用  查看    
#25楼 [楼主]2008-06-21 21:32 | TerryLee      
@王孟军!
嗯,效果特酷:)
  回复  引用  查看    
#26楼 [楼主]2008-06-21 21:33 | TerryLee      
@张波sun
:)
  回复  引用  查看    
#27楼 [楼主]2008-06-21 21:33 | TerryLee      
@Meazza-mFrog
这个非常简单啊,可以看看我再一步一步学习Silverlight 2系列文章中给出的通过WCF或者Web Service来获取数据,并进行显示。。。
  回复  引用  查看    
#28楼 [楼主]2008-06-21 21:34 | TerryLee      
@kkun
:)
  回复  引用  查看    
#29楼 2008-06-21 22:03 | Q.Lee.lulu      
酷!!
PS:很久没见楼主露面了.
  回复  引用  查看    
#30楼 2008-06-21 22:05 | BAsil      
不错,顶一个
  回复  引用  查看    
#31楼 2008-06-21 22:20 | Ryan Gene      
挺好,不过个人不太看好sl...个人看好flex...
  回复  引用    
#32楼 2008-06-21 22:38 | gakaki [未注册用户]
补完你的帖子
http://www.cnblogs.com/beginor/archive/2008/04/26/1172211.html

http://www.cnblogs.com/aspnetx/archive/2008/04/10/1146793.html









来自javaeye的
10个免费的图表生成代码
http://www.javaeye.com/news/2592

值得注意的是 codeplex有开源项目openflashchart for.net
http://www.codeplex.com/OpenFlashChartLib

这些chart的效果都远远好于过去的owc 网络上的静态图 他们都可以动
可能最大的缺点就是几乎都没有提供导出excel功能 真不明白为啥有些企业需要这个导出excel chart图功能 直接截屏不就好了?!
Open Flash Chart - Open Flash Chart 是一个 Flash 图表组件,很容易安装,提供以下语言的API: PHP, Perl, Python, Java, Ruby on Rails, and .Net 来控制图表。
  回复  引用  查看    
#33楼 2008-06-21 22:42 | Nicholas Yuen      
@Ryan Gene
我最近也在研究as3.......

  回复  引用  查看    
#34楼 [楼主]2008-06-21 23:06 | TerryLee      
@Q.Lee.lulu
我最近一直在露面啊,呵呵:)
  回复  引用  查看    
#35楼 [楼主]2008-06-21 23:07 | TerryLee      
@BAsil
:)
  回复  引用  查看    
#36楼 [楼主]2008-06-21 23:07 | TerryLee      
@Ryan Gene
为什么不看好Silverlight呢?能不能解释一下?
  回复  引用  查看    
#37楼 [楼主]2008-06-21 23:07 | TerryLee      
@gakaki
谢谢:)
  回复  引用  查看    
#38楼 [楼主]2008-06-21 23:08 | TerryLee      
@Nicholas Yuen
:)
  回复  引用  查看    
#39楼 2008-06-21 23:23 | 茄哩啡.NET      
Visifire是免费的么?
  回复  引用  查看    
#40楼 [楼主]2008-06-21 23:41 | TerryLee      
@茄哩啡.NET
免费并开源
  回复  引用  查看    
#41楼 2008-06-22 00:01 | 木野狐(Neil Chen)      
great. 最近正打算用一点 :)
  回复  引用  查看    
#42楼 [楼主]2008-06-22 00:13 | TerryLee      
@木野狐(Neil Chen)
嗯,Silverlight 2 Beta 2可以开始在项目中使用了:)
  回复  引用  查看    
#43楼 2008-06-22 01:12 | Eeyore      
@TerryLee
我说的是图的质感~,sl的确很强大~
  回复  引用    
#44楼 2008-06-22 12:22 | Arvin [未注册用户]
很Cool,而且使用门槛低,Great!
  回复  引用  查看    
#45楼 [楼主]2008-06-22 12:23 | TerryLee      
@Arvin
:)
  回复  引用  查看    
#46楼 2008-06-22 21:48 | aspnetx      
@王孟军!
兄弟,你确定是在说我吗?
  回复  引用  查看    
#47楼 2008-06-22 21:51 | aspnetx      
@gakaki
老哥真厚道啊,呵呵
其实您给的第一个链接,我感觉应该是在博客源里的第一贴,我也是看到那位老哥的推荐才去试用的,后来发现确实很不错.
用托管代码的方式创建图表,是后来在作者的博客中找到的,所以才大概的翻译了过了.
至于它的打印功能,我想更多得借助silverlight自身的打印功能吧,可惜的是,目前好像没听说有这个特性会发布,不知道flash是否支持打印.
  回复  引用    
#48楼 2008-06-23 01:14 | 吉林哥163 [未注册用户]
说一下我不看好SILVERLIGHT的理由,望TERRYLEE指正。
1、本质上讲,是依托一个组件包,增强网络应用客户端的体验,虽然还是通过浏览器这个载体,但其实已失去意义了,只是一个壳。一句话,用智能客户端岂不是更好?
2、不能寄望于各大网络应用的公司将既有WEB应用转移到SL上,他们恨不得越标准化越好,兼容性越强越好,最好是纯HTML,连JAVASCRIPT的区别都没有呢,这样可以一次开发,兼容更多的用户。想想FF用户不能用网银的痛苦吧。
3、搜索引擎如何对待这些“网页”?
  回复  引用    
#49楼 2008-06-23 08:58 | lbx1979 [未注册用户]
这个图表我记得看过协议, 好像是不能商用, 否则收费
  回复  引用    
#50楼 2008-06-23 09:29 | jdxyw2004 [未注册用户]
楼主的silverlight2的系列是不是写完了啊?真希望你再写点啊,写点更有深度的。
  回复  引用  查看    
#51楼 2008-06-23 09:33 | Jason.Wei      
@lbx1979
也许今后回向着免费的方向走
  回复  引用  查看    
#52楼 [楼主]2008-06-23 09:42 | TerryLee      
@aspnetx
不是说你,是另外一个人,被我删除了:)
  回复  引用  查看    
#53楼 [楼主]2008-06-23 09:51 | TerryLee      
@吉林哥163
1.说实话,智能客户端已经接近死亡了。我不觉的依赖于一个很小的组件包有什么问题,为什么说它失去了意义呢?

2.这倒不见的,先不说国外,就国内来说,新浪、腾讯、163等都已经准备使用SL来构造它们的一些应用,如新浪的音乐库。再说,Silverlight本身就是跨浏览器的,不会存在什么兼容性的问题。

3.这一点确实是目前制约Silverlight发展的一个大问题,但是在不远的将来,一定会有所改善。
  回复  引用  查看    
#54楼 [楼主]2008-06-23 09:52 | TerryLee      
@lbx1979
是吗?
  回复  引用  查看    
#55楼 2008-06-23 09:52 | aspnetx      
@吉林哥163
吉林?老乡啊,呵呵
对于您提出的第一点,其实,Flash又怎么样呢?
第一点,关键看微软怎么推这个东西了,从目前在微软工作的朋友反应的情况来看,今年是力推啊.
记得SL对待搜索引擎好像相对flash有一些优势吧,具体是怎么的不记得了.

总之了,个人非常看好wpf以及silverlight,呵呵.
  回复  引用  查看    
#56楼 [楼主]2008-06-23 09:52 | TerryLee      
@jdxyw2004
我最近写的文章不都是Silverlight 2的吗?
  回复  引用    
#57楼 2008-06-23 10:24 | jdxyw2004 [未注册用户]
LZ,问你个问题,为什么我图表显示不出来,再页面上是空白的
  回复  引用  查看    
#58楼 2008-06-23 10:27 | Jason.Wei      
@jdxyw2004
代码贴出来看下.
  回复  引用    
#59楼 2008-06-23 10:31 | jdxyw2004 [未注册用户]
代码就是你在文章中的一模一样……先是VS2008生成一个silverlight的工程,然后再Page.xaml.cs 中的Page()中插入你文中的代码
  回复  引用    
#60楼 2008-06-23 10:46 | 小臧 [未注册用户]
使用时出现
Error 1 The type 'System.Windows.Controls.Canvas' is defined in an assembly that is not referenced. You must add a reference to assembly 'System.Windows, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e'. C:\Documents and Settings\zangqx\My Documents\Visual Studio 2008\Projects\WpfApplication1\WpfApplication1\Window1.xaml.cs 33 13 WpfApplication1
错误? 添加了'System.Windows 又出现程序集的命名空间冲突 是什么原因? 谢谢
  回复  引用  查看    
#61楼 2008-06-23 11:04 | Jason.Wei      
看起来,似乎你选择的.net framework的version是2.0的
...
  回复  引用  查看    
#62楼 [楼主]2008-06-23 11:12 | TerryLee      
确定如下几个问题:

1.你建的是Silverlight项目吗?怎么会有Window1.xaml.cs?

2.确保你安装的是Silverlight 2 Beta 2?出现的错误不是因为该图表,而是你自身的环境好像就有问题。
  回复  引用    
#63楼 2008-06-23 12:06 | 快乐笨笨 [未注册用户]
最近一直研究silverlight怎么去展现多维数据集,如果在能做到钻取,就更牛了。感觉图表控件dundas做的也不错,如果silverlight 能集各家所长,就好了,就不用到处找那么多控件了。本身微软的产品在前端展现这块,也不是很明了,虽然购买了普科,但在web方面仍没有好的产品,希望silverlight能有所作为吧.
  回复  引用  查看    
#64楼 [楼主]2008-06-23 12:47 | TerryLee      
@快乐笨笨
收购了普科之后,感觉在微软也没有多大的发展...
  回复  引用  查看    
#65楼 2008-06-23 13:09 | aspnetx      
@TerryLee
问题是,收购普科后,你要再用的话就得被迫捆绑微软的很多产品,这个最不爽.

@快乐笨笨
对于Cube的展现我也研究好久了,尤其是在WPF框架下.不过现在还是只能局限在图表下面.
  回复  引用    
#66楼 2008-06-23 13:36 | wbixd [未注册用户]
请问下怎么设置他的title的值以及AxisX.Title的值,换了很多方式都说没有实例化
  回复  引用    
#67楼 2008-06-23 13:45 | wbixd [未注册用户]
title的值已经设置成功了,呵呵,你的这个教程真好
  回复  引用  查看    
#68楼 2008-06-23 13:58 | Colin Han      
最后的下载链接在Firefox3下显示不正常。如下:



  回复  引用    
#69楼 2008-06-23 14:05 | 小臧 [未注册用户]
谢谢Jason.Wei和 TerryLee两位大哥 我没装Silverlight 2 for vs2008。
还有SilverlightApplication 与WpfApplication 有什么区别?
在SilverlightApplication 创建的用户控件能在WpfApplication 用吗
  回复  引用  查看    
#70楼 [楼主]2008-06-23 14:31 | TerryLee      
@Colin Han
我这儿没有问题啊
FF2.0:)
  回复  引用  查看    
#71楼 [楼主]2008-06-23 14:34 | TerryLee      
@小臧
Silverlight的开发代码是“WPF/E”,是WPF的一个子集,用来Web开发上,WPF则实在客户端。

一般来说是可以的,微软也在致力于往这方面发展,可以参考一下ScottGu的教程最后一篇。但在Beta 2中,由于加入了Visual State Manager,在WPF并不支持,所以不能确保Silverlight中创建的用户控件可以使用在WPF中。
  回复  引用    
#72楼 2008-06-23 17:31 | 快乐笨笨 [未注册用户]
@TerryLee
微软就这样,看谁好就收谁,当然是那些能收的过来的,然后就放一边不管了。
本身这样对proclarity的发展就不好,估计被微软给软禁了,哈哈。
  回复  引用  查看    
#73楼 2008-06-24 00:32 | ppchen(陈荣林)      
太酷了 :)
Come on Silverlight...
  回复  引用  查看    
#74楼 [楼主]2008-06-24 12:26 | TerryLee      
@ppchen(陈荣林)
:)
  回复  引用    
#75楼 2008-06-24 13:12 | Vivek [未注册用户]
Visifire is really cool. I think from now onwards no body will go to other commercial visualization tools.
  回复  引用    
#76楼 2008-06-24 22:25 | hoverlink [未注册用户]
这个是印度人用c#开发的,写的非常精炼,从1.1就开始用这个了
  回复  引用    
#77楼 2008-06-26 11:19 | 非常好 [未注册用户]
非常好
  回复  引用  查看    
#78楼 2008-06-29 19:18 | Meazza-mFrog      
东西很好呢
请给一个读取自己数据库的例子啊
等待中
  回复  引用  查看    
#79楼 [楼主]2008-06-29 22:34 | TerryLee      
@Meazza-mFrog
能说说自己读取数据库难在什么地方吗?
使用WCF返回结果数据,然后替换到本文生成随机数那段代码就可以了啊:)
  回复  引用    
#80楼 2008-07-16 14:58 | Lori Zuo [未注册用户]
有WPF版本的吗
  回复  引用  查看    
#81楼 [楼主]2008-07-21 10:28 | TerryLee      
@Lori Zuo
你上官方网站看一下吧,好像是有的。
  回复  引用  查看    
#82楼 2008-07-23 21:55 | 老蒋      
so cool
  回复  引用  查看    
#83楼 [楼主]2008-07-23 22:22 | TerryLee      
@老蒋
:)
  回复  引用  查看