2017-06-03 108 views
0

我創建了一個從MySQL獲取數據的谷歌圖表。我想在圖表呈現時自動將它作爲圖像保存到我的PHP服務器。我已經通過一些代碼打印圖表爲PNG圖像。但我不知道如何將它保存在PHP服務器。任何人都可以幫我嗎?將google圖表保存爲php服務器上的圖像

這裏是我的代碼,這使得圖表從MySQL:

<html> 
<head> 
<title>Google Charts </title> 
     <script src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 


google.charts.load('current', {packages: ['corechart']}); 
    google.charts.setOnLoadCallback(drawChart);     

<?php 
$sql = mysql_connect("localhost","root",""); 
if(!$sql) 
{ 
    echo "Connection Not Created"; 
} 
$con = mysql_select_db("PRJ"); 
if(!$sql) 
{ 
    echo "Database Not Connected"; 
} 
$sql = "select * from LF"; 
$result = mysql_query($sql); 

$count=0; 
while($row = mysql_fetch_array($result)) 
{ 
$a[]=$row['x']; 
$b[]=$row['y']; 
$count++; 
} 




$tot=0; 
$toty=0; 
$xsqtot=0; 
$ysqtot=0; 
$xytot=0; 

for($i=0;$i<$count;$i++) 
{ 
$tot=$tot+$a[$i]; 
$toty=$toty+$b[$i]; 
$xpow[]=$a[$i]*$a[$i]; 
$ypow[]=$b[$i]*$b[$i]; 
$xsqtot=$xsqtot+$xpow[$i]; 
$ysqtot=$ysqtot+$ypow[$i]; 
$product[]=$a[$i]*$b[$i]; 
$xytot=$xytot+$product[$i]; 
} 
$p=(($tot*$toty)-($count*$xytot))/(($tot*$tot)-($count*$xsqtot)); 
$q=(($xytot*$tot)-($xsqtot*$toty))/(($tot*$tot)-($count*$xsqtot)); 

for($i=0;$i<$count;$i++) 
{ 
$cfy[]=($p*$a[$i])+$q; 
} 
$ct=sizeof($a); 


?> 

var x=new Array(); 
<?php 

for($i=0;$i<$count;$i++){ 

        echo "x[$i]=".$a[$i].";\n";} 

      ?> 
var y=new Array(); 
<?php 

for($i=0;$i<$count;$i++){ 

        echo "y[$i]=".$b[$i].";\n";} 

      ?> 
var z=new Array(); 
<?php 

for($i=0;$i<$count;$i++){ 

        echo "z[$i]=".$cfy[$i].";\n";} 

      ?> 
function drawChart() 
{ 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'independent'); 
    data.addColumn('number', 'dependent'); 
    data.addColumn('number', 'TRENDLINE'); 

for(var i=0;i<x.length;i++) 
{ 
    data.addRows([[x[i],y[i],z[i]]]); 
}  

    var options = {'title':'LAT VS LONG ', 
vAxis: {title: 'X'}, 
     hAxis: {title: 'Y'}, 
     'width':550, 
     'height':400, 
seriesType:'scatter', 
series: {1: {type: 'line'}}, 
}; 


    var curve_chart = document.getElementById('curve_chart'); 
var chart=new google.visualization.ColumnChart(curve_chart); 
google.visualization.events.addListener(chart, 'ready', function() { 
     curve_chart.innerHTML = '<img src="' + chart.getImageURI() + '">'; 
     console.log(curve_chart.innerHTML); 
     }); 
    chart.draw(data, options); 
} 


</script> 

</head> 
<body> 
    <div id="curve_chart" style="width: 900px; height: 500px;"></div> 
</body> 
</html> 
+0

張貼的圖片字符串返回到服務器用ajax ... – WhiteHat

+0

我不知道如何發佈圖像串回來使用。 。可以請你幫我指導 –

回答

0

'ready'事件中,發佈圖片字符串返回到服務器...

google.visualization.events.addListener(chart, 'ready', function() { 
    $.ajax({ 
    type: 'POST', 
    url: 'saveImage.php', 
    data: { 
     // send image string as data 
     imgStr: chart.getImageURI() 
    }, 
    }).success(function(response) { 
    console.log('image saved'); 
    }); 
}); 

然後在PHP中,得到從圖像後的字符串,並將其保存...

$imgStr = $_POST['imgStr']; 

後字段名稱需要匹配的鑰匙發送數據時

JS

imgStr: chart.getImageURI() // <-- imgStr 

PHP

$imgStr = $_POST['imgStr']; // <-- post field name 'imgStr' 
+0

希望這有助於,應該有更多的例子,在使用ajax保存base64圖像字符串到PHP ... – WhiteHat

+0

我已經做了你上面說的,但沒有找到任何圖像被保存在我的服務器。我也無法真正理解代碼。你可以取悅我的代碼併發布它,這樣我就可以很容易地理解在哪裏實現AJAX調用以及saveImage.php的真正用途。 –

相關問題