SpreadJS置顶所选择图表

背景：小伙伴最近提出这样一个需求，在多个图表叠加的前提下，希望可以自动置顶选中的图表，使使用者可以完整看到图表数据。

思路：
SpreadJS提供图表的zindex 属性，以此设置图表显示的优先级。
我们可以监听FloatingObjectSelectionChanged事件，在选中图表时触发该事件，执行更改图表zindex 的代码逻辑。


代码：

1. sheet.bind(GC.Spread.Sheets.Events.FloatingObjectSelectionChanged, function (e, info) {
   
2.             console.log(info);
   
3.             // typeName为2 表示为chart
   
4.             if(info.floatingObject.typeName == '2') {
   
5.                 // 获取选择的chart 的 name
   
6.                 var Selname = info.floatingObject.name();
   
7.                 // 设置选择的chart 的 zindex。（998只是示例，具体请自行设计）
   
8.                 sheet.charts.zIndex(Selname, 998);
   
9.                 // 遍历获取chart
   
10.                 var charts = sheet.charts.all();
    
11.                 for(var i=0; i<charts.length; i++) {
    
12.                     var name = charts[i].name();
    
13.                     if(name == Selname) {
    
14.                         continue;
    
15.                     }
    
16.                     // 设置其他chart index为小于998
    
17.                     sheet.charts.zIndex(name, 600);
    
18.                 }
    
19.             }
    
20.         });

复制代码

最终效果如下动图所示：

完整代码请查看附件。