本文介绍如何使用Visifire图表组件，在Silverlight环境中通过Webservice获取数据并展示多种类型的图表，包括柱状图、饼图等。
概述
Visifire 是一个基于SilverLight的Chart组件，VISIFire 公司提供了 Open Source 的 Silverlight Chart 组件，遵循GPL v3，可以在 ASP, ASP.Net, PHP, JSP, CodeFusion, Ruby on Rails 以及 HTML 中使用。支持的Chart类型挺多的（支持饼图，柱状图，圈图，区图等等）。
但是非常可惜的是，目前Visifire现在已经开始收费了，不过看到它实现的Chart效果，还是不舍得放手。经过我的不懈努力，终于找到了貌似是最后一个免费版本的Visifire v3.0，现在官网上已经下载不了了，之前也有一些人研究过这类的东西，不过材料并不是很详细，这里我利用闲的蛋疼的时间，把我研究的成果贴出来。
本实例是基于Siverlight 3.0的，开发工具VS2010，主要展现的内容是，Siverlight结合Visifire+Webservice展现的Chart。
创建Webservice
我们首先确定一下Chart的数据源，这里利用的Webservice返回XML作为数据源。
接来呢，随机产生一下数据：
代码
2 {
3
4 [WebMethod]
5 public string mapData()
6 {
7 List < string > list = new List < string > ();
8 list.Add( " 上海 " );
9 list.Add( " 北京 " );
10 list.Add( " 深圳 " );
11 list.Add( " 广东 " );
12 list.Add( " 天津 " );
13 list.Add( " 南京 " );
14 list.Add( " 广东 " );
15 list.Add( " 重庆 " );
16 list.Add( " 香港 " );
17 DataSet ds = new DataSet();
18 DataTable dt = ds.Tables.Add( " table " );
19
20 dt.Columns.Add( " City " , typeof ( object ));
21 dt.Columns.Add( " Data " , typeof ( object ));
22
23 Random rd = new Random();
24 for ( int i = 0 ; i < list.Count; i ++ )
25 {
26 DataRow dr = dt.NewRow();
27 dr[ " City " ] = list[i];
28 dr[ " Data " ] = rd.Next( 10000 , 99999 );
29 dt.Rows.Add(dr);
30 }
31 return ds.GetXml();
32 }
33 }
注意：默认的情况下Datatable是不能被序列化的，而Dataset可以，而且Siverlight中不支持Dataset，因为不包含System.Data的命名空间，这里我们返回的是XML类型的数据。
下面我们要在SiverLight项目中添加Webservice的引用。
创建Chart
OK，别忘记添加SLVisifire.Charts.dll的引用。点击这里下载visifire_v3.0.zip。
Siverlight前台的代码没什么讲头，自己看吧，我先贴上来。
代码
2 xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 mc:Ignorable ="d"
7 d:DesignHeight ="500" d:DesignWidth ="500" >
8 < UserControl.Resources >
9 < Style x:Key ="ChartStyle" TargetType ="my:Chart" >
10 < Setter Property ="Background" >
11 < Setter.Value >
12 < LinearGradientBrush EndPoint ="0.5,1" StartPoint ="0.5,0" >
13 < GradientStop Color ="Gray" Offset ="0" />
14 < GradientStop Color ="White" Offset =".5" />
15 < GradientStop Color ="#FFB2ADAD" Offset ="1" />
16 </ LinearGradientBrush >
17 </ Setter.Value >
18 </ Setter >
19 < Setter Property ="Padding" Value ="10" />
20 </ Style >
21 < Style x:Key ="TitleStyle" TargetType ="my:Title" >
22 < Setter Property ="FontSize" Value ="18" />
23 < Setter Property ="FontColor" Value ="LightGray" />
24 </ Style >
25 </ UserControl.Resources >
26 < Grid x:Name ="LayoutRoot" Background ="Black" >
27 < Grid.RowDefinitions >
28 < RowDefinition Height ="25" />
29 < RowDefinition Height ="300" />
30 </ Grid.RowDefinitions >
31 < StackPanel Grid.Row ="0" Orientation ="Horizontal" >
32 < Button Content ="柱状图" Height ="23" Name ="button1" Width ="75" Click ="button1_Click" />
33 < Button Content ="饼图" Height ="23" Width ="75" Click ="Button_Click" />
34 < Button Content ="曲线图" Height ="23" Name ="button2" Width ="75" Click ="button2_Click" />
35 < Button Content ="StackedBar" Height ="23" Name ="button3" Width ="75" Click ="button3_Click" />
36 < Button Content ="SectionFunnel" Height ="23" Name ="button4" Width ="107" Click ="button4_Click" />
37 </ StackPanel >
38 < my:Chart Name ="chartTest" Grid.Row ="1" Theme ="Theme1" Style =" {StaticResource ChartStyle} " Width ="450" Height ="300" HorizontalAlignment ="Left" >
39 < my:Chart.Titles >
40 < my:Title Text ="Visifire Sample with Styling" Style =" {StaticResource TitleStyle} " />
41 </ my:Chart.Titles >
42 </ my:Chart >
43 </ Grid >
44 </ UserControl >
后台代码：
代码
{
private List < DataClass > listData = new List < DataClass > ();
public MainPage()
{
InitializeComponent();
getData();
}
void getData()
{
SilverlightApp.ServiceData.myServiceSoapClient service = new ServiceData.myServiceSoapClient();
service.mapDataAsync();
service.mapDataCompleted += new EventHandler < ServiceData.mapDataCompletedEventArgs > (service_mapDataCompleted);
}
// 图表
public void ChartInit(RenderAs ra)
{
DataSeries dataseries = new DataSeries();
// 图表样式
dataseries.RenderAs = ra;
DataPoint dp;
for ( int i = 0 ; i < listData.Count(); i ++ )
{
dp = new DataPoint();
dp.YValue = listData[i].Data;
dp.AxisXLabel = listData[i].City;
dataseries.DataPoints.Add(dp);
}
chartTest.View3D = true ;
chartTest.Series.Add(dataseries);
}
void service_mapDataCompleted( object sender, SilverlightApp.ServiceData.mapDataCompletedEventArgs e)
{
if (e.Error == null )
{
displayData(e.Result.ToString(), RenderAs.StackedColumn);
}
else
{
System.Windows.Browser.HtmlPage.Window.Alert( " Faile! " );
}
}
private void displayData( string xmlContent,RenderAs ra)
{
try
{
if (xmlContent != string .Empty)
{
XElement xmldoc = XElement.Parse(xmlContent);
var query = from q in xmldoc.Descendants( " table " )
select new
{
Data = Convert.ToInt32
(q.Element( " Data " ).Value),
City = ( string )
q.Element( " City " ).Value
};
foreach (var q in query)
{
DataClass model = new DataClass();
model.City = q.City;
model.Data = q.Data;
listData.Add(model);
}
}
ChartInit(ra);
}
catch (Exception ex)
{
throw ex;
}
}
// Data Entity
public class DataClass
{
public string City { get ; set ; }
public int Data { get ; set ; }
}
}
效果展示
代码都贴完了，上面的代码嘛也都是基本的东西，童鞋们有兴趣的自己看看吧，李会军前辈的博客（http://www.cnblogs.com/Terrylee/）有详细的说明，感兴趣的童鞋们可以去看看吧，我嘛就不讲了，下面上图。
1：柱状图
2：曲线图
3：StackedBar
4：饼图
5：Doughnut
6：Bubble
7：SectionFunnel
8：StackedArea
综述
效果图就贴这些吧，这些只是比较常用的一部分而已，当然如果觉得样式不好，可以更改的，只是可惜的是Visifire现在已经收费了，不过毕竟曾经Open Source过。这个版本还是可以正常使用的，但是右上角的水印去不掉的，Watermark属性提示已经过期了，不过喜欢的朋友们仍然可以使用好了，水印只不过是一个链接而已嘛。
扫一扫
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
