如何为我的 Google 图表的 png 获取图像 link

Question

我正在使用 Google 个图表中的条形图，并想在我的页面上添加 link 图表的图像版本。

我尝试了以下代码：

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.net/js8o2nrL/

Answer 1

您正在使用 material 条形图...

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

material图表不支持getImageURI方法。

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

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

使用以下选项...

theme: 'material'

对于 material 图表不支持的其他选项，
参见 --> Tracking Issue for Material Chart Feature Parity #2143

-- 或--

如果您想使用 material 图表，
您可以使用 --> createObjectURL
手动创建图像然后在 canvas,
上绘制 svg 图像要获取 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>

如何为我的 Google 图表的 png 获取图像 link

How to get an image link for a png of my Google chart

javascript

charts

google-visualization