0
問題
1.如何獲取圖表圖像並將其傳遞到另一頁面。 （PHP）
2.添加「google.visualization.events.addListener」方法後，目前無法顯示折線圖。
（資源：https://developers.google.com/chart/interactive/docs/printing）將Google圖表轉換爲PNG圖像與下載
目前代碼：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500
};
// var chart = new google.charts.Line(document.getElementById('linechart_material'));
var linechart_material = document.getElementById('linechart_material');
var chart = new google.charts.Line(document.getElementById('linechart_material'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(my_chart, 'ready', function() {
linechart_material.innerHTML = '<img src="' + chart.getImageURI() + '">';
<?php $img //Get the chart.getImageURI() ?>
});
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material"></div>
<form method="post" action="doInsert.php" enctype="multipart/form-data">
<input type='hidden' name="imageName" value='<?php echo $img ; ?>' />
<div class="txtCenter"><input type="submit" value="Save the Report" style="width:300px; font-weight: bold;"></div>
</form>
</body>
</html>
我還提到這一資源 https://gist.github.com/battlehorse/1333906 但是這個資源無法顯示圖像，當我下載的圖片格式有錯了。
<html>
<head>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script>
function getImgData(chartContainer) {
// var chartArea = chartContainer.getElementsByTagName('iframe')[0].
// contentDocument.getElementById('chartArea');
var chartArea = chartContainer.getElementsByTagName('div')[1];
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");
}
//Conver Image
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" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart", "treemap", "geochart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Line chart
data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 860);
data.setValue(2, 2, 580);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new google.visualization.LineChart(document.getElementById('line_div'));
chart.draw(data, {width: 450, height: 300, title: 'Company Performance'});
}
</script>
</head>
<body>
<div id="img_div" style="position: fixed; top: 0; right: 0; z-index: 10; border: 1px solid #b9b9b9">
Image will be placed here
</div>
<button onclick="saveAsImg(document.getElementById('line_div'));">Save as PNG Image</button>
<button onclick="toImg(document.getElementById('line_div'), document.getElementById('img_div'));">Convert to image</button>
<div id="line_div"></div>
</body>
</html>