如何获得我的谷歌图表的png图片链接

Question

我正在使用谷歌图表中的一个条形图，并希望在我的页面上添加一个图片版本的图表链接。

我尝试了下面的代码。

google.visualization.events.addListener(chart, 'ready', function() {
      document.getElementById('png').innerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
    });

但是这个代码说: chart.getImageURI is not a function. 我怎样才能解决这个问题？

这里有一个jsfiddle。https：/jsfiddle.netjs8o2nrL

Answer 1

你正在使用一个 材料 条形图...

google.charts.Bar
packages: ['bar']

材料 图表 不支持 的 getImageURI 方法。

相反，你可以使用 经典的 图表...

google.visualization.BarChart
packages: ['corechart']

和以下选项...

theme: 'material'

不支持的其他选项 材料 图表，见--> 材料图特征奇偶性跟踪问题#2143。

---

-- 或 --

---

如果你想使用 材料 图表，你可以手动创建图像，使用--&gt。createObjectURL 然后在画布上绘制svg图像，使用--&gt获取png。canvas.toDataURL('image/png')

见下面的工作片段...

google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Vraag', '2019', '2020'],
      ['Zijn medewerkers op de hoogte van de algemene VGM instructies?', 5, 2],
      ['Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?', 1, 3],
      ['Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?', 1, 3]
    ]);

    var options = {
      chart: {
        title: 'Afwijkingen per vraag',
      },
      colors: ['#169183','#105f44'],
      bars: 'horizontal' // Required for Material Bar Charts.
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
    google.visualization.events.addListener(chart, 'ready', function() {
      var canvas;
      var domURL;
      var imageNode;
      var imageURI;
      var svgParent;

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

      // create image URI
      domURL = window.URL || window.webkitURL || window;
      imageNode = chart.getContainer().cloneNode(true);
      imageURI = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
      image = new Image();
      image.onload = function() {
        canvas = document.createElement('canvas');
        canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width')));
        canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height')));
        canvas.getContext('2d').drawImage(image, 0, 0);
        document.getElementById('png').innerHTML = '<a href="' + canvas.toDataURL('image/png') + '">Printable version</a>';
      }
      image.src = imageURI;
    });
  }

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