如何获得imageUri谷歌图表 [英] how to get imageUri for google chart

问题描述

这是我的样本材料条形图，我想要绘制图形的图像

  google.charts.load（'current'，{'packages'：['bar']}）; google.charts.setOnLoadCallback（drawStuff）;函数drawStuff（）{var data = new google.visualization.arrayToDataTable（[''Galaxy'，'Distance'，'Brightness']，['Canis Major Dwarf'，8000，23.3]，['Sagittarius Dwarf'，24000， 4.5'，['Ursa Major II Dwarf'，30000,14.3]，['Lg。Magellanic Cloud'，50000,0.9]，['Bootes I'，60000,13.1]]） var options = {width：800，chart：{title：'Nearby galaxies'，subtitle：'distance on the left，brightness in right'}，bars：'vertical'，//必须为材质条形图。系列：{0：{axis：'distance'}，//将系列0绑定到名为'distance'的轴。 1：{axis：'brightness'} //将系列1绑定到名为'brightness'的轴。 }，轴：{x：{distance：{label：'parsecs'}，//底部x轴。亮度：{侧：'顶部'，标签：'明显幅度'} //顶部x轴。 }}}; var chart = new google.charts.Bar（document.getElementById（'dual_x_div'））; chart.draw（数据，选项）;的console.log（chart.getImageURI（））; };  

< script type =text / javascript SRC = https://www.gstatic.com/charts/loader.js >< /脚本> < div id =dual_x_divstyle =width：900px; height：500px;>< / div>

但控制台给我错误，如
图表。 getImageURI不是函数

解决方案

您可以使用 html2canvas

您需要构建以下两个文件

 < script src =html2canvas.js>< / script> 
< script src =html2canvas.svg.js>< / script> 
  

然后在图表的'ready'事件...

pre $ lt; code> google.visualization.events.addListener（chart，'ready'，function（）{
/ /添加svg命名空间到图表
$（chartContainer）.find（'svg'）。attr（'xmlns'，'http://www.w3.org/2000/svg'）;

// get image uri
html2canvas（chartContainer，{
allowTaint：true，
taintTest：false
}）。then（function（canvas）{
console.log（canvas.toDataURL（'image / png'））;
}）;
}）;


---

更新 p>

另一种方法是将svg转换为图像并在画布上绘制，

然后从画布中拉出uri ...

  google.charts.load（'current'，{packages：['bar']] }）。然后（function（）{var data = new google.visualization.arrayToDataTable（[''Galaxy'，'Distance'，'Brightness']，['Canis Major Dwarf'，8000，23.3]，['Sagittarius Dwarf ''，24000,4.5]，['Ursa Major II Dwarf'，30000,14.3]，['Lg。Magellanic Cloud'，50000,0.9]，['Bootes I'，60000,13.1]]）; var options = {'宽度：800，图表：{title：'附近的星系'，副标题：'左边的距离，右边的亮度'}，bars：'vertical'，// Req系列：{0：{axis：'distance'}，//将系列0绑定到名为'distance'的轴。 1：{axis：'brightness'} //将系列1绑定到名为'brightness'的轴。 }，轴：{x：{distance：{label：'parsecs'}，//底部x轴。亮度：{侧：'顶部'，标签：'明显幅度'} //顶部x轴。 }}}; var chartContainer = document.getElementById（'dual_x_div'）; var chart = new google.charts.Bar（chartContainer）; google.visualization.events.addListener（图表，'ready'，function（）{var canvas; var domURL; var imageNode; var imageURL; var svgParent; //将svg命名空间添加到图表domURL = window.URL || window.webkitURL || window; svgParent = chartContainer.getElementsByTagName（'svg'）[0]; svgParent.setAttribute（'xmlns'，'http://www.w3.org/2000/svg'）; imageNode = chartContainer.cloneNode（true ）; imageURL = domURL.createObjectURL（new Blob（[svgParent.outerHTML]，{type：'image / svg + xml'}））; image = new Image（）; image.onload = function（）{canvas = document。 getElementById（'canvas'）; canvas.setAttribute（'width'，parseFloat（svgParent.getAttribute（'width'）））; canvas.setAttribute（'height'，parseFloat（svgParent.getAttribute（'height'）））; canvas .getContext（'2d'）。drawImage（image，0，0）; console.log（canvas.toDataURL（'image / png'））;} image.src = imageURL;}）;   
  .hidden {display：none; visibility：hidden;}  

< script src =https ：//www.gstatic.com/charts/loader.js>< / script>< div id =dual_x_div>< / div>< canvas class =hiddenid =canvas >< / canvas>

This is my sample material bar graph and i want the image uri for the plotted graph

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'vertical', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
      console.log(chart.getImageURI());
    };

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="dual_x_div" style="width: 900px; height: 500px;"></div>
   

But the console giving me error like chart.getImageURI is not a function

解决方案

you can use html2canvas

you'll need the following two files from the build

<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>

then on the chart's 'ready' event...

  google.visualization.events.addListener(chart, 'ready', function () {
    // add svg namespace to chart
    $(chartContainer).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');

    // get image uri
    html2canvas(chartContainer, {
      allowTaint: true,
      taintTest: false
    }).then(function(canvas) {
      console.log(canvas.toDataURL('image/png'));
    });
  });

---

UPDATE

another method is to convert the svg to an image and draw it on a canvas,
then pull the uri from the canvas...

google.charts.load('current', {
  packages:['bar']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Galaxy', 'Distance', 'Brightness'],
    ['Canis Major Dwarf', 8000, 23.3],
    ['Sagittarius Dwarf', 24000, 4.5],
    ['Ursa Major II Dwarf', 30000, 14.3],
    ['Lg. Magellanic Cloud', 50000, 0.9],
    ['Bootes I', 60000, 13.1]
  ]);

  var options = {
    width: 800,
    chart: {
      title: 'Nearby galaxies',
      subtitle: 'distance on the left, brightness on the right'
    },
    bars: 'vertical', // Required for Material Bar Charts.
    series: {
      0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
      1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
    },
    axes: {
      x: {
        distance: {label: 'parsecs'}, // Bottom x-axis.
        brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var canvas;
    var domURL;
    var imageNode;
    var imageURL;
    var svgParent;

    // add svg namespace to chart
    domURL = window.URL || window.webkitURL || window;
    svgParent = chartContainer.getElementsByTagName('svg')[0];
    svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    imageNode = chartContainer.cloneNode(true);
    imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
    image = new Image();
    image.onload = function() {
      canvas = document.getElementById('canvas');
      canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width')));
      canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height')));
      canvas.getContext('2d').drawImage(image, 0, 0);
      console.log(canvas.toDataURL('image/png'));
    }
    image.src = imageURL;
  });

  chart.draw(data, options);
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div"></div>
<canvas class="hidden" id="canvas"></canvas>

这篇关于如何获得imageUri谷歌图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！