ASP.NET中使用Fusion Charts(Access+SQL)图表工具

最近公司的一个项目要用到报表,在网上搜索了一下,发现fusioncharts最炫,最好看。后来就用了它,在使用的过程中,发现连接SQL数据库的时候,有些问题一直解决不了,后来到了IT168才找到这么一篇文章,供大家参考参考:

ASP.NET中使用Fusion Charts图表工具

2011年08月02日00:05 it168网站原创 作者:廖煜嵘 编译 编辑: 胡铭娅 评论: 2

  【IT168 技术】现在,用户对能看到直观形象的图表的要求是越来越高了,这对于ASP.NET开发者来说,需要一款很好的图表展示工具。而FusionCharts则是目前一款十分优秀的图表展示工具,它能用很少的代码量完成很好的效果,而且很容易跟各类语言整合。在本文中,将一步步指导读者如何使用Fusion Charts及asp.net去开发图表应用,其中给出了三种结合使用的场景,其中第一种情景是使用XML文件作数据源,第二种是使用用户输入数据的方式,第三种方式是使用连接ACCESS数据库读取图表所需的数据。读者在阅读完本文后,应该能掌握如何在ASP.NET中轻松地使用Fusion Charts图表工具。

  准备工作

  为了使用Fusion Charts,先到Fusion Chart的网站下载试用版本(www.fusioncharts.com),目前最新版本是3.0。下载解压后,会看到有许多相关的很好的应用例子作参考。由于本文是使用asp.net进行学习,因此我们只关心在code/cs目录下的一个FusionCharts.DLL,因为我们将要使用这个DLL文件来加载相关的Fusion Chart功能。同时,本文使用的是Visual Studio 2010这个工具,同时本文要求读者已掌握基本的Visual Studio 2010及asp.net的基本知识。

  第一种使用方法:使用XML作为图表数据源

  下面介绍第一种使用Fusion Charts的方法,就是使用XML作为图表数据源。步骤如下:

  1) 启动Visual Studio 2010。

  2) 在File菜单中,选择新建立一个空白的网站,并且选择c#作为构建语言在项目网站建立后,再在这个项目中新建立一个XML文件,如下:

 
< chart caption = ' Indian Premier League Points ' xAxisName = ' Teams ' yAxisName = ' Points '    showValues = ' 0 ' formatNumberScale = ' 0 ' showBorder = ' 0 ' >    < set label = ' Mumbai Indians ' value = ' 16 ' />    < set label = ' Chennai Super Kings ' value = ' 14 ' />    < set label = ' Kolkata Riders ' value = ' 12 ' />    < set label = ' Bangalore Royals ' value = ' 14 ' />    < set label = ' Kochi Tuskers ' value = ' 10 ' />    < set label = ' Kings XI Punjab ' value = ' 10 ' /> </ chart >

  在这个XML文件中,指定了图表的X轴及Y轴的名称,分别是Teams和Points,并且用set label的标签方法分别指定了6个不同的数据(数据的值用value表示)。

  3) 将前面提到的Fusion Charts解压后的文件夹中包含的code/cs和bin目录都复制到你的当前项目中,以方便引入Fusion Charts的库文件和相关JS文件。

  4) 在default.aspx代码中,引入Fusion Charts的JS文件,如下:

 
< script type = " text/javascript " src = " FusionCharts/FusionCharts.js " ></ script >

  5) 在default.aspx中添加一个按钮,一个Literall控件,在按钮的事件中编写如下代码:

 
   Literal1.Text = FusionCharts.RenderChart( " FusionCharts/Column3D.swf " , " XMLFile.xml " , "" , " myFirst " , " 700 " , " 500 " , false , true );

  在这里,通过调用RenderChart方法,在页面中输出相关的柱状图,其中指定了数据的来源文件XMLFile.xml,并指定了图表的尺寸大小。运行工程项目,马上会得到如下的实际效果图:

ASP.NET中 使用Fusion Charts图表工具

第二种生成图表方法:用户输入数据

  第二种生成图表的方法,是可以让用户在输入界面中输入要在图表中显示的数据,然后动态生成图表,方法如下:

  1) 同样地,往ASP.NET的页面中添加Fusion Charts的脚本调用代码,如下:

 

< script type = " text/javascript " src = " FusionCharts/FusionCharts.js " ></ script >

  2)在页面中添加一个表格,如下图所示:

ASP.NET中 使用Fusion Charts图表工具

  在这个表格中,允许用户输入三个不同的数值,然后我们进行相应的处理。

  3) 在提交的按钮的事件代码中,编写如下代码:

 

StringBuilder xmlData = new StringBuilder(); xmlData.Append( " <chart caption='IPL Points' subCaption='For Season 2011 so far' showPercentValues = ' 1 ' pieSliceDepth = ' 30 ' showBorder = ' 1 ' > " ); xmlData.AppendFormat( " <set label='Mumbai' value='{0}' /> " , txtMumbai.Text); xmlData.AppendFormat( " <set label='Chennai' value='{0}' /> " , txtChennai.Text); xmlData.AppendFormat( " <set label='Kochi' value='{0}' /> " , txtKochi.Text); xmlData.Append( " </chart> " ); Literal1.Text = FusionCharts.RenderChart( " FusionCharts/Pie3D.swf " , "" , xmlData.ToString(), " Sales " , " 500 " , " 300 " , false , false );

  可以看到,这里实际上也是构造了一个符合Fusion  Charts格式规范的XML文档,只不过这里的value中,传入的参数是用户的输入而已。最后的用户输入界面和结果输出如下图所示:

