Estoy usando chart.js desde una aplicación de reacción de interfaz. Necesito crear un gráfico con chart.js para poder adjuntarlo a una diapositiva de PowerPoint con pptxgen. Esta imagen no tiene que ser renderizada visualmente, solo necesito crearla cuando el usuario solicite generar el ppt.
El gráfico necesita un contexto, así que creé un elemento de lienzo para que actuara como tal, luego traté de renderizar y exportar la imagen base64 que luego procedería a introducir en 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())Pero todo lo que obtengo es "datos:;" que parece ser una imagen vacía.
¿Sabes cómo hacer que se renderice?
La única forma de representar un gráfico sin que lo agregue específicamente al dom es haciendo uso del lienzo fuera de pantalla como se explica aquí en la documentación de chart.js: https://www.chartjs.org/docs/3.7.1 /general/performance.html#parallel-rendering-with-web-workers-chromium-only
La desventaja es que la API de lienzo fuera de pantalla solo está disponible en navegadores basados en cromo.
Otro enfoque que puede tomar es agregar el lienzo al dom, dejar que chart.js lo represente, obtener la representación base64 y luego eliminar el lienzo directamente después de eso:
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>no es posible renderizar sin adjuntar un lienzo a dom, pero puede ocultarlo y funcionará como se esperaba.
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();