Can Google Visualization: Pie Chart output to a PNG image?
Google Visualization API ca开发者_如何学Pythonn draw the pie chart in the website with javascript. Can the chart be output as a PNG image file?
Thanks.
Yes. This is no longer natively supported in the Google Visualization API, but it only requires a few lines of JavaScript, below.
The solution, originally, described by Riccardo Govoni in the wonderful Battlehorse tutorial, converts SVG to Canvas and then to PNG, which can then be displayed or saved.
The tutorial code no longer works, but I added two fixes to it:
- Set the
chartAreavariable to work with Google Visualization API version 1.32 (Sept 24, 2012) and later (source) - Use canvg.js r157 as a workaround for a regression identified by nverba
.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="https://canvg.googlecode.com/svn-history/r157/trunk/canvg.js"></script>
<script>
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
}
function saveAsImg(chartContainer) {
var imgData = getImgData(chartContainer);
// Replacing the mime-type will force the browser to trigger a download
// rather than displaying the image in the browser window.
window.location = imgData.replace("image/png", "image/octet-stream");
}
function toImg(chartContainer, imgContainer) {
var doc = chartContainer.ownerDocument;
var img = doc.createElement('img');
img.src = getImgData(chartContainer);
while (imgContainer.firstChild) {
imgContainer.removeChild(imgContainer.firstChild);
}
imgContainer.appendChild(img);
}
</script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Pie chart
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.getElementById('google_visualization_div'));
chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
}
</script>
</head>
<body>
<div id="google_visualization_div"></div>
<button onclick="saveAsImg(document.getElementById('google_visualization_div'));">Save as PNG Image</button>
<button onclick="toImg(document.getElementById('google_visualization_div'), document.getElementById('img_div'));">Convert to image</button>
<hr>
<div id="img_div">
Image will be placed here
</div>
</body>
</html>
Sure, just use the static image Google Chart API
At least, you can until 20 Apr 2015 :(
I found this, but have not yet tested it: https://gist.github.com/battlehorse/1333906
Looks like it uses canvas to clientside convert the data into SVG/PNG, which will print.
加载中,请稍侯......
精彩评论