谷歌图表彼此相邻添加另一个图表答案

【问题标题】：Google chart add another chart next to each other谷歌图表彼此相邻添加另一个图表
【发布时间】：2017-02-14 15:34:07
【问题描述】：

我用 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>

这是我的图表，但我想制作另一个并排的：

【问题讨论】：

外部图像不适合 SO；他们终有一天会消失。另外，为了自己解决这个问题做了什么尝试？
我确实从 ///start chart 复制到 ///end chart 并在 ///End chart 之后粘贴了它，但它不起作用，它给了我一个空白页。
哦，我明白了。是的，您不能将原始 PHP 标记放在问题文本中并期望它被呈现。即使它可以渲染，你希望它如何找到数据？您可以将图像内嵌。
澄清一下，您想在此图表旁边呈现类似类型的图表吗？也就是说，您想要一些 PHP 标记以及现有的水平呈现图表的 PHP 标记？或者是其他东西？您应该清楚在问题正文中您的最终目标是什么，以及您如何尝试实现这一目标。也就是说，没有人会为您编写标记。
我只想在同一张图表旁边添加另一个 sql 表。但是，当我从 ///start 图表复制到 ///end 图表并将其粘贴到 ///End 图表之后，它给了我一个空白页。

标签： php html mysql charts google-visualization

【解决方案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 加载器。

【讨论】：

这个问题好运吗？