使用FusionCharts+Jquery实现报表钻取
<chart caption="月统计表" xAxisName="月份" yAxisName="值" showValues="0" decimal
实现效果：
技术实现：
数据源：
<?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>
<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>
对应的后台代码：
using System;
namespace FusionCharts_Jquery打造交换报表
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
System.Random rand = new Random();//保证得到最新的数据
RegisterStartupScript("c", "<script>ShowReport(" + 550 + "," + 600 + ",'Column','../Source/MonthReport.xml?id=" + rand.Next(6000) + "');</script>");
}
}
}
}
提交ajax请求，获取钻取报表数据的处理程序：
using System.Web;
using System.Data;
using System.Text;
using Newtonsoft.Json;
using System.IO;
namespace FusionCharts_Jquery打造交换报表.Model
{
public class GetDrill : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//获取参数，返回子报表数据，数据格式为Json
if (!string.IsNullOrEmpty(context.Request.QueryString.GetValues("ParMonth")[0]))
{
string month = context.Request.QueryString.GetValues("ParMonth")[0];
context.Response.Write(GetDrillData(month));
}
}
//获取子报表数据,返回JSON数据
private string GetDrillData(string month)
{
//构建数据
DataTable table = new DataTable();
table.Columns.Add("First",typeof(string));
table.Columns.Add("Second", typeof(string));
table.Columns.Add("Third", typeof(string));
table.Columns.Add("Fourth", typeof(string));
for (int n = 1; n < 5; n++)
{
DataRow row = table.NewRow();
row[0] = month + "月，第" + n.ToString() + "周，第1列！";
row[1] = month + "月，第" + n.ToString() + "周，第2列！";
row[2] = month + "月，第" + n.ToString() + "周，第3列！";
row[3] = month + "月，第" + n.ToString() + "周，第4列！";
table.Rows.Add(row);
}
//使用第三方控件Newtonsoft.Json，解析DataTable为Json数据格式
StringBuilder sb = new StringBuilder();
System.IO.StringWriter sw = new StringWriter(sb);
using (JsonWriter jw = new JsonTextWriter(sw))
{
JsonSerializer ser = new JsonSerializer();
jw.WriteStartObject();
jw.WritePropertyName("DrillTable");
jw.WriteStartArray();
foreach (DataRow dr in table.Rows)
{
jw.WriteStartObject();
foreach (DataColumn dc in table.Columns)
{
jw.WritePropertyName(dc.ColumnName);
ser.Serialize(jw, dr[dc].ToString());
}
jw.WriteEndObject();
}
jw.WriteEndArray();
jw.WriteEndObject();
sw.Close();
jw.Close();
}
return sb.ToString();
}
//// <summary>
// //自定义方法，将DataTable转化为Json数据格式
// //</summary>
// //<param name="dt">数据表</param>
// //<returns>JSON字符串</returns>
//public string CreateJsonParameters(DataTable dt)
//{
// StringBuilder JsonString = new StringBuilder();
// if (dt != null && dt.Rows.Count > 0)
// {
// JsonString.Append("{ ");
// JsonString.Append("\"TableInfo\":[ ");
// for (int i = 0; i < dt.Rows.Count; i++)
// {
// JsonString.Append("{ ");
// for (int j = 0; j < dt.Columns.Count; j++)
// {
// if (j < dt.Columns.Count - 1)
// {
// JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
// }
// else if (j == dt.Columns.Count - 1)
// {
// JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
// }
// }
// if (i == dt.Rows.Count - 1)
// {
// JsonString.Append("} ");
// }
// else
// {
// JsonString.Append("}, ");
// }
// }
// JsonString.Append("]}");
// return JsonString.ToString();
// }
// else
// {
// return null;
// }
//}
public bool IsReusable
{
get
{
return false;
}
}
}
}
作者：喵哥笔记
