这是我的样本材料条形图,我想要绘制的图形的图像uri。
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>
但是给我提供错误的控制台,如:chart.getImageURI is not a function.
发布于 2018-08-20 14:06:46
你可以用HTML 2画布(https://html2canvas.hertzen.com/)
需要构建中的以下两个文件
<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>
然后在图表上的'ready'
事件...
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'));
});
});
另一种方法是将svg转换为图像并在画布上绘制,
然后从画布中拉出uri ...
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>
https://stackoverflow.com/questions/-100006019
复制相似问题