码迷,mamicode.com
首页 > 其他好文 > 详细

FusionCharts图形+数据报表

时间:2015-06-09 17:21:34      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:fusioncharts

FusionCharts图形+数据报表,业务需求:

TODO:

1,依据查询条件,动态刷新图形或数据报表(图形报表:这里暂使用FusionCharts绘制)

2,地区控件采用zTree绘制(关于zTree在之前已经作了详细讲解,这里省略,以便针对性的讲解FusionCharts)

讲解篇:1,服务端aspx,2,服务端后台返回数据(这里采用服务器端程序:aspx.cs)3,前端javascript

1,服务端aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BZTotalReport.aspx.cs" Inherits="HMFW.Web.Pages.SQJS.Report.BZTotalReport" %>

<!DOCTYPE html>
<%@ Register Src="../../../UserControl/uc_btnSelectArea.ascx" TagName="uc_btnSelectArea"
    TagPrefix="uc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>班长统计报表</title>
    <script src="/Js/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="/Js/jquerytree/jquery.ztree.core-3.1.min.js" type="text/javascript"></script>
    <link href="/Js/jquerytree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="/Js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Js/jquery.form.js" type="text/javascript"></script>
    <script src="/Js/Common.js" type="text/javascript"></script>
    <script src="/Js/jquery-loadmask-0.4/jquery.loadmask.min.js" type="text/javascript"></script>
    <link href="/Js/jquery-loadmask-0.4/jquery.loadmask.css" rel="stylesheet" type="text/css" />
    <link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/css/Common.css" rel="stylesheet" type="text/css" />
    <link href="/css/width.css" rel="stylesheet" type="text/css" />
    <script src="/Js/FusionCharts.js" type="text/javascript"></script>
    <script src="/Js/ReSize.js" type="text/javascript"></script>
    <script src="/Js/Pages/Ajax.js" type="text/javascript"></script>
    <script src="/Js/GridReport/CreateControl.js" type="text/javascript"></script>
    <script src="/Js/GridReport/ReportHelper.js" type="text/javascript"></script>

    <script src="/Js/GridReport/CommonControl.js"></script>
    <script src="../../../Js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <link href="../../../Js/My97DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css" />
    <script src="/Js/Pages/SQJS/Report/BZTotalReport.js"></script>
    <script language="JavaScript" for="Report1" event="ExportBegin(pSender)">
        ExportBegin(pSender);
    </script>
    <script language="JavaScript" for="Report1" event="ExportEnd(pSender)">
        ExportEnd(pSender);
    </script>
    <script language="JavaScript" for="Report1" event="SectionFormat(pSender)">
        SectionFormat(pSender);
    </script>
    <script language="JavaScript" for="ReportViewer" event="ContentCellClick(pSender)">
        PenetrateReport(pSender);
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div_action">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="findk">
                <tbody>
                    <tr align="left">
                        <td align="right" style="width: 10%">
                            <div class="divnr-auto">
                                地区:
                            </div>
                        </td>
                        <td align="left" style="width: 40%" nowrap="nowrap">
                            <uc1:uc_btnSelectArea ID="uc_btnSelectArea1" runat="server" ShowClearBtn="true" Width="184"
                                CanSelParent="True" TreeMode="True" SetSearchFunction="query()" ShowJB="4" />
                        </td>
                        <td align="right" style="width: 10%">
                            <div class="divnr-auto">
                                性别:
                            </div>
                        </td>
                        <td align="left" style="width: 40%" nowrap="nowrap">
                            <select id="ddl_sSex" class="xlk150">
                                <option value="" selected="selected">--请选择--</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </td>
                        <%--<td align="right" style="width: 10%" nowrap>
                            <div class="divnr-auto">
                                任职时间:
                            </div>
                        </td>
                        <td align="left" style="width: 23%">
                            <asp:TextBox ID="txt_Start" runat="server" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'txt_End\',{d:0})}'})" class="srk70"></asp:TextBox>-<asp:TextBox ID="txt_End" runat="server" onclick="WdatePicker({minDate:'#F{$dp.$D(\'txt_Start\',{d:0})}'});" class="srk70"></asp:TextBox>
                        </td>--%>
                    </tr>
                    <tr>
                        <td align="right" style="width: 10%">
                            <div class="divnr-auto">
                                社区成员类别:
                            </div>
                        </td>
                        <td align="left" colspan="2" nowrap="nowrap">
                            <%--<asp:DropDownList ID="ddl_sBZCYQK" runat="server" CssClass="srk150">
                            </asp:DropDownList>--%>
                            <%--2015/01/22 调整:统计分析系统--[社区组织信息统计]其中<社区成员类别>,支持<由下拉框→变为复选框>支持多选--%>

                            <div class="inlinek">
                                <ul>
                                    <asp:Repeater ID="rptBZCYQK" runat="server">
                                        <ItemTemplate>
                                            <li>
                                                <input type="checkbox" id='bzcyqk_<%#Eval("sCode")%>' name='checkbox' /><label for='bzcyqk_<%#Eval("sCode")%>'><%#Eval("sValue")%></label></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                        </td>
                        <td> 
                        </td>
                        <td> 
                        </td>
                    </tr>
                    <tr style="display: none">
                        <td colspan="6">
                            <div class="divnr-auto">
                                报表样式:
                            </div>
                            <asp:DropDownList ID="ddl_style" runat="server" class="xlk001" ContentEditable="false">
                            </asp:DropDownList></td>
                    </tr>
                </tbody>
            </table>
            <div class="datagrid-toolbar">
                <xhm:xhmLinkButtionEasyUI ID="btn_Report" runat="server" IconTypeSelected="excel"
                    OnClientClick="Grid();return false;">数据报表</xhm:xhmLinkButtionEasyUI>
                <xhm:xhmLinkButtionEasyUI ID="XhmLinkButtionEasyUI1" runat="server" IconTypeSelected="chart"
                    OnClientClick="Report(1);return false;">柱状图</xhm:xhmLinkButtionEasyUI>
                <xhm:xhmLinkButtionEasyUI ID="XhmLinkButtionEasyUI2" runat="server" IconTypeSelected="chart"
                    OnClientClick="Report(2);return false;">趋势图</xhm:xhmLinkButtionEasyUI>
                <xhm:xhmLinkButtionEasyUI ID="XhmLinkButtionEasyUI3" runat="server" IconTypeSelected="chart"
                    OnClientClick="Report(3);return false;">饼状图</xhm:xhmLinkButtionEasyUI>
                <div style="float: right">
                    <xhm:xhmLinkButtionEasyUI ID="btn_QCondition" runat="server" IconTypeSelected="rego"
                        OnClientClick="Condition();return false;">返回</xhm:xhmLinkButtionEasyUI>
                </div>
            </div>
        </div>
        <table style="width: 766px;" align="center">
            <tr>
                <td>
                    <div id="divFlash" style="overflow-y: auto;">
                        <div id="divFlashReport" style="font-size: 12px; text-align: center; margin-top: 5px; overflow: hidden;">
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

