Bir Google Grafiği SVG olarak kaydetme?

Question

Yeni Google Grafik API'sı, grafikleri SVG olarak oluşturur (alışkın olduğu gibi PNG'ler değil). Oluşturulan SVG'yi kaydedebilmek istiyorum. Bunu nasıl yapabilirim?

Sayfadaki öğeleri incelemek için Chrome'u kullanırsam, SVG'yi tutan svg etiketini bulabilirim. JavaScript'i kullanarak oluşturulan SVG'yi elde etmek istiyorum. JavaScript'deki svg etiketi için HTML kaynağında arama yapmamayı tercih ederim ve SVG dizesini tercih edilen grafik nesnesinden (belki ChartWrapper sınıfı?) Doğrudan elde etmek için bir yol varsa.

Answer 1

Görünüşe göre, bu Google Grafikler API'sı tarafından desteklenmiyor (1, 2 ve 3 referansları). SVG dizesini bir geçici çözüm olarak almak için aşağıdaki hack'i oluşturdum. Aşağıda tam JavaScript. Google Charts API IE SVG kullanmadığı için bu IE çalışmadığını

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); 

Not. Her zaman daha iyi çözümlere açığım.

Answer 2

Google Chrome DevTools, özellikle öğe seçicisini kullanabilirsiniz, daha sonra doğrudan DOM'dan aradığınız SVG'yi kopyalayabilir/yapıştırabilirsiniz.