Convierte el Geochart de Google a una imagen (JPEG, PNG, etc.) o PDF en el navegador

Question

Estoy usando Google GeoCharts (https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview) generar dinámicamente mapas codificados por colores en el navegador. La apk geochart dibuja los mapas usando javascript/svg ... ¿algún consejo para generar un archivo de imagen exportable? (pdf, imagen ráster, etc.)

¿Se puede hacer esto a través de geocharts de google? Si no, ¿hay otro servicio que pueda recomendar?

* Anteriormente utilizábamos GeoMaps pero la resolución no era adecuada.

Answer 1

Esto se puede hacer siguiendo los pasos en this page. Tenga en cuenta que el código en el artículo se basa en una versión anterior de Google Visualization que utilizó iframes y no funcionará según lo publicado. Sin embargo, se puede hacer lo mismo con el siguiente código (que se encuentra en los comentarios):

var svg = $(chartContainer).find('svg').parent().html(); 
var doc = chartContainer.ownerDocument; 
var canvas = doc.createElement('canvas'); 
canvas.setAttribute('style', 'position: absolute; ' + ''); 
doc.body.appendChild(canvas); 
canvg(canvas, svg); 
var imgData = canvas.toDataURL("image/png"); 
canvas.parentNode.removeChild(canvas); 
return imgData; 

Nota: Yo no he creado este código, que fue creado originalmente por el autor de la página anterior (Riccardo Govoni) y actualizado en la sección de comentarios por el usuario Thomas.

Answer 2

Esto es muy posible; Hago esto explotando el SVG al convertidor de imágenes de Highcharts. Simplemente encuentra el código svg en la página y lo envía al servidor de exportación Highcharts junto con un parámetro de tipo (por ejemplo, image/jpeg), como ancho y el nombre del archivo para guardarlo.

Único inconveniente: IE no está renderizando SVG sino VML para visualizaciones de Google. Todavía no hay ninguna solución, pero parece que Highcharts también tiene dificultades con las conversiones de IE y VML a SVG. Así que no tengo suerte, me temo.

<form method="post" action="http://export.highcharts.com/" id="imageGetForm"> 
<input type="hidden" name="filename" value="savedFromGoogleVisualization" /> 
<input type="hidden" name="type" id="imageGetFormTYPE" value="" /> 
<input type="hidden" name="width" value="900" /> 
<input type="hidden" name="svg" value="" id="imageGetFormSVG" /> 
</form> 

y ejecutar la siguiente secuencia de comandos:

ejemplo

var svg=document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode.innerHTML; 
$('#imageGetFormTYPE').val('image/jpeg');//e.g. image/jpeg application/pdf etc 
$('#imageGetFormSVG').val(svg); 
$('#imageGetForm').submit(); 

Trabajar aquí: http://jsfiddle.net/P6XXM/