javascript - 谷歌时间轴图表到图像

Question

目前支持的Google图表转换功能为

getImageURI()

是核心图表和地理图表。其他的，包括时间线图，不包括在列表中。我花了一段时间才发现 getImageURI() 不受支持。那么将 Google 图表时间轴转换为图像的替代方法是什么？如何从时间线图表中获取图像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;

有什么帮助吗？

Answer 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
    });
});