如何为谷歌图表获取imageUri [英] how to get imageUri for google chart
本文介绍了如何为谷歌图表获取imageUri的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的示例材料条形图,我想要绘制图形的图像 uri
google.charts.load('current', {'packages':['bar']});google.charts.setOnLoadCallback(drawStuff);函数 drawStuff() {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 chart = new google.charts.Bar(document.getElementById('dual_x_div'));图表绘制(数据,选项);console.log(chart.getImageURI());};
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></脚本><div id="dual_x_div" style="width: 900px; height: 500px;"></div>
但是控制台给了我这样的错误chart.getImageURI 不是函数
解决方案
你可以使用html2canvas >
您将需要构建中的以下两个文件
<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 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屋!
查看全文