新的 Google Chart API 将图表创建为 SVG(而不是过去的 PNG)。我希望能够保存生成的 SVG。我怎样才能做到这一点?
如果我使用 Chrome 检查页面上的元素,我可以找到包含 SVG 的 svg 标签。我希望能够使用 JavaScript 获取生成的 SVG。我不想在 JavaScript 中搜索 svg 标记的 HTML 源代码,如果有办法直接从图表对象(可能是 ChartWrapper 类?)获取 SVG 字符串,那将是更可取的。
新的 Google Chart API 将图表创建为 SVG(而不是过去的 PNG)。我希望能够保存生成的 SVG。我怎样才能做到这一点?
如果我使用 Chrome 检查页面上的元素,我可以找到包含 SVG 的 svg 标签。我希望能够使用 JavaScript 获取生成的 SVG。我不想在 JavaScript 中搜索 svg 标记的 HTML 源代码,如果有办法直接从图表对象(可能是 ChartWrapper 类?)获取 SVG 字符串,那将是更可取的。
显然,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。我总是乐于接受更好的解决方案。
您还可以使用Google Chrome DevTools,尤其是元素选择器,然后您可以直接从 DOM 复制/粘贴您要查找的 SVG。