【问题标题】:Plot Google Chart in PHP用 PHP 绘制谷歌图表
【发布时间】:2016-07-19 17:58:13
【问题描述】:

我有三个数组: $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/20166/20167/2016)作为标签和对应于&lt;15 min&gt;15 &amp; &lt;60&gt;60的三个折线图。 但相反,我得到了这个:

graph

【问题讨论】:

    标签: php charts google-visualization


    【解决方案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>
    

    【讨论】:

    • 希望对您有所帮助,here 是我创建的用于测试的 PHPFiddle...
    • 还建议使用 loader.js 与旧库 jsapi
    猜你喜欢
    • 1970-01-01
    • 2018-06-08
    • 2018-08-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-26
    • 2010-10-14
    相关资源
    最近更新 更多