我正在前端 React 应用程序中使用 Chart.js。我需要使用 Chart.js 创建一个绘图，以便我可以使用 pptxgen 将其附加到 powerpoint 幻灯片。该图像不必在视觉上呈现，我只需要在用户请求生成 ppt 时创建它即可。
图表需要上下文，因此我创建了一个画布元素来充当这样的角色，然后尝试渲染并导出 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");
chartEl.setAttribute("width", "400");
chartEl.setAttribute("height", "400");
chartEl.style.display = "none";
document.body.append(chartEl);
let chart = new Chart(chartEl, {
type: "bar",
data: {
datasets: [
{
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
data: [10, 20, 30, 40, 50, 60, 70]
}
]
},
options: {
scales: {},
animation: false
}
});
chart.render();
console.log(chart.toBase64Image());
chartEl.remove();
渲染图表而无需专门将其添加到 dom 的唯一方法是使用离屏画布，如 Chart.js 文档中所述： https://www.chartjs.org/docs/3.7.1/general/performance.html#parallel-rendering-with-web-workers-chromium-only
缺点是离屏画布 API 仅在基于 chromium 的浏览器中可用。
您可以采取的其他方法是将画布添加到dom，让chart.js渲染它，获取base64表示，然后直接删除画布，如下所示：
let ctx = document.createElement("canvas")
document.documentElement.appendChild(ctx)
ctx.setAttribute("width", "400")
ctx.setAttribute("height", "400")
let chart = new Chart(ctx, {
type: "bar",
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f', ' g'],
datasets: [{
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
data: [10, 20, 30, 40, 50, 60, 70]
}]
},
options: {
scales: {}
}
})
const base64 = chart.toBase64Image();
ctx.remove();
console.log(base64)<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>