【14】图表导出图片的时候，变更图表的底色

有点东西

有一个底色为白色的图表，在导出成图片时候，要将它变更了底色后再导出，但是原图表不变

想法：
将这个图表复制到新增的一个sheet上，变更了颜色后，导出
现在的问题就是变更了颜色后，没办法导出

实现的代码：
let chart1 = sheet.charts.all()[0];
if (!chart1) {
return;
}

let copySheetName = "copySheet";

spread.addSheet(spread.getSheetCount(), new GC.Spread.Sheets.Worksheet(copySheetName));
spread.commandManager().execute({cmd: "copyFloatingObjects", sheetName: sheet.name() });
spread.commandManager().execute({cmd: "pasteFloatingObjects", sheetName: copySheetName});

let copysheet = spread.getSheetFromName(copySheetName);
let backColor = "#ffffff";
let chart = copysheet.charts.all()[0];
let chartArea = chart.chartArea();
chartArea.backColor = backColor;
chart.chartArea(chartArea);

// 这句话报错了
let canvas = chart.getHost()[0].querySelector("canvas");
let imgUrl = canvas.toDataURL("image/png");
const a = document.createElement('a')
a.href = imgUrl
a.setAttribute('download', dataKey)
a.click()

spread.removeSheetTab(copySheetName);

有点东西 · 有点东西

ymslx_sjs 发表于 2022-9-3 09:23
原chart是不变更任何样式的，所以才想要复制一个出来，把复制出来的那个变更样式再导出成图片

可以参考这个demo
image.png306383666.png

Richard.Ma · Richard.Ma

本帖最后由 Richard.Ma 于 2022-9-2 17:53 编辑

原因是canvas必须显示在浏览器窗口中时，才能被获取到

其实你也不用复制一个sheet出来，直接就在当前sheet操作就行

let chart=sheet.charts.all()[0];
let chartArea = chart.chartArea();
chartArea.backColor = "red";
chart.chartArea(chartArea);
chart.getHost()[0].querySelector("canvas")
let imgUrl = canvas.toDataURL("image/png");
chartArea = chart.chartArea();

复制代码

ymslx_sjs · ymslx_sjs

Richard.Ma 发表于 2022-9-2 17:51
原因是canvas必须显示在浏览器窗口中时，才能被获取到

其实你也不用复制一个sheet出来，直接就在当前she ...

原chart是不变更任何样式的，所以才想要复制一个出来，把复制出来的那个变更样式再导出成图片

Richard.Ma · Richard.Ma

本帖最后由 Richard.Ma 于 2022-9-5 09:34 编辑

嗯，如果担心会破坏原有样式的话，楼上提供的新增一个sheet的办法也可以解决问题，但是同样的，也需要setActiveSheet为新复制的sheet，显示出来，获取base64后后再删除这个sheet
上述的两个方案，实际上在显示器窗口中都看不出chart或者sheet被更改的，你可以测试看看

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

[已处理] 【14】图表导出图片的时候，变更图表的底色

最佳答案

4 个回复

悬赏达人

SpreadJS 认证

SpreadJS 高级认证

讲师达人