Zapisywanie wykresu Google jako SVG?

Question

Nowy interfejs API wykresów Google tworzy wykresy jako obrazy SVG (nie takie jak PNG). Chciałbym móc zapisać wygenerowany SVG. Jak mogę to zrobić?

Jeśli używam Chrome do sprawdzania elementów na stronie, mogę znaleźć tag SVG, który zawiera SVG. Chciałbym móc wygenerować SVG przy użyciu JavaScript. Wolałbym nie wyszukiwać źródła HTML dla tagu svg w JavaScript i czy istnieje sposób, aby uzyskać ciąg SVG bezpośrednio z obiektu wykresu (być może z klasy ChartWrapper?), Który byłby lepszy.

Answer 1

Najwyraźniej nie jest to obsługiwane przez Google Charts API (odnośniki: 1, 2 i 3). Stworzyłem poniższy hack, aby uzyskać ciąg znaków SVG jako obejście tego problemu. Poniżej znajduje się pełny JavaScript.

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

Należy zauważyć, że to nie działa w IE, ponieważ Google Charts API nie używa SVG w IE. Zawsze jestem otwarty na lepsze rozwiązania.

Answer 2

Możesz także użyć Google Chrome DevTools, szczególnie selektora elementów, a następnie możesz skopiować/przeszukać SVG, którego szukasz bezpośrednio z DOM.