javascript - GoogleチャートをSVGとして保存しますか？

Question

新しいGoogleChartAPIは、グラフをSVGとして作成します（以前のPNGではありません）。生成されたSVGを保存できるようにしたいと思います。これどうやってするの？

Chromeを使用してページ上の要素を検査すると、SVGを保持するsvgタグを見つけることができます。JavaScriptを使用して生成されたSVGを取得できるようにしたいと思います。HTMLソースでJavaScriptのsvgタグを検索したくないのですが、チャートオブジェクト（おそらくChartWrapperクラス？）からSVG文字列を直接取得する方法がある場合はそれが望ましいでしょう。

Answer 1

どうやら、これはGoogle Charts API（参照1、2、および3 ）ではサポートされていません。回避策としてSVG文字列を取得するために、以下のハックを作成しました。以下は完全な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].outerHTML);
}

google.setOnLoadCallback(drawVisualization);

Google Charts APIはIEでSVGを使用しないため、これはIEでは機能しないことに注意してください。私は常により良い解決策を受け入れています。

（提案してくれたuntillに感謝し.outerHTML.parentNode.innerHTMLます）

Answer 2

また、Google Chrome DevTools、特に要素セレクターを使用して、探しているSVGをDOMから直接コピーして貼り付けることもできます。