在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的图表啦。

转载于:https://www.cnblogs.com/dannyli/archive/2011/08/19/2145983.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值