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
贰零零玖这几个工具,同时本文须要读者已通晓核心的Visual Studio
二〇〇九及asp.net的基本知识。

  第三种选拔方法:使用XML作为图表数据源

  下边介绍第3种选拔Fusion
Charts的法门,正是行使XML作为图表数据源。步骤如下:

  1) 启动Visual Studio 2010。

  2)
在File菜单中,选拔新确立四个空手的网站,并且选取c#用作创设语言在档次网站建立后,再在那个类型中新起家2个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的标签办法分别钦点了伍个不等的数额(数据的值用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,并钦定了图片的尺寸大小。运转工程项目,立时会收获如下的实效图:

图片 1

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

  第②种生成图表的措施,是足以让用户在输入界面中输入要在图片中突显的数额,然后动态生成图表,方法如下:

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

 

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

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

图片 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);

  能够看出,那里其实也是布局了3个合乎Fusion 
Charts格式规范的XML文档,只不过那里的value中,传入的参数是用户的输入而已。最后的用户输入界面和结果输出如下图所示:

图片 3其三种生成图表的办法:图表数据源来自数据库

  最终我们介绍如何读取来自数据库中的数据源,作为大家图表的数量集合。Fusion
Charts协助SQL SE中华VVE福特Explorer及ACCESS等多样数据库,下边我们以读取ACCESS中的数据库为例子表明:

  1) 首先,在ACCESS中创设3个数据库,一张数据表,及输入若干数额。

  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方法接收2个查询SQL语句,使用ExecuteReader方法去读取并履行得到查询结果集。固然选用的是sql 
server 二〇一〇,则修改为:

 

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
SE汉兰达VE中华V 2009的话,则修改为:

<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方法,产生图表,跟第壹种及第两种办法一致,生成的图片如下:

图片 4

  小 结

  在ASP.NET中采纳Fusion
Charts的点子其实很简短,无论是从数据库中获取数据源还是从XML得到数据源,只供给扭转符合Fusion
Charts规范的XML文件即可。越来越多的Fusion
Charts的采取办法及API请参考其官方网站及文书档案。

相关文章