FusionCharts图形+数据报表
来源：互联网 发布：网络编程socket 编辑：程序博客网 时间：2024/05/16 12:31
FusionCharts图形+数据报表，业务需求
TODO
依据查询条件，动态刷新图形或数据报表（图形报表：这里暂使用FusionCharts绘制）
地区控件采用zTree绘制（关于zTree在之前已经作了详细讲解，这里省略，以便针对性的讲解FusionCharts）
讲解篇：1，服务端aspx,2，服务端后台返回数据（这里采用服务器端程序：aspx.cs）3，前端javascript
服务端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>服务端后台返回数据（这里采用服务器端程序：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()); } }}前端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，这里对于数据报表，暂不做讲解，相信大家都已深刻理解了。
0 0
- FusionCharts图形+数据报表
- FusionCharts绘制图形报表
- FusionCharts 图形报表
- Ext+FusionCharts图形报表展示
- FusionCharts图形报表基于Ajax局部刷新加载
- FusionCharts报表
- FusionCharts图形
- FusionCharts动态改变图形的类型和数据
- 使用FusionCharts显示报表
- FusionCharts Free做报表
- FusionCharts Free 报表工具
- FusionCharts制作报表
- 报表/图表设计-----FusionCharts
- FusionCharts生成报表应用
- C#将数据转成图形报表
- 图形报表
- FusionCharts+Struts2+AJAX动态报表
- Flash报表控件(FusionCharts) 使用
- android学习资源
- Android 开发环境下载地址 -- 百度网盘 adt-bundle android-studio sdk adt 下载
- .net ajax 异步调用的几种实现方法（jquery）
- java 回调函数与匿名内部类
- C++析构函数
- FusionCharts图形+数据报表
- TexturePacker
- Velocity宏定义的坑与解决办法
- 游戏中的脚本语言原理与发展
- Minimum Path Sum
- Tiny Formater
- go语言defer使用 .
- ListView setSelection 无效问题
- http://blog.csdn.net/lenotang/article/details/2823230
