概述
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作为数据源。
接来呢,随机产生一下数据:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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前台的代码没什么讲头,自己看吧,我先贴上来。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 >
后台代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{
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属性提示已经过期了,不过喜欢的朋友们仍然可以使用好了,水印只不过是一个链接而已嘛。
出处: http://www.cnblogs.com/yangtongnet/
欢迎加入.NET SoftWare 技术交流群78817973,让我们一起来探讨技术、职场、人生
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利