无刷新实现FusionCharts报表展示

问题描述

需求描述:想通过UpdatePanel实现FusionCharts的无刷新报表数据展示。通过ltChart2接收显示脚本,chartdiv2显示报表。当选择选项一或选项二或者其它的时候,想动态从cs重新读取数据拼接成脚本,显示到chartdiv2上,可脚本就是第一次执行,后面修改选择框的时候就是不变,请大神帮忙看下!代码:Page<divid="chartdiv2"></div><asp:LiteralID="ltChart2"runat="server"></asp:Literal><divstyle="width:120px;float:left;padding-top:18px;padding-left:20px;line-height:150%;"><asp:CheckBoxID="ckb1"Checked="true"runat="server"Text="选项一"AutoPostBack="True"OnCheckedChanged="ckb2_CheckedChanged"/><asp:CheckBoxID="ckb2"Checked="true"runat="server"Text="选项二"AutoPostBack="True"OnCheckedChanged="ckb2_CheckedChanged"/><asp:CheckBoxID="ckb3"runat="server"Text="其它"AutoPostBack="True"OnCheckedChanged="ckb2_CheckedChanged"/></div>

protectedvoidckb1_CheckedChanged(objectsender,EventArgse){DataSetds=jjm.RunProcedure_MrDp("sp_Mrer_1","2016-03-21",7);DataTabledt=ds.Tables[0];StringBuilderztqk_2=newStringBuilder();ztqk_2.Append("functionshowChart2(){n");ztqk_2.Append("varchart=newFusionCharts("/FusionCharts/FCF_MSLine.swf","ChartId","600","350");n");ztqk_2.Append("chart.setTransparent(true);n");ztqk_2.Append("chart.setDataXML("<?xmlversion='1.0'encoding='GB2312'?>");ztqk_2.Append("<graphcaption=''subcaption=''xAxisName=''yAxisName=''decimalPrecision='0'formatNumberScale='0'numberPrefix=''showNames='1'rotateNames='0'showValues='1'showAlternateHGridColor='1'AlternateHGridColor='ff5904'divLineColor='ff5904'divLineAlpha='20'alternateHGridAlpha='5'baseFontSize='12'baseFont='宋体'bgAlpha='0'>");ztqk_2.Append("<categories>");StringBuilderlx0=newStringBuilder(),lx1=newStringBuilder(),lx2=newStringBuilder(),lx3=newStringBuilder();for(inti=0;i<dt.Rows.Count-1;i++){DataRowdr=dt.Rows[i];ztqk_2.Append("<categoryname='"+dt.Rows[i][0]+"'/>");if(ckb1.Checked)lx1.Append("<setvalue='"+dr[1]+"'/>");if(ckb2.Checked)lx2.Append("<setvalue='"+dr[2]+"'/>");if(ckb3.Checked)lx3.Append("<setvalue='"+dr[3]+"'/>");}ztqk_2.Append("</categories>");if(ckb1.Checked){ztqk_2.Append("<datasetseriesName='选项一'color='008000'anchorBorderColor='008000'anchorSides='20'anchorRadius='3'anchorBorderThickness='1'anchorBgColor='ffffff'>");ztqk_2.Append(lx1);ztqk_2.Append("</dataset>");}if(ckb2.Checked){ztqk_2.Append("<datasetseriesName='选项二'color='0000FF'anchorBorderColor='0000FF'anchorSides='20'anchorRadius='3'anchorBorderThickness='1'anchorBgColor='ffffff'>");ztqk_2.Append(lx2);ztqk_2.Append("</dataset>");}if(ckb3.Checked){ztqk_2.Append("<datasetseriesName='其它'color='FF0000'anchorBorderColor='FF0000'anchorSides='20'anchorRadius='3'anchorBorderThickness='1'anchorBgColor='ffffff'>");ztqk_2.Append(lx3);ztqk_2.Append("</dataset>");}ztqk_2.Append("</graph>");n");ztqk_2.Append("chart.render("chartdiv2");n");ztqk_2.Append("}n");ltChart2.Text="<scripttype="text/javascript">n"+ztqk_2+"showChart2();n</script>n";}

解决方案

解决方案二:
昨天赶在下班的时候发帖,活该没大牛回复,顶一下让看见

时间: 2024-09-28 08:55:11

无刷新实现FusionCharts报表展示的相关文章

php+ajax实现无刷新动态加载数据技术

  无刷新功能我们用到很多很多的,下面我就来给各位介绍一个实例,就是实现php+ajax实现无刷新滚屏加载数据,例子非常的简单大家只要按流程来操作就可以了哦. 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PH

php+ajax实现无刷新动态加载数据技术_php实例

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取.这个功能在实际工作种经常用到,希望能给需要做这方面的人有些帮助. 一.功能页面布局及介绍 1.上传页面布局及input file上传功能 2.上传页面文件正在上传效果 3.上传完成效果,多文件展示区 二.功能代码实现及资源引用 1.js资源文件引用 html页面js引用,需要引用j

使用Jquery的Ajax实现无刷新更新,修改,删除页面

原文:使用Jquery的Ajax实现无刷新更新,修改,删除页面 本文将向大家讲述一下最近工作的一些总结,主要包括了以下内容,注册界面以及详细信息界面的编辑.主要是介绍了AJAX技术,因为我觉得其他方面没什么好介绍的.首先是跟大家说一下Ajax的优点,假如你删除了一个页面的内容,你想当于点击了一个按钮,那么这个页面必然发生了回发事件,也就是说,你的页面必然被刷新了一次.以下是我从网上找来的一张Ajax的原理图,本人PS技术太差了,所以索性从网上找算了. 其实我个人对于Ajax技术的理解并没有上面图

Jquery ajaxfileupload.js结合.ashx文件实现无刷新上传

先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取.这个功能在实际工作种经常用到,希望能给需要做这方面的人有些帮助. 一.功能页面布局及介绍 1.上传页面布局及input file上传功能 2.上传页面文件正在上传效果 3.上传完成效果,多文件展示区 二.功能代码实现及资源引用 1.js资源文件引用 html页面js引用,需要引用j

利用AJAX实现无刷新数据分页_AJAX相关

以前在使用Asp.Net的时候用过GridView这个控件,这个控件自带分页的功能,虽然很丑,但是功能还是很强大的.这里呢,给大家展示一下更加给力的方式--利用AJAX无刷新直接从服务器获取数据分页. 一.实现过程 注意:一下的内容都是在服务器内使用的. 首先要在服务器的路径下建立几个文件,比如,page1.txt,page2.txt,page3.txt. 每个文件中放入数组,如下: 复制代码 代码如下: [{user:'blue',pass:'123'},{user:'aaa',pass:'d

基于ajax实现点击加载更多无刷新载入到本页_AJAX相关

先给大家展示效果图: 效果演示 本例是分页的另外一种显示方式,并不是隐藏未显示的内容 数据库结构与<ajax 翻页>是一样的 JavaScript 代码 <script type="text/javascript"> $(document).ready(function() { var track_click = ; //track user click on "load more" button, righ now it is click

PHP+Ajax实现无刷新分页实例详解(附demo源码下载)_php技巧

本文实例讲述了PHP+Ajax实现无刷新分页的方法.分享给大家供大家参考,具体如下: 注:这里使用到的一些类库在前面文章都能找到源代码,因此为了缩短文章篇幅,都指明链接所在. 本文讲解内容为: Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/

实例代码讲解ajax实现的无刷新分页_AJAX相关

1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理:通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据,并显示. 现在什么都讲究一个无刷新,就连分页也是如此,下面是小编日常整理的关于一段无刷新代码,希望能够帮到大家. 代码如下: 一.html代码部分