将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].parentNode.innerHTML); 
} 

google.setOnLoadCallback(drawVisualization); 

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

Answer 2

您也可以使用Google Chrome DevTools，特别是元素选择器，然后您可以直接从DOM中复制/越过要查找的SVG。