将 Google 图表放置在特定位置答案

【问题标题】：Placing Google chart in a particular place将 Google 图表放置在特定位置
【发布时间】：2013-10-21 16:35:15
【问题描述】：

感谢 Stackoverflow 的所有输入。我可以将 2 个 google 图表放在一页中，但第 2 个图表显示在第 1 个图表下方。但我需要两个图表相互平行。像：左起第一个图表应该是第 100 个位置，顶部 =200，第二个图表应该是第 300 个位置，顶部 = 200。我怎样才能做到这一点。我使用了chartArea：{left：20，top：0，width：“50％”，height：“75％”}，但我没有得到

<?php
$con=mysql_connect("","root","") or die("Failed to connect with database!!!!");
mysql_select_db("Loan_Bids", $con); 

$sth = mysql_query("SELECT A.Bid_Size, B.Rating from bids_data A, loan_data B Where A.LoanID = B.LoanID");


$rows = array();
$rows1 = array();

//flag is not needed
$flag = true;
$table = array();

$table['cols'] = array(

    array('label' => 'Bid_Size', 'type' => 'number'),
    array('label' => 'Rating', 'type' => 'number')
);

$table1 = array();

$table1['cols'] = array(

    array('label' => 'Bid_Size', 'type' => 'number'),
    array('label' => 'Rating', 'type' => 'number')
);

$rows = array();
$rows1 = array();

while($r = mysql_fetch_assoc($sth)) {

    $Ratingval = $r['Rating'];
    if ($Ratingval == 1 ) 
    {
       $temp = array();
    // the following line will be used to slice the Pie chart
       $temp[] = array('v' => (int) $r['Bid_Size']); 
    // Values of each slice
       $temp[] = array('v' => (int) $r['Rating']); 
      $rows[] = array('c' => $temp);
    }
    if ($Ratingval == 2 ) 
    {
       $temp1 = array();
     // the following line will be used to slice the Pie chart
       $temp1[] = array('v' => (int) $r['Bid_Size']); 
    // Values of each slice
       $temp1[] = array('v' => (int) $r['Rating']); 
      $rows1[] = array('c' => $temp1);
    }

}

$table['rows'] = $rows;
$jsonTable = json_encode($table);

$table1['rows'] = $rows1;
$jsonTable1 = json_encode($table1);
echo $jsonTable1;

?>

 <html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    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(<?php echo $jsonTable?>);
      var options = {
           title: 'Rating1',
          is3D: 'true',
          color:'red',
          hAxis: {title: 'Interest Rate'},
          vAxis: {title: 'Bid Size'},
          width:200,height:200
   };

       var data1 = new google.visualization.DataTable(<?php echo $jsonTable1?>);
      var options1 = {
           title: 'Rating2',
          is3D: 'true',
          hAxis: {title: 'Interest Rate'},
          vAxis: {title: 'Bid Size'},
          width:200,height:200
          };
      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
      chart.draw(data, options);

      var chart1 = new google.visualization.ScatterChart(document.getElementById('chart_div1'));
      chart1.draw(data1, options1);

 }
    </script>
  </head>

  <body>
    <!--this is the div that will hold the pie chart-->
    <div id="chart_div"></div>
    <div id="chart_div1"></div>
  </body>
</html>

【问题讨论】：

标签： php google-visualization

【解决方案1】：

您需要使用 CSS 来定位页面上的容器 div，而不是 chartArea 选项。像这样的东西应该可以工作：

#chart_div, #chart_div1 {
    float: left;
    width: 50%;
}

【讨论】：

您好，这个选项不起作用，还有其他方法可以实现吗？
还有其他图表可取吗？
放置图表与您选择的 API 无关。使用 CSS 中设置的宽度，您可能会有一些填充/边距搞砸了。