2,服务端后台返回数据(这里采用服务器端程序:aspx.cs)

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Xml;
using HMFW.Common.FusionChart;
using HMFW.Web.App_Code;
using XHM.FusionChart;
using HMFW.BLL;
using HMFW.BLL.SQJS.Report;
using System.Text;

namespace HMFW.Web.Handle.SQJS.Report
{
    /// <summary>
    /// AJBLReport 的摘要说明
    /// </summary>
    public class BZReport : BaseHandler
    {
        SQTotalBLL bllSQTotal = new SQTotalBLL();
        protected override void ActionHandler(string action)
        {
            switch (action.ToLower())
            {
                case "getreportdata":
                    GetReportData();//图形报表
                    break;
                case "getgriddata":
                    GetGridData();//数据报表
                    break;
                case "getintegratedgriddata":
                    GetIntegratedGridData();//社区组织信息明细查询数据报表
                    break;
                default:
                    break;
            }
        }

        /*[新增]社区组织信息明细查询数据报表      2015/03/18             [方]*/
        private void GetIntegratedGridData()
        {
            string sVillageCode = GetParam("sAreaCode");//地区编码
            string sSex = "";//性别
            string sBZCYQK = "";//班子成员类别

            if (!string.IsNullOrEmpty(GetParam("sSex")))
                sSex = GetParam("sSex");
            if (!string.IsNullOrEmpty(GetParam("sBZCYQK")))
                sBZCYQK = GetParam("sBZCYQK").Replace("^", "%");
            try
            {
                DataTable dt = bllSQTotal.GetIntegratedGridData(sVillageCode, sSex, sBZCYQK);
                DataSet ds = new DataSet();
                ds.Tables.Add(dt);
                Output(ds.Tables.Count == 0 ? new System.Data.DataSet().GetXml() : ds.GetXml());
            }
            catch (Exception ex)
            {
                OutputResult(false, ex.Message + (ex.InnerException == null ? "" : ex.InnerException.Message));
            }
        }

