2016-07-19 64 views
2

我有三個陣列: $array1$array2$array3。每個具有結構式爲(計數是不同的):在PHP中繪製谷歌圖表

[{"year":"2016","month":"5","lab_id":"1","count":"19"},{"year":"2016","month":"6","lab_id":"1","count":"1"},{"year":"2016","month":"7","lab_id":"1","count":"8"}] 
[{"year":"2016","month":"5","lab_id":"1","count":"26"},{"year":"2016","month":"6","lab_id":"1","count":"34"},{"year":"2016","month":"7","lab_id":"1","count":"30"}] 

我嘗試使用下面的代碼繪製它在谷歌圖表:

<?php 
$rows = array(); 
$flag = true; 
$table = array(); 
$table['cols'] = array(
    array('label' => 'Month', 'type' => 'string'), 
    array('label' => '<15 min', 'type' => 'number'), 
    array('label' => '>15 & <60', 'type' => 'number'), 
    array('label' => '>60', 'type' => 'number'), 
); 
$rows = array(); 
$allArray = array(); 
array_push($allArray,$array1); 
array_push($allArray,$array2); 
array_push($allArray,$array3); 
foreach($allArray as $dataArray) { 
$temp = array(); 
    foreach($dataArray as $item) { 

     $temp[] = array('v' => "{$item["month"]}"."/"."{$item["year"]}"); 
     $temp[] = array('v' => (int) $item["count"]); 

} 
    $rows[] = array('c' => $temp); 
} 

$table['rows'] = $rows; 

$jsonTable = json_encode($table); 
?> 

和圖形腳本:

<script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(<?=$jsonTable?>); 
      var options = { 
      title: 'User Transaction Statistics', 
      is3D: 'true', 
      width: 800, 
      height: 600 
     }; 
     // Instantiate and draw our chart, passing in some options. 
     // Do not forget to check your div ID 
     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 
    </script> 
    <div id="chart_div"></div> 

但我沒有得到預期的圖表。它應該有日期(5/20166/20167/2016)作爲標籤和三個折線圖對應於<15 min,>15 & <60>60。 而是我正在此:

graph

回答

3

行產生重複月份列...
{"c":[{"v":"5\/2016"},{"v":19},{"v":"6\/2016"},{"v":1},{"v":"7\/2016"},{"v":8}]}

而對於給定月份所有的值應該是在同一行.. 。的
{"c":[{"v":"5\/2016"},{"v":19},{"v":26},{"v":32}]}

代替組合所有3個陣列,訪問所有三個在同一環序列。
假設他們都是一樣的大小,這樣的事情應該工作...

PHP

<?php 

$array1 = array(
    array('year' => '2016', 'month' => '5', 'lab_id' => '1', 'count' => '19'), 
    array('year' => '2016', 'month' => '6', 'lab_id' => '1', 'count' => '1'), 
    array('year' => '2016', 'month' => '7', 'lab_id' => '1', 'count' => '8') 
); 

$array2 = array(
    array('year' => '2016', 'month' => '5', 'lab_id' => '1', 'count' => '26'), 
    array('year' => '2016', 'month' => '6', 'lab_id' => '1', 'count' => '34'), 
    array('year' => '2016', 'month' => '7', 'lab_id' => '1', 'count' => '30') 
); 

$array3 = array(
    array('year' => '2016', 'month' => '5', 'lab_id' => '1', 'count' => '32'), 
    array('year' => '2016', 'month' => '6', 'lab_id' => '1', 'count' => '45'), 
    array('year' => '2016', 'month' => '7', 'lab_id' => '1', 'count' => '36') 
); 

$rows = array(); 
$flag = true; 
$table = array(); 
$table['cols'] = array(
    array('label' => 'Month', 'type' => 'string'), 
    array('label' => '<15 min', 'type' => 'number'), 
    array('label' => '>15 & <60', 'type' => 'number'), 
    array('label' => '>60', 'type' => 'number'), 
); 
$rows = array(); 

for ($i=0; $i<count($array1); $i++) { 
    $rowLabel = array('v' => "{$array1[$i]["month"]}"."/"."{$array1[$i]["year"]}"); 
    $month1 = array('v' => (int) $array1[$i]["count"]); 
    $month2 = array('v' => (int) $array2[$i]["count"]); 
    $month3 = array('v' => (int) $array3[$i]["count"]); 

    $temp = array(
    $rowLabel, 
    $month1, 
    $month2, 
    $month3 
); 

    $rows[] = array('c' => $temp); 
} 

$table['rows'] = $rows; 

$jsonTable = json_encode($table); 

?> 

HTML/JavaScript的

<script src="https://www.gstatic.com/charts/loader.js"></script> 
<script> 
// Load the Visualization API and the piechart package. 
google.charts.load('current', { 
    callback: function() { 
    var data = new google.visualization.DataTable(<?=$jsonTable?>); 
    var options = { 
     title: 'User Transaction Statistics', 
     is3D: 'true', 
     width: 800, 
     height: 600 
    }; 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    }, 
    packages: ['corechart', 'bar'] 
}); 
</script> 
<div id="chart_div"></div> 
+0

希望這有助於[這裏](http://phpfiddle.org/main/code/ajxe-6n0g)是我創建用於測試的PHPFiddle ... – WhiteHat

+0

也推薦使用'loader.js'與較舊的庫'jsapi' – WhiteHat