使用FusionCharts+Jquery实现报表钻取
2009-12-11 00:00:00 来源：WEB开发网前台实现：
<%@ 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>
<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.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>";
$("#DrillDiv").html(html);
});
}
//文档加载时，隐藏子报表
$(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>
Tags：使用 FusionCharts Jquery
编辑录入：爽爽 [复制链接] [打 印]
中查找“使用FusionCharts+Jquery实现报表钻取”更多相关内容
中查找“使用FusionCharts+Jquery实现报表钻取”更多相关内容更多精彩
赞助商链接
