将 Google 可视化导出为图片

Question

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

我已尝试更改下面 link 中的代码，但无法将其另存为图像。 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>

Answer 1

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

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

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

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

请参阅以下工作片段...

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>

将 Google 可视化导出为图片

Export Google visualization as picture

html

charts

png

google-visualization