SpreadJS置顶所选择图表

收藏 · 2021-11-30 09:45 上传

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

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

代码：

sheet.bind(GC.Spread.Sheets.Events.FloatingObjectSelectionChanged, function (e, info) {
console.log(info);
// typeName为2 表示为chart
if(info.floatingObject.typeName == '2') {
// 获取选择的chart 的 name
var Selname = info.floatingObject.name();
// 设置选择的chart 的 zindex。（998只是示例，具体请自行设计）
sheet.charts.zIndex(Selname, 998);
// 遍历获取chart
var charts = sheet.charts.all();
for(var i=0; i<charts.length; i++) {
var name = charts[i].name();
if(name == Selname) {
continue;
}
// 设置其他chart index为小于998
sheet.charts.zIndex(name, 600);
}
}
});

复制代码

最终效果如下动图所示：

完整代码请查看附件。

		自动登录	找回密码
密码			立即注册

SpreadJS置顶所选择图表

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人