| 注意 | ||
|---|---|---|
| ||
本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。 |
示例说明
我们在页面中可以实现如下效果。点击上方的“收入”，“支出”。可以切换对应的柱图和饼图。
展示收入数据
点击“支出”切换到支出饼图
设置方法
...
2.在浏览器的资源定制节点下，选中电子表格，右键选择 编辑宏 进入报表宏界面。
3.在报表宏界面新建客户端模块。在弹出的新建模块对话框中，选择对象为spreadSheetReport、事件为onRender、并把下面宏代码复制到代码编辑区域。
...
类型 | 对象 | 事件 |
|---|---|---|
ClientSide | spreadsheetReport | onRender |
宏代码
| 代码块 |
|---|
function main(spreadsheetReport) {
var index = spreadsheetReport.currentSheetIndex;
if (index != 0) //判断是不是第一个sheet
return;
var D4 = spreadsheetReport.getCell(3, 3);
var F4 = spreadsheetReport.getCell(3, 5);
//初始设置单元格背景色、字体颜色以及某个图形展示，隐藏
D4.style.backgroundColor = '#CE2B2B'; //当前展示的数据颜色
F4.style.backgroundColor = '#95D0D9'; //可点击展示数据的颜色
// D4.style.color = '#ffffff'; 设置字体颜色
// F4.style.color = '#727272';
// D4.style.textDecoration = 'underline'; //当前展示的数据带下划线
// F4.style.textDecoration = ''; //可点击展示的数据带下划线
spreadsheetReport.shapesMap["收入柱图"].style.display = "";
setTimeout(function(){
spreadsheetReport.shapesMap["支出饼图"].style.display = "none";
},100);
//为两个单元格添加点击事件
spreadsheetReport.addListener(D4, "click", cellClick, spreadsheetReport);
spreadsheetReport.addListener(F4, "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 == '收入') {
D4.style.backgroundColor = '#CE2B2B';
F4.style.backgroundColor = '#95D0D9';
// D4.style.color = '#ffffff';
// F4.style.color = '#727272';
// D4.style.textDecoration = 'underline'; //显示下划线
// F4.style.textDecoration = '';
spreadsheetReport.shapesMap["收入柱图"].style.display = "";
spreadsheetReport.shapesMap["支出饼图"].style.display = "none";
} else if (t.innerText == '支出') {
D4.style.backgroundColor = '#95D0D0';
F4.style.backgroundColor = '#CE2B2B';
// D4.style.color = '#727272';
// F4.style.color = '#ffffff';
// D4.style.textDecoration = '';
// F4.style.textDecoration = 'underline'; //显示下划线
spreadsheetReport.shapesMap["收入柱图"].style.display = "none";
spreadsheetReport.shapesMap["支出饼图"].style.display = "";
}
}
} |
...
注：其中shapesMap["收入柱图"]，这里的“收入柱图”就是图形在Excel中的名称
...
