Smartbi V7 帮助中心
页面树结构
转至元数据结尾
转至元数据起始

温馨提示

本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。

示例说明

我们在页面中可以实现如下效果。点击上方的“收入”，“支出”。可以切换对应的柱图和饼图。

展示收入数据


点击“支出”切换到支出饼图

        

设置方法

1.首先在电子表格设计器（Microsoft Office Excel）中，创建电子表格报表。如下：


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中的名称

  • 无标签

评论

  1. 刘俊 发表：

    如果电子表格中使用的是echarts图形，需要针对其父及对象设置显示和隐藏，因此需要将示例代码中的spreadsheetReport.shapesMap["收入柱图"].style.display改为spreadsheetReport.shapesMap["收入柱图"].parentNode.style.display，同理spreadsheetReport.shapesMap["支出饼图"].style.display 改为spreadsheetReport.shapesMap["支出饼图"].parentNode.style.display