javascript - 将 Google 图表另存为 SVG？

Question

新的 Google Chart API 将图表创建为 SVG（而不是过去的 PNG）。我希望能够保存生成的 SVG。我怎样才能做到这一点？

如果我使用 Chrome 检查页面上的元素，我可以找到包含 SVG 的 svg 标签。我希望能够使用 JavaScript 获取生成的 SVG。我不想在 JavaScript 中搜索 svg 标记的 HTML 源代码，如果有办法直接从图表对象（可能是 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。我总是乐于接受更好的解决方案。

（感谢直到建议.outerHTML结束.parentNode.innerHTML）

Answer 2

您还可以使用Google Chrome DevTools，尤其是元素选择器，然后您可以直接从 DOM 复制/粘贴您要查找的 SVG。