        private void GetGridData()
        {
            string sVillageCode = GetParam("sAreaCode");
            string sSex = "";
            string sBZCYQK = "";

            if (!string.IsNullOrEmpty(GetParam("sSex")))
                sSex = GetParam("sSex");
            if (!string.IsNullOrEmpty(GetParam("sBZCYQK")))
                sBZCYQK = GetParam("sBZCYQK").Replace("^", "%");
            DateTime StartTime = DateTime.Parse("1/2/1753");
            DateTime EndTime = DateTime.Parse("12/30/9999");

            if (!string.IsNullOrEmpty(GetParam("sStartTime")))
            {
                DateTime.TryParse(GetParam("sStartTime"), out StartTime);
            }
            if (!string.IsNullOrEmpty(GetParam("sEndTime")))
            {
                DateTime.TryParse(GetParam("sEndTime"), out StartTime);
            }

            try
            {
                DataTable dt = bllSQTotal.GetBZGridTotal(sVillageCode, sSex, sBZCYQK, StartTime, EndTime);
                DataSet ds = new DataSet();
                ds.Tables.Add(dt);
                Output(ds.Tables.Count == 0 ? new System.Data.DataSet().GetXml() : ds.GetXml());
            }
            catch (Exception ex)
            {
                OutputResult(false, ex.Message + (ex.InnerException == null ? "" : ex.InnerException.Message));
            }
        }

        private void GetReportData()
        {
            string sSex = "";
            string sBZCYQK = "";

            string sVillageCode = GetParam("sAreaCode");
            if (!string.IsNullOrEmpty(GetParam("sSex")))
                sSex = GetParam("sSex");
            if (!string.IsNullOrEmpty(GetParam("sBZCYQK")))
                sBZCYQK = GetParam("sBZCYQK").Replace("^", "%");
            DateTime StartTime = DateTime.Parse("1/2/1753");
            DateTime EndTime = DateTime.Parse("12/30/9999");

            if (!string.IsNullOrEmpty(GetParam("sStartTime")))
            {
                DateTime.TryParse(GetParam("sStartTime"), out StartTime);
            }
            if (!string.IsNullOrEmpty(GetParam("sEndTime")))
            {
                DateTime.TryParse(GetParam("sEndTime"), out StartTime);
            }

            DataTable dt = bllSQTotal.GetBZReportTotal(sVillageCode, sSex, sBZCYQK, StartTime, EndTime);
            /******2015/01/22 调整:统计分析系统--[社区组织信息统计]其中关于图形报表名称:班子成员统计→社区组织信息统计******/
            string title = "社区组织信息统计";
            var chart = new AutoFusion(GetParam("fusionstyle"))
            {
                DtValue = dt,
                CuMainTitle = title,
                XName = "地区",
                YName = "个",
                XValue = "sName",
                YValue = "ZS",
                Key = "sAreaCode"
            };
            Output(chart.GetData());
        }

    }
}
3,前端javascript

var handleurl = "/Handle/SQJS/Report/BZReport.ashx";  //一般处理程序路径
var grfurl = "/GRF/SQJS/Report/BZReport.grf";
var Msflash = false;//是否为多维图 true 多维
var flashurl = "/charts/Column2D.swf";


