谷歌时间线图表到图像答案

【问题标题】：Google Timeline Chart to Image谷歌时间线图表到图像
【发布时间】：2016-12-22 07:06:47
【问题描述】：

目前支持的谷歌图表转换功能是

getImageURI()

是核心图表和地理图表。其他的，包括时间线图不包括在列表中。我花了一段时间才弄清楚不支持 getImageURI() 。那么将 Google Chart Timeline 转换为 Image 的替代方法是什么？如何从时间线图中获取图像 uri？有什么建议吗？

我尝试使用 html2canvas，但似乎没有按预期捕获图表。这是我用过的。

  var chartArea = document.getElementsByTagName('iframe')[0].
        contentDocument.getElementById('chartArea');
    var svg = chartArea.innerHTML;

    var canvas = doc.createElement('canvas');
    canvas.setAttribute('width', chartArea.offsetWidth);
    canvas.setAttribute('height', chartArea.offsetHeight);
    canvas.setAttribute(
      'style',
      'position: absolute; ' +
      'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
      'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
    doc.body.appendChild(canvas);

    canvg(canvas, svg);
    var imgData = canvas.toDataURL("image/png");

    return imgData;

有什么帮助吗？

【问题讨论】：

在运行上述代码之前，您是否等待图表的'ready' 事件？
是的，我做到了。有什么建议吗？

标签： javascript charts google-visualization

【解决方案1】：

我知道这是一个迟到的答案，但我在这里挣扎了一会儿，我想把答案放在将来参考。

这是一个fiddle，我发现它具有将svg转换为png的基础

我正在使用来自谷歌可视化的时间线图。在 div 容器内，它为图形创建一个 svg。我抓住了那个 svg，添加了一些需要的属性，然后转换为 base64 png。

这里是js代码：

google.visualization.events.addListener(chart, 'ready', function () {
    var getSVG = container.getElementsByTagName("svg")[0]; // Gets the graph
    getSVG.setAttribute('xmlns', "http://www.w3.org/2000/svg"); // Add attr to svg
    getSVG.setAttribute('xmlns:svg', "http://www.w3.org/2000/svg"); // Add attr to svg

    // From Fiddle
    var myCanvas = document.getElementById("canvas");
    var ctxt = myCanvas.getContext("2d");


    drawInlineSVG(ctxt, getSVG.outerHTML, function() {
        console.log(canvas.toDataURL());  // -> PNG
    });
});

【讨论】：