Javascript PHP中的谷歌图表_Javascript_Php_Google Visualization

Javascript PHP中的谷歌图表

javascript php google-visualization

Javascript PHP中的谷歌图表,javascript,php,google-visualization,Javascript,Php,Google Visualization,我正在使用谷歌图表显示结果。但我需要并排显示图表像也就是说，基本上我需要修正图表的位置。我试了很多方法，但都不管用。（我尝试了CSS，但不确定如何控制谷歌图表）它显示得像一下一所以我把代码提供给会帮助我的人。请注意（DB连接和其他我没有提供的东西 SQL的Php代码： PHP调用以下2个PHP，我没有提供DB connect信息 SQLQUERY.PHP <?PHP mysql_select_db("Loan_Bids", $con); $sth = mysql_query(

我正在使用谷歌图表显示结果。但我需要并排显示图表

像

也就是说，基本上我需要修正图表的位置。我试了很多方法，但都不管用。（我尝试了CSS，但不确定如何控制谷歌图表）

它显示得像一下一

所以我把代码提供给会帮助我的人。请注意（DB连接和其他我没有提供的东西

SQL的Php代码：

PHP调用以下2个PHP，我没有提供DB connect信息

SQLQUERY.PHP

<?PHP 
mysql_select_db("Loan_Bids", $con); 

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

if (mysqli_connect_errno($con))
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

?>

CHARTDET.PHP

图表的php代码

<?php

$rows = array();
$rows1 = array();
$rows2 = array();
//flag is not needed
$flag = true;
$table = array();
$table1 = array();
$table2 = array();
$table['cols'] = array(

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

$table1['cols'] = array(

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

$table2['cols'] = array(
    array('label' => 'Interest_Rate', 'type' => 'number'),
    array('label' => 'Bid_Size', 'type' => 'number')
);

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

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

    $Ratingval = $r['Rating'];

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

}

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

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

$table2['rows'] = $rows2;
$jsonTable2 = json_encode($table2);

?>

 <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: 'Rating 1',
          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: 'Rating 2',
          is3D: 'true',
          hAxis: {title: 'Interest Rate'},
          vAxis: {title: 'Bid Size'},
          width:200,height:200
          };

    var data2 = new google.visualization.DataTable(<?php echo $jsonTable2?>);
      var options2 = {
           title: 'Rating 3',
          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);

      var chart2 = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
      chart2.draw(data2, options2);       
 }
    </script>
  </head>

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


load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
//使用从服务器加载的JSON数据创建我们的数据表。
var data=new google.visualization.DataTable（）；
变量选项={
标题：“1级”，
is3D:'正确'，
颜色：'红色'，
哈克斯：{标题：'利率'}，
vAxis:{title:'Bid Size'}，
宽：200，高：200
};
var data1=新的google.visualization.DataTable（）；
变量选项1={
标题：“评级2”，
is3D:'正确'，
哈克斯：{标题：'利率'}，
vAxis:{title:'Bid Size'}，
宽：200，高：200
};
var data2=新的google.visualization.DataTable（）；
var选项2={
标题：“评级3”，
is3D:'正确'，
哈克斯：{标题：'利率'}，
vAxis:{title:'Bid Size'}，
宽：200，高：200
};
//实例化并绘制图表，传入一些选项。
//别忘了检查你的部门ID
var chart=new google.visualization.ScatterChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
var chart1=新的google.visualization.ScatterChart（document.getElementById（'chart_div1'）；
图表1.绘图（数据1，选项1）；
var chart2=新的google.visualization.ScatterChart（document.getElementById（'chart_div2'）；
图表2.绘图（数据2，选项2）；
}

您应该能够浮动容器div：

[CSS]

[HTML]

<div id="chart_div1"></div>
<div id="chart_div2"></div>
<div id="chart_div3"></div>

为了实现这一点，图表/div必须足够窄才能并排放置。默认情况下，它们以100%的宽度绘制，除非您在图表选项或div的CSS中覆盖它。

您不能在CSS中将图表div设置为向左浮动吗？也许您可以将div设置为

内联块

？即使我使用了CSS选项，它也不会显示ing.p{display:inline}您是否尝试了

内联块

，它与

内联块

不同。运气不好p{display:inline块；宽度：200px；}它仍在显示一个在实际div上设置样式的按钮，而不是围绕div的

标记。\chart\u div1、\chart\u div2{display:inline block；}
#chart_div1, #chart_div2, #chart_div3 {
    float: left;
}

<div id="chart_div1"></div>
<div id="chart_div2"></div>
<div id="chart_div3"></div>