Saltar al contenido

¿Creando el gráfico chart.js directamente en PNG en Node js?

Solución:

Chart.js se basa en el elemento canvas de HTML5.

Para usarlo en node.js, debe imitar este elemento en node.

Hay un paquete que intenta manejar todas las bibliotecas necesarias para este propósito, puede encontrarlo aquí chartjs-node

Tuve este problema y terminé construyendo un servicio web que representa los gráficos Chart.js como imágenes PNG. Abrí mi trabajo en esto

El servicio se llama QuickChart. Por ejemplo, si la configuración de su gráfico es:

{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dogs',
      data: [ 50, 60, 70, 180, 190 ]
    }, {
      label: 'Cats',
      data: [ 100, 200, 300, 400, 500 ]
    }]
  }
}

Puede incrustar la configuración Chart.js en la URL de la siguiente manera:

https://quickchart.io/chart?c= {tipo: ‘barra’, datos: {etiquetas: [‘January’, ‘February’, ‘March’, ‘April’, ‘May’], conjuntos de datos: [{ label: ‘Dogs’, data: [ 50, 60, 70, 180, 190 ] }, {etiqueta: ‘Gatos’, datos: [ 100, 200, 300, 400, 500 ] }]}}

… ¡y hace que su gráfico sea una imagen!

Tenga en cuenta que para gráficos más complejos, querrá codificar en URL las opciones del gráfico.

Hay un editor interactivo en el sitio web QuickChart que puede usar para generar una URL para una configuración de gráfico determinada. También puede ver / bifurcar el código fuente aquí (está construido sobre node-canvas y chartjs-node-canvas).

Puede crear una imagen desde Canvas usando toDataURL, por lo que después de que charts.js renderiza el gráfico en el lienzo (myChart)

var canvas = document.getElementById('myChart');
var dataURL = canvas.toDataURL();

dataURL no contendrá la cadena base64 de la imagen. Puede escribirlo en un archivo y usar el archivo o usar la cadena de cualquier otra manera.

Verifique esa referencia para convertir la cadena en un archivo de imagen si lo desea. https://gist.github.com/madhums/e749dca107e26d72b64d

Espero que esto sea lo que quieres decir que tenías que hacer.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *