javascript - 谷歌时间线图表图像

Question

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

getImageURI()

是 corecharts 和 geo-chart。其他的，包括时间线图不在列表之内。我花了一段时间才弄清楚 getImageURI() 不受支持。那么将 Google Chart 时间轴转换为图像的替代方法是什么。你如何从时间线图表中获取图像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
    });
});