Question

我正在使用JQplots渲染饼图。我有2个饼图。他们个人工作正常。但是当我想要它们在一个页面中时，它们彼此重叠。请让我知道如何在另一个旁边展示它们？提前谢谢。

图表1代码：

    <!-- for jqplot graphs -->
         <script src="../../assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
 <script src="../../js/jqplot.js"></script>
<script type="text/javascript" src="../../assets/plugins/jqplot.pieRenderer.min.js"></script>
    <link rel="stylesheet"href="../../css/graphs.css" type="text/css">
            <!-- end of jqplot graphs js -->
<?php

    /* Your Database Name */
    $dbname = 'finalCMS';

    /* Your Database User Name and Passowrd */
    $username = 'root';
    $password = 'password';

    try {
      /* Establish the database connection */
      $conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


      $result = $conn->query("SELECT ComplianceStatus,count FROM indexonboard WHERE zone='SEA' and country='SG'");





      $rows = array();

        foreach($result as $r) {


          $rows[] = array( $r['ComplianceStatus'],(int)$r['count']); 



        }

    // convert data into JSON format
    $jsonTable = json_encode($rows);

    print_r($jsonTable);
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
    //mysql_close($conn);

     $conn=null;

    ?>

<script>
function drawchart(){
    //function drawchart()                     
 var data1 =<?php echo $jsonTable;?>;
 alert(data1);
  var plot1 = jQuery.jqplot ('chartsg', [data1], 
 { 
      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true
        }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
}
drawchart();
</script>
<div id="chartsg"></div>

图表2的代码：

<!-- for jqplot graphs -->
         <script src="../../assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
 <script src="../../js/jqplot.js"></script>
<script type="text/javascript" src="../../assets/plugins/jqplot.pieRenderer.min.js"></script>
    <link rel="stylesheet"href="../../css/graphs.css" type="text/css">
            <!-- end of jqplot graphs js -->    
<?php

    /* Your Database Name */
    $dbname = 'finalCMS';

    /* Your Database User Name and Passowrd */
    $username = 'root';
    $password = 'password';

    try {
      /* Establish the database connection */
      $conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


      $result = $conn->query("SELECT Compliancestatus,value FROM COUNT_VALUE WHERE Zone='PZ' and country='AU' and `Compliancestatus` is not null
");





      $rows = array();

        foreach($result as $r) {


          $rows[] = array( $r['Compliancestatus'],(int)$r['value']); 



        }

    // convert data into JSON format
    $jsonTable = json_encode($rows);

    print_r($jsonTable);
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
    //mysql_close($conn);

     $conn=null;

    ?>

<script>
$(document).ready(function(){
        //var data1=[
//    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
//    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
//  ];                 
 var data1 =<?php echo $jsonTable;?>;
 alert(data1);
  var plot1 = jQuery.jqplot ('chart1', [data1], 
 { 
      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true
        }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
});

</script>
<div id="chart1"></div>
query("SELECT ComplianceStatus,count FROM indexonboard WHERE zone='SEA' and country='SG'");

Answer 1

为两者使用不同的固定器并固定宽度和高度

<div id="piechartHolder" >
        <div style="width:50%">
            <span id="Chart1Title">Chart1</span>
            <div id="chart1" style="width:100%">                
        </div>
                <div style="width:50%">
            <span id="Chart2Title">Chart2</span>
            <div id="chart2" style="width:100%">                
        </div>
</div>

Answer 2

尝试指定div大小，它应该有帮助

<div id="chart" style="height:300px; width:600px;"></div>

如何在单个页面中渲染多个jqplot的饼图

2 个答案: