通過JSON將PHP數組傳遞給Javascript以更新Google圖表

我有三種PHP數組，我用json編碼...額外的PHP代碼已被省略，因爲數組工作正常....此外，HTML標籤谷歌圖表已被省略，爲簡潔起見...通過JSON將PHP數組傳遞給Javascript以更新Google圖表

<?php 
$encoded_line_volume = json_encode($LineVol) . "\n"; 
$encoded_loan_volume = json_encode($LoanVol) . "\n"; 
$encoded_cluster_name = json_encode($ClusterLine) . "\n"; 
?>

我想訪問這三個數組在Javascript中動態更新我的谷歌圖表。

<script type="text/javascript"> 

google.load("visualization", "1", {packages:["columnchart"]}); 
google.setOnLoadCallback(drawChart); 

var linevol = new Array; // This would be the first array passed from PHP 
var loanvol = new Array; // This would be the second array passed from PHP 
var clusters = new Array; // This would be the third array passed from PHP 

function drawChart() { 
    var data = new google.visualization.DataTable(); 

    data.addColumn('string', 'Cluster'); 
    data.addColumn('number', 'Loans'); 
    data.addColumn('number', 'Lines'); 

/* create for loops to add as many columns as necessary */ 

var len = jsonarray.length; 

    data.addRows(len); 

for(i=0; i<len; i++) { 

data.setValue(i, 0, ' '+clusters[i]+'');  /* x-axis */ 
data.setValue(i, 1, linevol[i]); /* Y-axis category #1*/ 
data.setValue(i, 2, loanvol[i]); /* Y-axis category #2*/ 
} 
/*********************************end of loops***************************************/ 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Prospect Population', legend: 'right'}); 
} 
</script>

來源

2009-11-09 brussels0828

我很想幫忙，但你的代碼是不完整的，並且缺乏格式化;） – 2009-11-09 02:31:46

賈斯汀...只是格式化也...應該是完整的，現在... – brussels0828 2009-11-09 02:38:06

您可能希望它們變成Javascript變量。當你的php執行時，它會創建你的Web瀏覽器然後解釋的代碼。所以你想用php定義javascript字符串。例如：

<script type="text/javascript"> 
    var encoded_line_volume = <?php echo json_encode($LineVol) ?>; 
    var encoded_loan_volume = <?php echo json_encode($LoanVol) ?>; 
    var encoded_cluster_name = <?php echo json_encode($ClusterLine) ?>; 
</script>

然後這些變量可以被隨後的javascript訪問。

來源

2009-11-09 02:34:08

感謝，肯...會我需要分析每個變量來創建相應的JavaScript數組？ – brussels0828 2009-11-09 02:39:03

用Javascript解析？不，不是，如果數組是PHP中的普通數組。 Json對變量進行編碼，使其直接解釋爲一個JavaScript變量 - 這就是爲什麼沒有引號的原因。如果您查看頁面源代碼，您會看到我的意思。 – 2009-11-09 02:41:54

你是男人，肯......謝謝，兄弟。 – brussels0828 2009-11-09 02:53:22

這是如何從PHP動態生成數據，正確生成JSON格式的輸出並從JavaScript中讀取（需要JQuery）並將其加載到Google Visulization（Charts）API。

PHP（服務器）側：

使用Javascript（客戶端）端：

var jsonData = null; 

var jsonDataResult = $.ajax({ 
    url: dataURL, 
    dataType: "json", 
    async: false, 
    success: (
     function(data) { 
      jsonData = data; 
     }) 
}); 

var data = new google.visualization.arrayToDataTable(jsonData);

來源

2011-08-12 23:45:07

這工作我把你的代碼與其他代碼集成，它工作4我很多非常感謝人 – humphrey 2013-09-06 13:48:44

這是我做過的最好的例子，它可以幫助你一句：它的測試，並很好地工作：創建兩個頁面，一個名爲index.php，另一個名爲get_json.php：這不完全是您發佈的代碼，但完全相同的想法，它回答了這個問題。

the codes for index.php 

    <html> 
    <head> 
     <title>King Musa Graph</title> 
     <!-- Load jQuery --> 
     <script language="javascript" type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> 
     </script> 
     <!-- Load Google JSAPI --> 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      google.load("visualization", "1", { packages: ["corechart"] }); 
      google.setOnLoadCallback(drawChart); 

      function drawChart() { 
       var jsonData = $.ajax({ 
        url: "get_json.php", 
        dataType: "json", 
        async: false 
       }).responseText; 

       var obj = jQuery.parseJSON(jsonData); 
       var data = google.visualization.arrayToDataTable(obj); 

       var options = { 
        title: 'King Musa' 
       }; 

       var chart = new google.visualization.LineChart(
          document.getElementById('chart_div')); 
       chart.draw(data, options); 
      } 

     </script> 
    </head> 
    <body> 
     <div id="chart_div" style="width: 900px; height: 500px;"> 
     </div> 
    </body> 
    </html> 

codes for get_json.php 
<?php 

    $data = Array(); 
    $data [] = Array ("Name", "Value"); 
    $data [] = Array ("PHP", 78); 

    $data [] = Array ("JAVA", 1000); 
    $data [] = Array ("HTML", 129); 


    $table = json_encode($data); 
    // header('content-type: application/json'); 

    echo $table ; // this line is important it should be not disabled 

?>

來源

2013-09-06 13:47:24 humphrey

通過JSON將PHP數組傳遞給Javascript以更新Google圖表

回答

相關問題