组件版设计器自定制 - 重写插入图表

背景：
客户在使用designer的插入图表功能时，有这样的业务需求：
当用户选中两列数据时，点击插入图表按钮，此时会作出相应提示，禁止插入；
当用户选中非两列数据时，可以正常插入图表。


思路：
插入图表按钮对应的command为 insetChart，先看看这个command是什么


重写其中的excute方法，获取当前选择的区域信息，判断如果为2列，则弹窗提示；如果不为两列，则执行原insertChart代码逻辑。

1. var newInsertChartCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.InsertChart);
   
2.             if (newInsertChartCommand) {
   
3.                 var oldExecute = newInsertChartCommand.execute;
   
4.                 newInsertChartCommand.execute = function (context, propertyName, args) {
   
5.                     //添加confirm逻辑
   
6.                     console.log("重写插入图表逻辑");
   
7.                     // 判断当前选择区域的列数
   
8.                     var activeSheet = context.getWorkbook().getActiveSheet();
   
9.                     var sel = activeSheet.getSelections()[0];
   
10.                     if(sel.colCount != 2) {
    
11.                         oldExecute.call(this, context, propertyName, args);
    
12.                     } else {
    
13.                         alert("数据为2列，禁止插入");
    
14.                     }
    
15.                 }
    
16.             }

复制代码

将修改后的command重新注册

1. designerConfig.commandMap = {};
   
2.             designerConfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.InsertChart] = newInsertChartCommand;
   

复制代码

初始化deisgenr，来测试看看效果吧（见下方动图）

1. var designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container", designerConfig);

复制代码

附件为完整demo，供参考。