var ColumnContent;
var AmountContentCell;
var AmountField;
var queryPenetrate = "000000";
//绑定窗口放大缩小时候调用自适应函数
$(function () {
    document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
    resizeGrid();
    bindResizeEventToWindow(resizeGrid);
    $("#ddl_sSex").bind("change", query);
    //$("#ddl_sBZCYQK").bind("change", query);
    //2015/01/22 调整:统计分析系统--[社区组织信息统计]其中<社区成员类别>,支持<由下拉框→变为复选框>支持多选
    $("[id^='bzcyqk_']").bind("click", query);//点击<社区成员类别>复选框,触发事件 执行查询

    $("#ddl_style").bind("change", changeChart);
});

function resizeGrid() {
    var w = $(this).width();
    if (w <= 0)
        w = $(window.parent.document).find("#Pages").width() - 2;
    $("#div_action").width(w);
    var th = $("#div_action").height();
    if (th <= 0)
        setTimeout(resizeGrid, 1000);
    else {
        var h = $(this).height();
        $('#divFlash').height(h - th - 12);
    }
}

function LoadByArea(Areacode) {
    $("#uc_btnSelectArea1_hidAreaCode").val(Areacode);
    SetAreaNameByCode(Areacode, "uc_btnSelectArea1_txtAreaName");
    query();
}
function query() {
    if ($("#divFlash").is(":visible"))
        Report();
    else
        Grid();
}
function Report(st) {
    if (st != undefined) {
        $("#ddl_style").val(st);
        changeChart(false);
    }
    var queryPar = "";
    queryPar += "&sSex=" + $("#ddl_sSex").val();
    //2015/01/22 调整:统计分析系统--[社区组织信息统计]其中<社区成员类别>,支持<由下拉框→变为复选框>支持多选
    //queryPar += "&sBZCYQK=" + $("#ddl_sBZCYQK").val();
    /****查询:复选框勾选Start****/
    var bzcyqk = ""; //班子成员情况   
    $(("[id^='bzcyqk_']:checked")).each(function () {
        var cx = $(this).attr("id");
        bzcyqk += cx.replace("bzcyqk_", "") + "^";
    });
    queryPar += "&sBZCYQK=" + bzcyqk;
    /****查询:复选框勾选End****/

    queryPar += "&sAreaCode=" + $("#uc_btnSelectArea1_hidAreaCode").val();
    //queryPar += "&sStartTime=" + $("#txt_Start").val();
    //queryPar += "&sEndTime=" + $("#txt_End").val();
    queryPar += "&fusionstyle=" + $("#ddl_style").val();
    $.ajax({
        type: "POST",
        url: handleurl,
        data: "action=getreportdata" + queryPar,
        dataType: "TEXT",
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            $.messager.alert('错误', XmlHttpRequest.responseText, 'error');
        },
        success: function (returnValue) {
            LoadFlashData(flashurl, returnValue);
        },
        beforeSend: function () {
            $("body").mask("数据处理中,请稍候...");
        },
        complete: function () {
            $("body").unmask();
        }
    });
}
function Grid() {
    $("body").mask("数据处理中,请稍候...");
    var queryPar = "action=getgriddata";
    queryPar += "&sAreaCode=" + $("#uc_btnSelectArea1_hidAreaCode").val();
    queryPar += "&sSex=" + $("#ddl_sSex").val();
    //2015/01/22 调整:统计分析系统--[社区组织信息统计]其中<社区成员类别>,支持<由下拉框→变为复选框>支持多选
    //queryPar += "&sBZCYQK=" + $("#ddl_sBZCYQK").val();
    /****查询:复选框勾选Start****/
    var bzcyqk = ""; //班子成员情况   
    $(("[id^='bzcyqk_']:checked")).each(function () {
        var cx = $(this).attr("id");
        bzcyqk += cx.replace("bzcyqk_", "") + "^";
    });
    queryPar += "&sBZCYQK=" + bzcyqk;
    /****查询:复选框勾选End****/

    //queryPar += "&sStartTime=" + $("#txt_Start").val();
    //queryPar += "&sEndTime=" + $("#txt_End").val();
    var helper = new ReportHelper(handleurl, queryPar, grfurl);
    $("#divFlash").hide();
    //            helper.SetPrint = true; //是否显示打印预览界面
    //var title = "班子成员统计报表";
    /******2015/01/22 调整:统计分析系统--[社区组织信息统计]其中关于图形报表名称:班子成员统计→社区组织信息统计******/
    var title = "社区组织信息统计";
    helper.CreateDisplayXml(title);
    $("body").unmask();
}

