Сохранить диаграмму Google как SVG?

Новый API диаграммы Google создает диаграммы как SVG (а не PNG, как он привык). Я бы хотел сохранить сгенерированный SVG. Как я могу это сделать?

Если я использую Chrome для проверки элементов на странице, я могу найти тег svg, который содержит SVG. Я хотел бы иметь возможность получить сгенерированный SVG с помощью JavaScript. Я бы предпочел не искать источник HTML для тега svg в JavaScript, и если есть способ получить строку SVG непосредственно из объекта диаграммы (возможно, класса ChartWrapper?), Который был бы предпочтительнее.

Ответы

Ответ 1

По-видимому, это не поддерживается API графиков Google (ссылки 1, 2, и 3). Я создал нижний хак, чтобы получить строку 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, потому что API графиков Google не использует SVG в IE. Я всегда готов к лучшим решениям.

Ответ 2

Вы также можете использовать Google Chrome DevTools, особенно селектор элементов, затем вы можете копировать/пропустить SVG, который вы ищете, непосредственно из DOM.