12

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

如果我使用 Chrome 检查页面上的元素,我可以找到包含 SVG 的 svg 标签。我希望能够使用 JavaScript 获取生成的 SVG。我不想在 JavaScript 中搜索 svg 标记的 HTML 源代码,如果有办法直接从图表对象(可能是 ChartWrapper 类?)获取 SVG 字符串,那将是更可取的。

4

2 回答 2

12

显然,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

于 2012-10-02T21:55:08.417 回答
1

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

谷歌浏览器开发工具截图

于 2017-02-13T09:17:32.957 回答