function GetParam(code) {
    var queryPar = "action=getgriddata";
    if (code != undefined && code != "") {
        queryPar += "&sAreaCode=" + code;
    }
    else {
        queryPar += "&sAreaCode=" + $("#uc_btnSelectArea1_hidAreaCode").val();
    }
    return queryPar;
};
///获取页面参数,返回OBJECT类型
function getObject() {
    var obj = new Object();
    obj.HandleUrl = handleurl;
    obj.QueryString = GetParam();
    obj.GRFUrl = grfurl;
    obj.Parameter1 = "";
    var aType = $("#aType").val();
    obj.Parameter3 = "";
    obj.Parameter4 = "";

    return obj;
};

///页面赋值方法,在加载报表前执行
function PageAssignment() {
    grfurl = grfurl;
}


function SetReportParameter(array) {
    ReportViewer.Report = Report1.MyInterface;
    Report1.LoadFromURL(grfurl);
    //为了提高运行效率,在此记录下在响应事件中用到的报表对象的接口指针。
    ColumnContent = ReportViewer.Report.DetailGrid.ColumnContent; //获取数据行
    AmountContentCell = ColumnContent.ContentCells.Item("sAreaName"); //根据列名称获取行中列
    AmountField = Report1.FieldByName("sAreaCode");
    if (array != undefined && array.length > 0) {
        ReportViewer.Report.ParameterByName("Parameter1").AsString = array[0];
    }
}

function SetRedeemType() {

};


//数据报表行绑定事件
function SectionFormat(sender) {
    if (ColumnContent == sender) {
        var cell = sender.ContentCells.Item("sAreaName"); //条件列暂定为Column2
        if (AmountField.DisplayText == queryPenetrate || AmountField.DisplayText == "0000" || AmountField.DisplayText == "") {
            cell.Font.Underline = false; //给当前列设置下划线
            cell.Controls(1).ForeColor = 0; //单元格前景色
            return;
        }
        if (GetJbByCode(AmountField.DisplayText) == 4) {
            cell.Font.Underline = false; //给当前列设置下划线
            cell.Controls(1).ForeColor = 0; //单元格前景色
            return;
        }
        cell.Font.Underline = true; //给当前列设置下划线
        cell.Controls(1).ForeColor = ColorFromRGB(0, 0, 255); //单元格前景色
    }
}

///报表行穿透事件,返回OBJECT类型
function Penetrate(sender) {
    if (sender.Name == "sAreaName") {
        var AreaCode = ReportViewer.Report.FieldByName("sAreaCode").AsString;
        if (AreaCode == queryPenetrate) return;
        var areaLevel = GetJbByCode(AreaCode);
        if (areaLevel == 4) {
            return;
        }
        if (areaLevel == 1) {
            areaLevel = "3";
        }
        var obj = new Object();
        obj.HandleUrl = handleurl;
        obj.QueryString = GetParam(AreaCode);
        obj.GRFUrl = grfurl;
        obj.Parameter1 = "";
        obj.Parameter2 = "";
        obj.Parameter3 = "";
        obj.Parameter4 = "";
        return obj;
    }
    else return null;
}


var chartMyFirst;
function LoadFlashData(objUrl, xmlValue) {
    $("#divReport").hide();
    $("#divFlash").show();
    var divFlashReport = $("#divFlashReport");
    divFlashReport.show();
    var width = $(this).width();
    var height = $(this).height();
    chartMyFirst = new FusionCharts(objUrl, "myFirst", width - 20, height - 80, "0", "0");//750,500
    chartMyFirst.setDataXML(xmlValue);
    chartMyFirst.setTransparent(true);
    chartMyFirst.render("divFlashReport");
}

技术分享

【柱形图】技术分享

【柱形图:加了条件后】技术分享

【线状图】技术分享

【饼状图】

TODO:

1,这里对于数据报表,暂不做讲解,相信大家都已深刻理解了。

FusionCharts图形+数据报表

标签:fusioncharts

原文地址:http://blog.csdn.net/hr1187362408/article/details/46427693

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!