SpreadJS在线表格编辑器自定义功能 -- 添加新建图表下拉按钮（Dropdown）
本帖最后由 dexteryao 于 2021-2-3 17:09 编辑前言：组件版设计器提供图表功能，用户通过工具栏可以很方便的插入图表。
大家可能会注意到这与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);
// sheet.charts.add("", GC.Spread.Sheets.Charts.ChartType, 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);
页:
[1]