示例说明
...
我们在页面中可以实现如下效果。点击上方的“收入”,“支出”。可以切换对应的柱图和饼图。
展示收入数据
...
点击“支出”切换到支出饼图
设置方法
...
1.首先在电子表格设计器(Microsoft Office
...
Excel)中,创建电子表格报表。如下:
2.在浏览器的资源定制节点下,选中电子表格,右键选择 编辑宏 进入报表宏界面。
...
3.在报表宏界面新建客户端模块。在弹出的新建模块对话框中,选择对象为spreadSheetReport、事件为onRender
...
、并把下面宏代码复制到代码编辑区域。
宏类型
类型 | 对象 | 事件 |
---|---|---|
ClientSide | spreadsheetReport | onRender |
宏代码
代码块 | language | js
---|---|
linenumbers | true | /** * 在报表中存在两块互斥显示的区域,点击两个单元格对其进行切换 */ var ClickCellSwitchTowArea = use("cmcclabsrds.public.ClickCellSwitchTowArea"); function main(spreadsheetReport) { //debugger; var kaitiButtonPosD4 = "F18"; var kaitiArea = { topLeft: "A1", bottomRight: "G16" }spreadsheetReport.getCell(3, 3); var jietiButtonPosF4 = "G2"; var jietiArea = { topLeft: "A17", bottomRight: "G31" }; // 切换tab1,tab2 ClickCellSwitchTowArea.twoCellClickSwitchTowArea(spreadsheetReport, kaitiButtonPos, kaitiArea, jietiButtonPos, jietiArea, true); }; |
4、在宏管理的工具宏中创建宏代码库,新建客户端模块ClickCellSwitchTowArea和客户端模块CmcclabsClientUtils,弹出的对话框中的对象和事件不用选,将下面宏代码复制到编辑区。
ClickCellSwitchTowArea模块:
代码块 |
---|
/** * 在报表中存在两块互斥显示的区域,点击两个单元格对其进行切换 * */ function twoCellClickSwitchTowArea(spreadsheetReport, cell1Pos, cell1Area, cell2Pos, cell2Area, show1stArea, delayTimes) { // debugger; var kaitiButtonPos = cell1Pos; var kaitiArea = cell1Area; var jietiButtonPos = cell2Pos; var jietiArea = cell2Area;spreadsheetReport.getCell(3, 5); //初始设置单元格背景色、字体颜色以及某个图形展示,隐藏 D4.style.backgroundColor = '#CE2B2B'; //当前展示的数据颜色 F4.style.backgroundColor = '#95D0D9'; //可点击展示数据的颜色 // 把所有对象封装到一起,便于传递到事件处理函数中 var btnClickHandlerParam = { spreadsheetReport: spreadsheetReport, kaitiArea: kaitiArea, jietiArea: jietiArea }; // 设置开题按钮事件 var kaitiPos = spreadsheetReport.parseCellIndex(kaitiButtonPos) D4.style.color = '#ffffff'; 设置字体颜色 // F4.style.color = '#727272'; var kaitiCell = spreadsheetReport.getCell(kaitiPos[0], kaitiPos[1]); if (kaitiCell) { kaitiCellshapesMap["收入柱图"].style.cursordisplay = "pointer"; spreadsheetReport.addListener(kaitiCell, "click", doKaitiButtonClick, btnClickHandlerParam); shapesMap["支出饼图"].style.display = "none"; } //为两个单元格添加点击事件 设置结题按钮事件 var jietiPos = spreadsheetReport.parseCellIndex(jietiButtonPos); var jietiCell = spreadsheetReport.getCell(jietiPos[0], jietiPos[1]); if (jietiCell) { jietiCell.style.cursor = "pointer"; spreadsheetReport.addListener(jietiCelladdListener(D4, "click", cellClick, spreadsheetReport); spreadsheetReport.addListener(F4, "click", doJietiButtonClickcellClick, btnClickHandlerParam); } // 初始显示开题内容 setTimeout(function() { // debugger; spreadsheetReport); if (show1stArea!spreadsheetReport.modifyCellValue) { var SpreadsheetReport_Modify = doKaitiButtonClick(kaitiCell, btnClickHandlerParamjsloader.resolve('smartbi.spreadsheetreport.SpreadsheetReport_Modify'); } else { doJietiButtonClick(jietiCell, btnClickHandlerParam); new SpreadsheetReport_Modify(spreadsheetReport); } }, delayTimes || 100); }; // "开题"按钮的click事件处理函数 function doKaitiButtonClickcellClick(e, btnClickParam) { // debugger; var btnClickHandlerParamt = btnClickParam || this; var spreadsheetReport = btnClickHandlerParam.spreadsheetReporte.target; var kaitiArea = btnClickHandlerParam.kaitiArea; if var jietiArea = btnClickHandlerParam.jietiArea(!t) return; toogleCellAreaVisible(spreadsheetReport, kaitiArea, true); if toogleCellAreaVisible(spreadsheetReport, jietiArea, false); }; // "结题"按钮的click事件处理函数 function doJietiButtonClick(e, btnClickParam) {t.innerText == '收入') { // debugger; var btnClickHandlerParam = btnClickParam || this D4.style.backgroundColor = '#CE2B2B'; var spreadsheetReport = btnClickHandlerParam.spreadsheetReport; var kaitiArea = btnClickHandlerParam.kaitiArea; var jietiArea = btnClickHandlerParam.jietiArea; toogleCellAreaVisible(spreadsheetReport, jietiArea, true); toogleCellAreaVisible(spreadsheetReport, kaitiArea, false); }; // 显示|隐藏指定区域的所有行 function toogleCellAreaVisible(spreadsheetReport, areaPos, show) {F4.style.backgroundColor = '#95D0D9'; // debugger; var topLeft = spreadsheetReport.parseCellIndex(areaPos.topLeft); var bottomRight = spreadsheetReport.parseCellIndex(areaPos.bottomRight)D4.style.color = '#ffffff'; for (i = topLeft[0]; i <= bottomRight[0]; i++) { // var tdF4.style.color = spreadsheetReport.getCell(i, 0); '#727272'; if (td) { var tr = td.parentNode; trspreadsheetReport.shapesMap["收入柱图"].style.display = show ? "": "none"; // 隐藏图形 var charts = tr.getElementsByTagName("img"); for (j = 0; j < charts.length; j++) { var chart = charts[j]; chartspreadsheetReport.shapesMap["支出饼图"].style.display = show ? "": "none"; } } } }; |
CmcclabsClientUtils模块:
代码块 | ||
---|---|---|
| ||
/** * 对日期格式化 * DateFormat("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 * DateFormat("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04else if (t.innerText == '支出') { * DateFormat("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04 * DateFormat("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04 * DateFormat("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 */ function DateFormat(dt, fmt) { var o = { "M+": dt.getMonth() + 1, D4.style.backgroundColor = '#95D0D0'; //月份 "d+": dt.getDate(), //日 "h+": dt.getHours() % 12 == 0 ? 12 : dt.getHours() % 12,F4.style.backgroundColor = '#CE2B2B'; //小时 "H+": dt.getHours(), //小时 "m+": dt.getMinutes(), //分 "s+": dt.getSeconds(),D4.style.color = '#727272'; //秒 "q+": Math.floor((dt.getMonth() + 3) / 3),F4.style.color = '#ffffff'; //季度 "S": dt.getMilliseconds() //毫秒 }; var week = { "0": "/u65e5", "1": "/u4e00", "2": "/u4e8c", "3": "/u4e09", "4": "/u56db", "5": "/u4e94", "6": "/u516d" }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (dt.getFullYear() + "").substr(4 - RegExp.$1.length)) spreadsheetReport.shapesMap["收入柱图"].style.display = "none"; } if (/(E+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f": "/u5468") : "") + week[dt.getDay() + ""]); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))) spreadsheetReport.shapesMap["支出饼图"].style.display = ""; } } return fmt; }; |
...