如何为谷歌图表获取imageUri

您将需要构建中的以下两个文件<script src="html2canvas.js"></script><script src="html2canvas.svg.js"></script>然后在图表的 'ready' 事件上... google.visualization.events.addListener(chart, 'ready', function () {//将 svg 命名空间添加到图表$(chartContainer).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');//获取图片urihtml2canvas(图表容器，{allowTaint: 真,污点测试:假}).那么(功能(画布){console.log(canvas.toDataURL('image/png'));});});更新 另一种方法是将 svg 转换为图像并在画布上绘制，然后从画布中拉出 uri...google.charts.load('current', {包:['bar']}).then(函数(){var data = new google.visualization.arrayToDataTable([['银河'，'距离'，'亮度']，['Canis Major Dwarf', 8000, 23.3],['人马座矮人'，24000，4.5]，['Ursa Major II Dwarf', 30000, 14.3],['Lg.麦哲伦星云', 50000, 0.9],['靴子 I', 60000, 13.1]]);变量选项 = {宽度:800，图表: {title: '附近的星系',副标题:左边是距离，右边是亮度"},bar: 'vertical',//材质条形图需要.系列: {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(图表，'准备好'，函数(){var 画布；var domURL;var imageNode;var imageURL;var svgParent;//将 svg 命名空间添加到图表domURL = window.URL ||window.webkitURL ||窗户;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.onload = 函数(){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 {显示:无；可见性:隐藏；}<script src="https://www.gstatic.com/charts/loader.js"></script><div id="dual_x_div"></div><canvas class="hidden" id="canvas"></canvas>This is my sample material bar graph and i want the image uri for the plotted graphgoogle.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 likechart.getImageURI is not a function 解决方案 you can use html2canvasyou'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')); }); });UPDATEanother 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！