Cómo exportar una gráfica de Highcharts de 3 maneras diferentes (del lado del cliente)

Cómo exportar una gráfica de Highcharts de 3 maneras diferentes (del lado del cliente)

Generalmente hay muchos problemas con los que lidiar a la hora de exportar una gráfica generada por Highcharts a una imagen durante la ejecución en el explorador. Por ejemplo la mala resolución, la imágen es generada pero incompleta, una gráfica personalizada no es exportada correctamente ... entre muchos otros.

En este artículo te ofrecemos la siguiente pieza de código para que la incluyas en tu proyecto (guardala en un archivo extra o simplemente agregalo dentro de un tag de script), este código te ofrece 3 métodos diferentes para exportar una imágen a partir de una gráfica de Highcharts fácilmente.

Nota

El siguiente código asume que ya tienes incluido jQuery (que de cierta manera es opcional pues puedes cambiar el tipo de selectores en el código) y el archivo Highcharts_export.js (requerido por 2 de los métodos proporcionados) que puede ser descargado aquí. Este código tiene como meta, ayudarte con la generación de una imágen a partir de una gráfica de Highcharts (canvas) o de SVG, puedes usar y compartir este código como quieras.

/**
  * Highcharts funciones para exportar imágen en el explorador
  * @author Our Code World
  */
 (function(window){
    
    function ExportInitializator(){
        var exp = {};
        
 
        var EXPORT_WIDTH = 1000;  // Exportation width
        
		
		/**
		 * Este método requiere el archivo highcharts_export.js
		 */
        exp.highchartsSVGtoImage = function(chart,callback) {
            var svg = chart.highcharts().getSVG();
            var canvas = document.createElement('canvas');
            canvas.width = chart.width();
            canvas.height = chart.height();
            var ctx = canvas.getContext('2d');

            var img = document.createElement('img');

            img.onload = function() {
                ctx.drawImage(img, 0, 0);
                callback(canvas.toDataURL('image/png'));
            };

            img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))));
        };
        
        /**
		 * Este método requiere el archivo highcharts_export.js
		 */
        exp.highchartsCustomSVGtoImage = function(chart,callback){
            if(!chart){
                console.error("No chart given ");
            }
            var render_width = EXPORT_WIDTH;
            var render_height = render_width * chart.chartHeight / chart.chartWidth;

            var svg = chart.getSVG({
                exporting: {
                    sourceWidth: chart.chartWidth,
                    sourceHeight: chart.chartHeight
                }
            });
            
 
            
            var canvas = document.createElement('canvas');
            canvas.height = render_height;
            canvas.width = render_width;
            var image = new Image();
            image.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)));
            console.log(image);
            image.addEventListener('load', function() {
                console.log(chart);
                canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
                callback(canvas.toDataURL('image/png'));
            }, false);

            image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
        };
         
		
		/**
		 * Este método requiere el archivo highcharts_export.js
		 */
        exp.nativeSVGtoImage = function(DOMObject,callback,format){
            if(!DOMObject.nodeName){
                throw new error("Se requiere un objeto DOM de tipo SVG. Obtener con document.getElementById o un selector de jQuery $(contenedor).find('svg')[0]");
            }
                    
            var svgData = new XMLSerializer().serializeToString(DOMObject);
            var canvas = document.createElement("canvas");
            canvas.width = $(DOMObject).width();
            canvas.height = $(DOMObject).height();
            var ctx = canvas.getContext( "2d" );
            var img = document.createElement("img");
            img.setAttribute( "src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))) );
            img.onload = function() {
                ctx.drawImage( img, 0, 0 );
                
                if(format === "jpeg" || format === "jpg"){
                    callback(canvas.toDataURL("image/jpeg"));
                }else{
                    callback(canvas.toDataURL("image/png"));
                }
            }; 
            return true;
        };
        
        return exp;
    }
    
    if(typeof(highchartsExport) === 'undefined'){
        window.highchartsExport = new ExportInitializator();
    }
})(window);

highchartsSVGtoImage

Este método espera un selector de jQuery de Highcharts (o una variable que contiene un objeto de Highcharts) y ejecuta el método getSVG en este. Una imágen es creada con el resultado generado por el SVG, luego se crea un canvas y la imágen es renderizada en este de tal manera que puedes crear una URI en base64 de este del canvas (las dimensiones de esta imágen son las mismas que las del contenedor SVG).

Nota

Esta función es asíncrona.

Uso

highchartsExport.highchartsSVGtoImage($("#myChartContainer"),function(uri){
   window.open(uri);
});

highchartsCustomSVGtoImage

Este método espera un selector de jQuery que ejecuta la función highcharts. A partir de ese argumento, el método getSVG es ejecutado, se crea una imágen con el SVG exportado, despues dibujado en un canvas y finalmente exportado. A diferencia del método anterior, las dimensiones de la imágen son dadas por la propiedad EXPORT_WIDTH declarada al inicio del script.

Usage

highchartsExport.highchartsCustomSVGtoImage($("#myChartContainer").highcharts(),function(uri){
   window.open(uri);
});

nativeSVGtoImage

Este método espera como primer argumento un objeto SVG del documento (DOM SVG Node). Una imágen es creada a partir de el SVG (que es interpretado por la clase XMLSerializer disponible en el explorador), luego se crea un canvas y la imágen es renderizada en este. A partir del canvas se puede generar la URI base64.

Nota

Esta función es asíncrona, por lo tanto el segundo parametro es una función que se ejecuta cuando la imágen está lista y recibe como primer argumento la URI en formator base64.

Uso

highchartsExport.nativeSVGtoImage($("#myChartContainer").find("svg")[0],function(uri){
   window.open(uri);
},'png');

Tienes más métodos para exportar una imágen de Highcharts del lado del cliente? Compartela con la comunidad en la caja de comentarios.

Esto podría ser de tu interes

Conviertete en un programador más sociable