在demo 的“销售经营分析”报表中，有如下的图形切换效果
通过点击左侧的两个单元格，可以切换右侧的线图。
本文档说明如何实现这样的切换效果，本文档中示例如下：
注：此示例中涉及到宏代码，宏代码仅供参考
1.创建数据集
新建两个数据集，一个查询出2013年的数据，一个查询出2014年的数据。预览如下：
2013年
2014年
2.创建电子表格
新建电子表格
在sheet2中将13年数据集的字段拖拽到单元格中，并设置好单元格属性。
在sheet3中将14年数据集 的字段拖拽到单元格中，并设置好单元格属性。
3.创建2013年线图
（1）在sheet2中，选择A2：B3单元格，点击工具栏上的“图形”按钮，插入线图
如下：
（2）在线图上右键-》设置，进入图形设置界面
切换到“标题”页签，设置标题为“2013年销售量”，字体大小为14，并居中显示
（3）选中线图，在左上角的框中，输入“13年线图”，按回车保存文字
4.创建2014年线图
（1）在sheet3中，选择A2：B3单元格，点击工具栏上的“图形”按钮，插入线图
如下：
（2）在线图上右键-》设置，进入图形设置界面
切换到“标题”页签，设置标题为“2014年销售量”，字体大小为14，并居中显示
（3）选中线图，在左上角的框中，输入“14年线图”，按回车保存文字
5.设置展示sheet
（1）在sheet1中，设置表样如下：
（2）在sheet2中的线图上右键->移动或复制，将其移动到sheet1中。
如下：
（3）同理，将sheet3中14年线图移动到sheet1中。
（4）对sheet1进行调整，使得两个线图叠放在一起。如下：
6.设置点击切换图形
保存该报表后，在报表上右键-》编辑宏，进入报表宏界面。
新建客户端模块，对象选择“spreadsheetReport”,事件选择“onRender”，并将以下宏代码拷贝到宏代码区域中。注意宏代码需要根据实际情况进行修改。
| 类型 | 对象 | 事件 |
|---|---|---|
| 客户端 | spreadsheetReport | onRender |
function main(spreadsheetReport) {
var index = spreadsheetReport.currentSheetIndex;
if (index != 0) //判断是不是第一个sheet
return;
var button_13 = spreadsheetReport.getCell(2, 1); //获取B3单元格，getCell(行号，列号)，行号和列号从0开始算起
var button_14 = spreadsheetReport.getCell(4, 1); //获取B5单元格
button_13.style.cursor = "pointer";
button_14.style.cursor = "pointer";
//初始设置2014年图形展示，隐藏
spreadsheetReport.shapesMap["13年线图"].parentNode.style.display = ""; //设置13年线图显示
spreadsheetReport.shapesMap["14年线图"].parentNode.style.display = "none"; //设置14年线图显示
//为两个单元格添加点击事件
spreadsheetReport.addListener(button_13, "click", cellClick, spreadsheetReport);
spreadsheetReport.addListener(button_14, "click", cellClick, spreadsheetReport);
if (!spreadsheetReport.modifyCellValue) {
var SpreadsheetReport_Modify = jsloader.resolve('smartbi.spreadsheetreport.SpreadsheetReport_Modify');
new SpreadsheetReport_Modify(spreadsheetReport);
}
function cellClick(e) {
var t = e.target;
if (!t) return;
if (t.innerText == '2013年') { //如果点击的是B3单元格，其内容为"2013年"，那么设置13年线图显示，14年线图隐藏
button_13.style.backgroundColor = '#333F50'; //设置B3单元格填充颜色
button_14.style.backgroundColor = '#D9D9D9';
spreadsheetReport.shapesMap["13年线图"].parentNode.style.display = "";
spreadsheetReport.shapesMap["14年线图"].parentNode.style.display = "none";
} else if (t.innerText == '2014年') { //如果点击的是B5单元格，其内容为"2014年"，那么设置14年线图显示，13年线图隐藏
button_13.style.backgroundColor = '#D9D9D9';
button_14.style.backgroundColor = '#333F50';
spreadsheetReport.shapesMap["13年线图"].parentNode.style.display = "none";
spreadsheetReport.shapesMap["14年线图"].parentNode.style.display = "";
}
}
} |
注意事项：
1、该代码不兼容某些版本的谷歌浏览器，可以将代码里面的innerText都换成textContent尝试解决；
2、表样中的B3、B5单元格是绝对的固定位置，因此在这两个单元格不能被周围的扩展单元格影响，尤其是对于有参数的情况，切换参数查询的结果集行数不一样可能导致B3、B5的单元格绝对位置发生偏移，最终会导致宏代码不生效，制作报表时应避免发生这种情况。