在ASP.NET中使用FusionCharts图表
项目中常常会使用一些图表,用图表来丰富自己的页面,那么Fusioncharts将是一个很不错的选择,其效果也十分好。有关它的一下东西,可以在http://www.fusioncharts.com/里面下载或者参考。
以下将用一个简单的实例来说明其应用,其中数据源部分是通过AJAX(JQuery)来实现从服务端取得的。
1.下载FusionCharts组建,并将其放在项目的某个目录中
官方网站上能下载到很多不同格式的Charts模板,这些模板都是SWF文件,他们都会对应各种不同的XML格式的数据源,这里需要根据选取的模板确定XML数据源的格式。这里我以选择Column3D.swf为例,其图表和数据源如下图:
2.ASPX页面
添加FusionCharts的JS文件:
<script language="javascript" type="text/javascript" src="/Components/FusionCharts/JSClass/FusionCharts.js"></script>
这里我使用JQuery中提供的Ajax来读取数据源,所以要添加JQuery的JS文件:
<script language="javascript" type="text/javascript" src="/Scripts/JQuery/jquery-1.4.1.js"></script>
在页面上添加一个DIV容器:
<div id="divColumn3DChart""></div>
这里就是最核心的一个JS方法啦:
function SetDataForCharts() {
//柱状图
$.ajax({
type: 'POST',
url: '/Components/AjaxMethods.aspx/GetDataForColumn3DChart',
contentType: "application/json",
datatype: "json",
success: function (response) {
var val = response.d;
var chart =new FusionCharts("/Components/FusionCharts/Charts/Column3D.swf", "newChart", "280", "200", "0", "1");
chart.setDataXML(val);
chart.render("divColumn3DChart");
}
});
url:获取数据源时所需要调用的函数,函数返回值为XML字符串。路径使用相对路径。
如果想打开页面就加载这个Chart,可以window.onload = function SetDataForCharts() { //TODO }
3.上一步url对应的文件代码
关键的函数为:
[System.Web.Services.WebMethod()]
publicstaticstring GetDataForColumn3DChart()
{
string strXML ="这里需要根据实际需求,从数据库中将数据查询出来,并拼接出符合格式的XML字符串";
return strXML;
}
这个函数返回的XML字符串就是上面提到的符合相应模板要求的XML啦。
到这里就完成啦,打开页面就能显示PL的图表啦。