Question

我使用mysql创建了一个工作图表，我想在我的第一个图表旁边制作另一个图表，但它并不顺利。

我的代码

<?php
 $con = mysqli_connect('xxxx','xxxx','xxxx','xxxx');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 1234
 </title>
 <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 data = google.visualization.arrayToDataTable([

///Start Chart
 ['Date', 'Total Orders'],
 <?php 
 $query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType";

 $exec = mysqli_query($con,$query);
 while($row = mysqli_fetch_array($exec)){

 echo "['".$row['saleType']."',".$row['count']."],";
 }
 ?>
 ///End Chart

 ]);

 var options = {
 title: 'Total Orders in 2017'
 };
 var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
 chart.draw(data, options);
 }
 </script>
</head>
<body>
 <h3>1234</h3>
 <div id="columnchart" style="width: 600px; height: 500px;"></div>
</body>
</html>

这是我的图表，但我想让另一个相邻：

Answer 1

强烈建议不在 html / javascript 中混合 php ...

相反，使用 php 以 json 格式返回数据......

getdata1.php

<?php
  $query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType";
  $exec = mysqli_query($con,$query);

  $rows = array();
  $table = array();

  $table['cols'] = array(
      array('label' => 'Sale Type', 'type' => 'string'),
      array('label' => 'Total Orders', 'type' => 'number')
  );

  while($row = mysqli_fetch_array($exec)){
    $temp = array();
    $temp[] = array('v' => (string) $row['saleType']);
    $temp[] = array('v' => (int) $row['count']);
    $rows[] = array('c' => $temp);
  }

  $table['rows'] = $rows;

  echo json_encode($table);
?>

然后使用 jquery / ajax 从 php 获取数据并绘制图表......

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {
    callback: function () {
      // draw chart from php data
      $.ajax({
        url: 'getdata1.php',
        dataType: 'json',
        done: function (jsonData) {
          var data = new google.visualization.DataTable(jsonData);
          var options = {
            title: 'Total Orders in 2017'
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
          chart.draw(data, options);
        },
        fail: function(jqXHR, textStatus, errorThrown) {
          console.log(errorThrown + ': ' + textStatus);
        }
      });

      // then just use another php page to get the other data and draw another chart
      $.ajax({
        url: 'getdata2.php',
        dataType: 'json',
        done: function (jsonData) {
          var data = new google.visualization.DataTable(jsonData);
          var options = {
            title: 'Total Other Orders in 2017'
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("columnchart2"));
          chart.draw(data, options);
        },
        fail: function(jqXHR, textStatus, errorThrown) {
          console.log(errorThrown + ': ' + textStatus);
        }
      });
    },
    packages: ['corechart']
  });
</script>

注意，还建议使用loader.js加载库，而不是jsapi

<script src="https://www.gstatic.com/charts/loader.js"></script>

根据release notes ...

通过jsapi加载程序保留的Google Charts版本不再一致更新。从现在开始请使用新的gstatic装载机。

Google图表会相互添加另一个图表

1 个答案: