使用FusionCharts+Jquery实现报表钻取


实现效果:

  技术实现:

  数据源:

<?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;
            }
        }
    }
}



相关阅读:
jsp防盗链
网页排版经常用到的5个CSS基础
简单实用的网页表格特效
使用php+Ajax实现唯一校验实现代码[简单应用]
mysql 全文搜索 技巧
PHP教程:缓存技术应用
js 页面执行时间计算代码
批处理设置windows服务器的代码ThecSafe1.9.4
安装FreeBSD的工具sysinstall介绍(一)
修改mysql密码的方法
我的javascript 函数链之演变
Oracle几种查找和删除重复记录的方法总结
CSS教程:设计制作网页的CSS经验
利用Java实现zip压缩/解压缩
快速导航

Copyright © 2016 phpStudy |