Question

我有三个数组： $array1，$array2和$array3。每个都有结构（计数不同）：

[{"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"}]

我正尝试使用以下代码在Google图表中绘制它：

<?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/2016，6/2016，7/2016）作为标签，并将三个折线图与<15 min，>15 & <60和>60对应。但相反，我得到了这个：

graph

Answer 1

生成的行重复月份列...
{"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>

用PHP绘制谷歌图表

1 个答案: