Jquery实现FusionCharts遮罩效果,很不错
实现效果: 下面是实现方法: 数据源: Code [http://www.xueit.com] ? xml version="1.0" encoding="utf-8" ? chart caption ="月统计表" xAxisName ="月份" yAxisName ="值" showValues ="0" decimals ="0" formatNumberScale ="0"
实现效果:
下面是实现方法:
数据源:

<?xml version="1.0" encoding="utf-8" ?> <chart caption="月统计表" xAxisName="月份" yAxisName="值" showValues="0" decimals="0" formatNumberScale="0" baseFont="Arial" baseFontSize="12"> <set label="一月" value="462" link="JavaScript:ShowDrillChart('1, 235')" /> <set label="二月" value="857" link="JavaScript:ShowDrillChart('2, 857')"/> <set label="三月" value="671" link="JavaScript:ShowDrillChart('3, 671')"/> <set label="四月" value="494" link="JavaScript:ShowDrillChart('4, 494')"/> <set label="五月" value="761" link="JavaScript:ShowDrillChart('5, 761')"/> <set label="六月" value="960" link="JavaScript:ShowDrillChart('6, 960')"/> <set label="七月" value="629" link="JavaScript:ShowDrillChart('7, 629')"/> <set label="八月" value="622" link="JavaScript:ShowDrillChart('8, 622')"/> <set label="九月" value="376" link="JavaScript:ShowDrillChart('9, 376')"/> <set label="十月" value="494" link="JavaScript:ShowDrillChart('10, 494')"/> <set label="十一月" value="761" link="JavaScript:ShowDrillChart('11, 761')"/> <set label="十二月" value="960" link="JavaScript:ShowDrillChart('12, 960')"/> </chart>
<!--
baseFont="Arial" 设置字体
baseFontSize="12 设置字号
caption="月统计表" 报表标题
xAxisName="Month" 月份
yAxisName="Units" 对应的值
link="JavaScript:ShowDrillChart('1, 235')" 调用页面JS方法,并传递相应参数
-->
前台实现:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FusionCharts_Jquery打造交换报表._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>使用FusionCharts显示报表</title> <!--数据编码--> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!--引入FusionCharts的JS文件--> <script type="text/javascript" src="JSClass/FusionCharts.js" ></script> <script type="text/javascript" src="JSClass/jquery-1[1].3.2-vsdoc2.js"></script> <!--引用Jquery插件,实现遮罩---> <script type="text/javascript" src="JSClass/jquery.blockUI.js"></script> </head> <body> <form id="form1" runat="server"> <script type="text/javascript"> function ShowReport(hei, wid, type, source) { //显示报表 var chart = null; if (type == "Pie") { var chart = new FusionCharts("Charts/Pie3D.swf", "ChartId", wid, hei, "0", "0"); } else if (type == "Column") { chart = new FusionCharts("Charts/Column3D.swf", "ChartId", wid, hei, "0", "1"); } else if (type == "Line") { chart = new FusionCharts("Charts/Line.swf", "ChartId", wid, hei, "0", "0"); } chart.addParam("wmode", "Opaque"); //设置报表参数,控制报表显示 chart.setDataURL(source); chart.render("ReportDiv"); } function ShowDrillChart(par) { //分割字符串,获取参数 var pars = par.toString().split(","); var month = pars[0]; var value = pars[1]; //发送ajax请求,获取钻取数据,数据格式为json $.getJSON("Model/GetDrill.ashx", { ParMonth: month }, function(json) { //呈现子报表数据层 //$("#DrillDiv").hide().show(); var html = '<table border="0"><tr><td style="height:56px"></td></tr></table>'; html = '<table border="1" cellspacing="0" style="border-collapse: collapse;width:380px"><tr><th align="center">第一周</th><th align="center">第二周</th><th align="center">第三周</th><th align="center">第四周</th></tr>'; //解析Json数据,呈现数据 $.each(json.DrillTable, function(i, item) { html = '<tr style="color:Blue;line-height:20px; height:20px; font-size:12px;float:right;">'; html = "<td>" item.First "</td>"; html = "<td>" item.Second "</td>"; html = "<td>" item.Third "</td>"; html = "<td>" item.Fourth "</td>"; html = "</tr>"; }) html = "</table>"; html = '<input type="button" value="关闭" id="Close" onclick=Close(); />'; $("#DrillDiv").html(html); //实现遮罩 $.blockUI({ message: $("#DrillDiv"), css: { width: "430px", height: "300px"} }); }); } function Close() { // 取消遮罩 $.unblockUI(); $("#DrillDiv").hide(); } $(document).ready(function() { $("#DrillDiv").hide(); }); </script> <div id="ReportDiv" style="float:left;"> </div> <div id="DrillDiv" style="display: none; cursor: default; width: 230px; height: 72px;padding-top:2px;"> </div> </form> </body> </html>
收藏文章
精彩图集
精彩文章
- 暂无记录。
热门标签
网络抓包
关卡选择
matlab
检查编码
计算器源
数据操作类
window.locat
python多态
工厂模式
on
石头剪子布
windows常见
Specified
动态加载js
小技巧
google+圈子
widget
Iisweb.vbs
大家来找
图片自适应
线程池
动态链接库
附件邮件
数据库隔离
I
批量处理
downsample
多线程共享
Java虚拟机
pyqt
反射
Demo
调用汇编
如何添加数据DB
命令
微信打开网页
表主键列
内存数据库
横排
左外连接
当前网页
设备类型
模拟鼠标动作
恢复语句
json属性名
多少
Linux换行符
pyqt4教程
网站发布
内存状态
解析目录路径
Ext
视图
高频触
计
却不
CString
集合的关系
修改标题
自动增长列
赞助商链接
@CopyRight 2002-2008, 1SOHU.COM, Inc. All Rights Reserved QQ:1010969229