将 Google 可视化导出为图片答案

【问题标题】：Export Google visualization as picture将 Google 可视化导出为图片
【发布时间】：2019-09-04 20:32:54
【问题描述】：

我正在尝试将 wordtree Google 可视化转换为图像。下面的当前代码运行 wordtree，因此我可以看到视觉效果，但我无法确定要转换为图像或导出为图像的最后一部分。 (var my_div = 要结束的部分)

我尝试从下面的链接更改代码，但无法将其保存为图像。 https://developers.google.com/chart/interactive/docs/printing

我也在 jsfiddle.net 内部进行此操作，以尝试使其正常工作。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "mywordtree",
         "dataSourceUrl": "https://docs.google.com/spreadsheets/d/1vi-YzV7s7eZ25938Q57DbZvT0iqggiCqRvDgxeZtP6c/edit?usp=sharing",
         "query":"SELECT A",
         "chartType": "WordTree",
         "options": {
                wordtree: {
            format: 'implicit',
            //alt type is 'suffix', 'prefix'
            type: 'suffix',
            word: 'prescription'
            }
         }
       });
      }

    var my_div = document.getElementById('chart_div');
    var my_chart = new google.visualization.ChartType(mywordtree);

    google.visualization.events.addListener(my_chart, 'ready', function () {
      mywordtree.innerHTML = '<img src="' + my_chart.getImageURI() + '">';
    });

    my_chart.draw(data);

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="mywordtree" style="width: 1000px; height: 1000px;"></div>
  </body>
</html>

【问题讨论】：

标签： html charts google-visualization png

【解决方案1】：

首先，为了生成图表的图像，
您需要等待图表的'ready' 事件。

为了等待'ready'事件，
您需要访问图表对象。

您将无法使用google.visualization.drawChart 方法，
因为它不返回图表的句柄。

接下来是WordTree 图表，没有method 对应getImageURI，
因此您需要从blob 手动创建图像。

请参阅以下工作 sn-p...

google.charts.load('current').then(function () {
  // get chart container
  var container = document.getElementById('mywordtree');

  // create chart
  var chart = new google.visualization.ChartWrapper({
    chartType: 'WordTree',
    containerId: container.id,
    dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1vi-YzV7s7eZ25938Q57DbZvT0iqggiCqRvDgxeZtP6c/edit?usp=sharing',
    options: {
      wordtree: {
        format: 'implicit',
        //alt type is 'suffix', 'prefix'
        type: 'suffix',
        word: 'prescription'
      }
    }
  });

  // listen for ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    var domUrl;    // object url
    var image;     // chart image
    var imageUrl;  // chart image url
    var svg;       // svg element

    // add svg namespace to chart
    svg = container.getElementsByTagName('svg')[0];
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

    // create image url from svg
    domUrl = window.URL || window.webkitURL || window;
    imageUrl = domUrl.createObjectURL(new Blob([svg.outerHTML], {type: 'image/svg+xml'}));

    // create chart image
    image = new Image();
    image.onload = function() {
      // replace chart with image
      container.innerHTML = image.outerHTML;
    }
    image.src = imageUrl;
  });

  // draw chart
  chart.draw();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="mywordtree"></div>

【讨论】：

希望这会有所帮助。注意：以上获取图片的代码在IE下无法使用，可以使用html2canvas代替，示例见this answer...
感谢您的帮助。我一直在阅读一些关于某些无法使用 getImageURI 的可视化的内容，因此这有助于了解如何解决这些问题。再次感谢。