SpreadJS在线表格编辑器自定义功能 -- 添加新建图表下拉按钮（Dropdown）

前言：组件版设计器提供图表功能，用户通过工具栏可以很方便的插入图表。
大家可能会注意到这与Excel的UI设计有所不同，如果我们想实现Excel这种UI设计该如何操作呢？
下面就让我们借助组件版设计器强大的定制能力来实现下图效果吧！


---- 在前面的文章中我们有提到过如何自定义dropDown，整体思路大致相同，大家也可以先阅读了解下。 ----

1、获取 designerConfig

var designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))

2、定义命令

iconClass 示例：
.ribbon-button-lineStacked {
    background-size: contain;
    background-image: url(data:image/png;base64,iV.......)
}

var ribbonChartCommands = {
    "columnChart": {
        iconClass: "ribbon-button-column-little",
        type: "dropdown",
        commandName: "chart_List",
        dropdownList:[
            {
                groupName: "二维柱形图",
                groupItems: [
                    {
                        iconClass: "ribbon-button-columnClustered",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "簇状柱形图",
                        value: "columnClustered"
},
                    {
                        iconClass: "ribbon-button-columnStacked",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "堆积柱形图",
                        value: "columnStacked"
},
                    {
                        iconClass: "ribbon-button-columnStacked100",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "百分比堆积柱形图",
                        value: "columnStacked100"
}
                ]
            },
            {
                groupName: "二维条形图",
                groupItems: [
                    {
                        iconClass: "ribbon-button-barClustered",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "簇状条形图",
                        value: "barClustered"
},
                    {
                        iconClass: "ribbon-button-barStacked",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "堆积条形图",
                        value: "barStacked"
},
                    {
                        iconClass: "ribbon-button-barStacked100",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "百分比堆积条形图",
                        value: "barStacked100"
}
                ]
            }
        ],
        dropdownMaxHeight: 500,
        dropdownMaxWidth: 260,
        execute: async function (context, selectValue) {
            if(!selectValue) return;
            addChart(context, selectValue);
        }
    },
    "lineChart": {
        iconClass: "ribbon-button-line-little",
        type: "dropdown",
        commandName: "chart_List",
        dropdownList:[
            {
                groupName: "折线图",
                groupItems: [
                    {
                        iconClass: "ribbon-button-line",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "折线图",
                        value: "line"
},
                    {
                        iconClass: "ribbon-button-lineStacked",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "堆积折线图",
                        value: "lineStacked"
},
                    {
                        iconClass: "ribbon-button-lineMarkers",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "数据点折线图",
                        value: "lineMarkers"
}
                ]
            },
            {
                groupName: "面积图",
                groupItems: [
                    {
                        iconClass: "ribbon-button-area",
                        iconHeight: 50,
                        iconWidth: 50,
                        tip: "面积图",
                        value: "area"
}
                ]
            }
        ],
        dropdownMaxHeight: 500,
        dropdownMaxWidth: 260,
        execute: async function (context, selectValue) {
            if(!selectValue) return;
            addChart(context, selectValue);
        }
    }
}

3、在 addChart 方法添加 生成图表 的代码逻辑

function addChart(designer, type) {
    setTimeout(function () {
        var spread = designer.getWorkbook();
        var sheet = spread.getActiveSheet();
        // var range = sheet.getSelections();
        // var rangeStr = GC.Spread.Sheets.CalcEngine.rangeToFormula(range[0]);
        // sheet.charts.add("", GC.Spread.Sheets.Charts.ChartType[type], 0, 100, 400, 300, rangeStr);
var commandManager = spread.commandManager();
        commandManager.execute({cmd: "customAddChart", sheetName: sheet.name(), chartType: type});

    },10)}

4、将命令注册到config的commandMap属性上。

designerConfig.commandMap = {}
Object.assign(designerConfig.commandMap, ribbonChartCommands)

5、修改默认的 designerConfig

    designerConfig.ribbon[1].buttonGroups[1].commandGroup = {};
    designerConfig.ribbon[1].buttonGroups[1].commandGroup.children = [
        {
            commands: ["insertChart"]
        },
        {
            commands: ["columnChart", "lineChart"],
            direction: "vertical"
},
    ]

6、刷新designer

var designer = new GC.Spread.Sheets.Designer.Designer(
    document.getElementById('ssDesigner'), /**designer host */
designerConfig, // designerConfigJson /**If you want to change Designer's layout or rewrite it, you can pass in your own Config JSON */ ,
undefined /**If you want to use the spread you already created instead of generating a new spread, pass in */
);

7、支持撤销操作

var spread = designer.getWorkbook();var addChartCommand = {
    canUndo: true,
    execute: function (context, options, isUndo) {
        var Commands = GC.Spread.Sheets.Commands;
        if (isUndo) {
            Commands.undoTransaction(context, options);
            return true;
        } else {
            Commands.startTransaction(context, options);
            var sheet = context.getSheetFromName(options.sheetName);
            var range = sheet.getSelections();
            var rangeStr = GC.Spread.Sheets.CalcEngine.rangeToFormula(range[0]);
            var type = options.chartType;
            sheet.charts.add("", GC.Spread.Sheets.Charts.ChartType[type], 0, 100, 400, 300, rangeStr);
            Commands.endTransaction(context, options);
            return true;
        }
    }
};

var commandManager = spread.commandManager();
commandManager.register("customAddChart", addChartCommand);