將Google圖表放在特定位置

感謝Stackoverflow的所有輸入。我可以將2谷歌圖表放在一頁中，但第二張圖表顯示在第一張圖表下方。但我需要兩個圖表平行對方。 Like：第一張圖左起第100張，上張200張，第2張第300張，上張200張。我怎麼能做到這一點。我用chartArea：{左：20，頂：0，寬度：「50％」，高度：「75％」}，但我沒有得到將Google圖表放在特定位置

<?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>

來源

2013-10-21 user2783043

您需要使用CSS來定位div容器在頁面上，不是chartArea選項。這樣的事情應該工作：

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

來源

2013-10-21 17:22:13 asgallant

嗨，這個選項不工作，有沒有其他辦法，我可以實現這一目標？ – user2783043

還有其他圖表是可取的嗎？ – user2783043

放置圖表與您選擇的API無關。用CSS設置的寬度來玩，你可能會有一些填充/邊距弄亂了事情。 – asgallant

將Google圖表放在特定位置

回答

相關問題