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,并点名了图的尺寸大小。运行工程项目,马上会收获如下的实际效果图:

ACCESS 1

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

  第二种生成图表的不二法门,是可于用户以输入界面被输入而在图中显得的数,然后动态生成图表,方法如下:

  1) 同样地,往ASP.NET的页面被补充加Fusion Charts的剧本调用代码,如下:

 

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

  2)在页面被补充加一个表格,如下图所示:

ACCESS 2

  在是表中,允许用户输入三个例外之数值,然后我们进行相应的处理。

  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中,传入的参数是用户的输入而已。最后之用户输入界面和结果输出如下图所示:

ACCESS 3其三种生成图表的措施:图表数据源来自数据库

  最后我们介绍如何读取来自数据库中之数据源,作为我们图表的多寡集合。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 { publicclass
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()); } }
publicvoid 
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解压后底FusionChartsACCESS文件夹放到工程目录下。

  接下,要布局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方法,产生图表,跟第一栽及第二种植办法一致,生成的图纸如下:

ACCESS 4

  小 结

  在ASP.NET中以Fusion
Charts的方其实十分粗略,无论是从数据库中赢得数据源还是于XML获得数据源,只需要转变符合Fusion
Charts规范之XML文件即可。更多之Fusion
Charts的使方法及API请参考该官方网站及文档。

相关文章