ASP.NET中 使用Fusion Charts图表工具第三种生成图表的方法:图表数据源来自数据库

  最后我们介绍如何读取来自数据库中的数据源,作为我们图表的数据集合。Fusion Charts支持SQL SERVER 及ACCESS等多种数据库,下面我们以读取ACCESS中的数据库为例子说明:

  1) 首先,在ACCESS中建立一个数据库,一张数据表,及输入若干数据。

  2) 将ACCESS数据文件复制到App_Data目录下。

  3) 在App_Code目录下,编写如下代码,进行数据库的连接:

 

using System; using System.Data; using System.Data.Odbc; using System.Web; using System.Configuration; namespace DataConnection { public class DbConn { public OdbcConnection connection; public OdbcDataReader ReadData; public OdbcCommand aCommand; public DbConn( string strQuery) { string connectionName = " MSAccessConnection " ; string ConnectionString = ConfigurationManager.ConnectionStrings[connectionName].ConnectionString; try { connection = new   OdbcConnection(); connection.ConnectionString =   ConnectionString; connection.Open(); GetReader(strQuery); } catch (Exception  e) { HttpContext.Current.Response.Write(e.Message.ToString()); } } public void   GetReader( string strQuery) { aCommand = new   OdbcCommand(strQuery, connection); ReadData =   aCommand.ExecuteReader(CommandBehavior.CloseConnection); } } }

  在上面的代码中,我们使用了ODBC去读取Access数据库,其中的GetReader方法接收一个查询SQL语句,使用ExecuteReader方法去读取并执行获得查询结果集。如果使用的是sql  server 2008,则修改为:

 

string connectionName = " SQLServerConnection " ;

  4) 同样,将FusionCharts.dll放到项目工程目录的bin文件夹下,将FusionCharts解压后的FusionCharts文件夹放到工程目录下。

  接下来,要配置configuration文件,代码如下:

 

<? xml version="1.0" ?> < configuration > < appSettings /> < connectionStrings > < add name ="MSAccessConnection" providerName ="System.Data.Odbc" connectionString ="Driver={Microsoft Access Driver (*.mdb, *.accdb)};Dbq=|DataDirectory|\ipl.accdb" /> </ connectionStrings > < system.web > < compilation  debug ="true" > </ compilation > < authentication  mode ="Windows" /> < customErrors  mode ="RemoteOnly"   defaultRedirect ="GenericErrorPage.htm" > < error  statusCode ="403"   redirect ="NoAccess.htm" /> < error statusCode ="404"   redirect ="FileNotFound.htm" /> </ customErrors > </ system.web > </ configuration >其中在connectionStrings中,指定了当前access数据库的文件,如果是SQL SERVER 2008的话,则修改为:
< add name = " SQLServerConnection " providerName = " System.Data.Odbc " connectionString = " Driver={SQL  Server};;uid = USERNAME;pwd = PASSWORD;server = HOST;database = DATABASE_NAME " />

  5) 在页面中的页面开始部分,加入对FusionCharts.js的引用:

< script type = " text/javascript " src = " FusionCharts/FusionCharts.js " ></ script >

  6) 同样,在页面中添加一个button,一个literall控件,编写如下代码:

StringBuilder xmlData = new StringBuilder(); string query = "" ; query = " select Team, Points from IPL_POINTS " ; DbConn db = new DbConn(query); xmlData.AppendFormat( " <chart> " ); while (db.ReadData.Read()) { // Generate <set name='..' value='..' /> xmlData.AppendFormat( " <set label='{0}' value='{1}' /> " , db.ReadData[ " Team " ].ToString(), db.ReadData[ " Points " ].ToString()); } xmlData.AppendFormat( " </chart> " ); Literal1.Text = FusionCharts.RenderChart( " FusionCharts/Column2D.swf " , "" , xmlData.ToString(), " chart1 " , " 500 " , " 400 " , false , true );

  在上面的代码中,首先是通过连接数据库,传入SQL查询语句,获得数据结果集,然后循环读取,再将数据组合成符合FusionCharts规范的XML格式文件即可,其中

xmlData.AppendFormat( " <set label='{0}' value='{1}' /> " , db.ReadData[ " Team " ].ToString(), db.ReadData[ " Points " ].ToString());

  分别对label及value传入从数据库中取出来的值,最后依然使用FusionCharts的RenderChart方法,产生图表,跟第一种及第二种方法一样,生成的图表如下:

ASP.NET中 使用Fusion Charts图表工具

  小 结

  在ASP.NET中使用Fusion Charts的方法其实很简单,无论是从数据库中获得数据源还是从XML获得数据源,只需要生成符合Fusion Charts规范的XML文件即可。更多的Fusion Charts的使用方法及API请参考其官方网站及文档。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值