将Google Chart保存为SVG？

Question

新的Google Chart API会将图表创建为SVG（而不是以前的PNG）。我希望能够保存生成的SVG。我怎么能这样做？

如果我使用Chrome检查页面上的元素，我可以找到包含SVG的svg标记。我希望能够使用JavaScript获取生成的SVG。我不想在JavaScript中搜索HTML源代码中的svg标记，如果有一种方法可以直接从图表对象（可能是ChartWrapper类？）中获取SVG字符串，那将是更好的选择。

Answer 1

显然，Google Charts API（参考1，2和3）不支持此功能。我创建了下面的hack来获取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);

请注意，这在IE中不起作用，因为Google Charts API在IE中不使用SVG。我总是愿意接受更好的解决方案。

（thanks to untill for suggesting .outerHTML over .parentNode.innerHTML）

Answer 2

您也可以使用Google Chrome DevTools，尤其是元素选择器，然后您可以直接从DOM中复制/浏览您正在寻找的SVG。