• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

在ASP.NET中使用FusionCharts图表

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

项目中常常会使用一些图表,用图表来丰富自己的页面,那么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的图表啦。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap