Question

感谢Stackoverflow的所有输入。我能够将2个谷歌图表放在一个页面中，但第二个图表显示在第一个图表下方。但我需要两个图表彼此平行。喜欢：左边的第一张图表应该是第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>

Answer 1

您需要使用CSS在页面上定位容器div，而不是chartArea选项。这样的事情应该有效：

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

将Google图表放置在特定位置

1 个答案: