Google 차트를 특정 장소에 배치

Stackoverflow의 모든 입력에 감사드립니다. 한 페이지에 2 개의 Google 차트를 배치 할 수 있지만 두 번째 차트는 첫 번째 차트 아래에 표시됩니다. 하지만 두 차트가 서로 병렬로 필요합니다. 좋아요 : 왼쪽의 첫 번째 차트는 100 위, 200 위 = 200이어야하며 두 번째 차트는 300 위 (상위 = 200) 여야합니다. 나는 어떻게 그것을 성취 할 수 있는가. {왼쪽 : 20, 최고 : 0, 폭 : "50 %", 높이 : "75 %"} 나는 chartArea을 사용하지만, 난 당신이 컨테이너 div의 위치를 CSS를 사용할 필요가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

을 받고 있지 않다 페이지에는 chartArea 옵션이 없습니다. 이런 식으로 작동해야합니다 :

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

출처

2013-10-21 17:22:13 asgallant

안녕하세요,이 옵션이 작동하지 않습니다, 내가 다른 방법으로 달성 할 수 있습니까? – user2783043

다른 도표가 있습니까? – user2783043

차트를 배치하는 것은 선택한 API와 아무 관련이 없습니다. CSS에서 설정된 너비로 놀아 라. 패딩/여백이 엉망이 될 수도있다. – asgallant

Google 차트를 특정 장소에 배치

답변

관련 문제