【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文件，如下：
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文件，如下：
5) 在default.aspx中添加一个按钮，一个Literall控件，在按钮的事件中编写如下代码：
"XMLFile.xml", "", "myFirst", "700", "500", false, true);
在这里，通过调用RenderChart方法，在页面中输出相关的柱状图，其中指定了数据的来源文件XMLFile.xml，并指定了图表的尺寸大小。运行工程项目，马上会得到如下的实际效果图：
第二种生成图表方法：用户输入数据
第二种生成图表的方法，是可以让用户在输入界面中输入要在图表中显示的数据，然后动态生成图表，方法如下：
1) 同样地，往ASP.NET的页面中添加Fusion Charts的脚本调用代码，如下：
2)在页面中添加一个表格，如下图所示：
在这个表格中，允许用户输入三个不同的数值，然后我们进行相应的处理。
3) 在提交的按钮的事件代码中，编写如下代码：
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中，传入的参数是用户的输入而已。最后的用户输入界面和结果输出如下图所示：
第三种生成图表的方法：图表数据源来自数据库
最后我们介绍如何读取来自数据库中的数据源，作为我们图表的数据集合。Fusion Charts支持SQL SERVER 及ACCESS等多种数据库，下面我们以读取ACCESS中的数据库为例子说明：
1) 首先，在ACCESS中建立一个数据库，一张数据表，及输入若干数据。
2) 将ACCESS数据文件复制到App_Data目录下。
3) 在App_Code目录下，编写如下代码，进行数据库的连接：
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，则修改为：
4) 同样，将FusionCharts.dll放到项目工程目录的bin文件夹下，将FusionCharts解压后的FusionCharts文件夹放到工程目录下。
接下来，要配置configuration文件，代码如下：
<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的话，则修改为：
connectionString="Driver={SQL
Server};;uid=USERNAME;pwd=PASSWORD;server=HOST;database=DATABASE_NAME"/>
5) 在页面中的页面开始部分，加入对FusionCharts.js的引用：
6) 同样，在页面中添加一个button,一个literall控件，编写如下代码：
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格式文件即可，其中
db.ReadData["Team"].ToString(), db.ReadData["Points"].ToString());
分别对label及value传入从数据库中取出来的值，最后依然使用FusionCharts的RenderChart方法，产生图表，跟第一种及第二种方法一样，生成的图表如下：
小 结
在ASP.NET中使用Fusion Charts的方法其实很简单，无论是从数据库中获得数据源还是从XML获得数据源，只需要生成符合Fusion Charts规范的XML文件即可。更多的Fusion Charts的使用方法及API请参考其官方网站及文档。
