将Google Chart保存为SVG?

Cor*_*lks 12 javascript google-visualization

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

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

Cor*_*lks 12

显然,这不是由谷歌图表API(引用支持1,23).我创建了下面的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);
Run Code Online (Sandbox Code Playgroud)

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

(感谢直到建议.outerHTML结束.parentNode.innerHTML)

  • 不适合我.然而,有用的是:e.getElementsByTagName('svg')[0] .outerHTML (3认同)