示例说明(仅供参考，不一定适用于所有浏览器)

在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的单元格绝对位置发生偏移，最终会导致宏代码不生效，制作报表时应避免发生这种情况。