时间戳

首页 > 解决方案 > 将 Google 可视化导出为图片

html - 将 Google 可视化导出为图片

问题描述

我正在尝试将 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>

标签： htmlchartsgoogle-visualizationpng

解决方案

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

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

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

接下来，图表WordTree没有 的方法， 因此您需要手动创建图像，从. getImageURI
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>

推荐阅读