我正在使用前端 React 应用程序中的 Chart.js。我需要使用 Chart.js 创建一个绘图,以便我可以使用 pptxgen 将其附加到 powerpoint 幻灯片。该图像不必在视觉上呈现,我只需要在用户请求生成 ppt 时创建它。
图表需要上下文,因此我创建了一个 canvas 元素来充当这样的角色,然后尝试渲染并导出 Base64 图像,然后将其输入到 pptxgen 中:
let ctx = document.createElement("canvas")
ctx.setAttribute("width", "400")
ctx.setAttribute("height", "400")
let chart: Chart = new Chart(ctx, {
type: "bar",
data: {
datasets: [{
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
data: [10, 20, 30, 40, 50, 60, 70]
}]
},
options: {
scales: {}
}
} )
chart.render()
console.log(chart.toBase64Image())
但我获得的只是“数据:;”这看起来是一个空图像。
你知道如何让它渲染吗?
如果不将画布附加到 dom,则无法渲染,但您可以隐藏它,它会按预期工作。
const chartEl = document.createElement("canvas");
const ctx = chartEl.getContext("2d");
chartEl.setAttribute("width", "400");
chartEl.setAttribute("height", "400");
chartEl.style.display = "none";
document.body.append(chartEl);
let chart = new Chart(ctx, {
type: "bar",
data: {
datasets: [
{
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
data: [10, 20, 30, 40, 50, 60, 70]
}
]
},
options: {
scales: {}
}
});
chart.render();
console.log(chart.toBase64Image());
chartEl.remove();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)