0
151
VistasCómo implementar Guardar como PNG en Vega usando un menú personalizado
Estoy creando un tablero de datos usando Vega para visualizar los resultados y, para lograrlo, eliminé el menú desplegable de acciones y lo reemplacé con un sistema de menú personalizado. Sin embargo, me gustaría incorporar la opción "Guardar como PNG" que existe en el menú desplegable original (ejemplo provisto en la imagen a continuación) en mi propio menú, ya que asumo que la arquitectura para crear la imagen ya existe, funciona bien y debería ser relativamente fácil de portar. Pero no tengo idea de cómo podría hacer para hacer referencia a esas acciones por separado del menú original.
¿Cómo puedo vincular la funcionalidad Guardar como PNG a un botón que existe fuera del menú desplegable de acciones de Vega?
1 Respuestas
Responde la pregunta0
La API de vista de Vega tiene el método toImageURL() que permite a los usuarios descargar la imagen del gráfico como archivo PNG.
https://vega.github.io/vega/docs/api/view/#image-export
En un tablero, puede haber múltiples objetos de vista Vega para varios gráficos. Para el menú del tablero, aquí hay una función de ejemplo en javascript con el objeto de vista Vega y el nombre de archivo de descarga como argumentos:
function vegaDownloadChartImage(vegaView, downloadFileName){ vegaView.toImageURL('png').then(function(url) { var link = document.createElement('a'); link.setAttribute('href', url); link.setAttribute('target', '_blank'); link.setAttribute('download', downloadFileName); link.dispatchEvent(new MouseEvent('click')); }).catch(function(error) { /* error handling */ }); }Ejemplo de botón HTML para que el usuario descargue el archivo de imagen (myVegaChart1.png):
<button onclick="vegaDownloadChartImage(view_1, 'myVegaChart1')">Download PNG file</button>