¿Guardar un gráfico de Google como SVG?

Question

La nueva API Google Chart crea gráficos como SVG (no PNG como solía hacerlo). Me gustaría poder guardar el SVG generado. ¿Cómo puedo hacer esto?

Si utilizo Chrome para inspeccionar elementos en la página, puedo encontrar la etiqueta svg que contiene el SVG. Me gustaría poder obtener el SVG generado usando JavaScript. Preferiría no buscar en el código fuente HTML la etiqueta svg en JavaScript, y si hay una forma de obtener la cadena SVG directamente del objeto del gráfico (¿tal vez la clase ChartWrapper?) Sería preferible.

Answer 1

Aparentemente, esto no es compatible con la API de Google Charts (referencias 1, 2 y 3). Creé el truco de abajo para obtener la cadena SVG como una solución alternativa. A continuación se muestra el JavaScript completo.

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work', 11], 
     ['Eat', 2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
     ]); 

    // Create and draw the visualization. 
    var chart = new google.visualization.PieChart(document.getElementById('visualization')); 
    google.visualization.events.addListener(chart, 'ready', allReady); // ADD LISTENER 
    chart.draw(data, {title:"So, how was your day?"}); 
} 

function allReady() { 
    var e = document.getElementById('visualization'); 
    // svg elements don't have inner/outerHTML properties, so use the parents 
    alert(e.getElementsByTagName('svg')[0].parentNode.innerHTML); 
} 

google.setOnLoadCallback(drawVisualization); 

Tenga en cuenta que esto no funciona en IE porque la API de Google Charts no utiliza SVG en IE. Siempre estoy abierto a mejores soluciones.

Answer 2

También puede usar Google Chrome DevTools, especialmente el selector de elementos, luego puede copiar/pasar el SVG que está buscando directamente desde el DOM.