码迷，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）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！