Salva un grafico di Google come SVG?

Question

La nuova API di Google Chart crea grafici come SVG (non PNG come in passato). Mi piacerebbe essere in grado di salvare l'SVG generato. Come posso fare questo?

Se utilizzo Chrome per ispezionare elementi sulla pagina, posso trovare il tag svg che contiene SVG. Mi piacerebbe essere in grado di ottenere l'SVG generato utilizzando JavaScript. Preferirei non cercare nel codice HTML il tag svg in JavaScript, e se c'è un modo per ottenere direttamente la stringa SVG dall'oggetto grafico (forse la classe ChartWrapper?) Sarebbe preferibile.

Answer 1

Apparentemente, questo non è supportato dall'API Google Charts (riferimenti 1, 2 e 3). Ho creato il sotto hack per ottenere la stringa SVG come soluzione alternativa. Di seguito è riportato il codice 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); 

Si noti che questo non funziona in IE perché l'API di Google Charts non utilizza SVG in IE. Sono sempre aperto a soluzioni migliori.

Answer 2

È inoltre possibile utilizzare Google Chrome DevTools, in particolare il selettore di elementi, quindi è possibile copiare/incollare l'SVG che si sta cercando direttamente dal DOM.