2014-01-29 89 views
0

在我的網站中,我使用Flot餅圖中的餅圖。在每一個標籤中,傳說都會出現在餅圖中。我不明白我錯在哪裏。任何人都可以幫助我。我附上了屏幕截圖。重疊flot餅圖的傳奇

Legend Overlapping the chart

我的代碼:

<script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script> 
      <script src="assets/plugins/flot/jquery.flot.js"></script> 
      <script src="assets/plugins/flot/jquery.flot.pie.js"></script> 
     <script src="assets/plugins/flot/jquery.flot.resize.js"></script> 
     <script src="assets/plugins/flot/jquery.flot.stack.js"></script> 
     <script src="assets/plugins/flot/jquery.flot.crosshair.js"></script> 
    <?php 
    mysql_select_db($database_finalkms, $finalkms); 
    $query_getdata2 = "SELECT ComplianceStatus,count FROM indexonboard WHERE zone='PZ' and country is NULL"; 
    $getdata2 = mysql_query($query_getdata2, $finalkms) or die(mysql_error()); 
    $row_getdata2 = mysql_fetch_assoc($getdata2); 
    $totalRows_getdata2 = mysql_num_rows($getdata2); 
    ?> 


    <script> 

    jQuery(document).ready(function() { 
      Charts1.initPieCharts(); 

       }); 
    </script> 
    <?php $m=0;do {?> 
    <input name="grptst5<?php echo $m; ?>" id="grptst5<?php echo $m; ?>" type="hidden" value="<?php echo $row_getdata2['ComplianceStatus']; ?>" /> 
    <input name="datatst5<?php echo $m; ?>" id="datatst5<?php echo $m; ?>" type="hidden" value="<?php echo $row_getdata2['count']; ?>" /> 
    <?php $m++;} while($row_getdata2 = mysql_fetch_assoc($getdata2));?> 
    <input name="totali5" id="totali5" type="hidden" value="<?php echo $totalRows_getdata2; ?>" /> 
    <?php 
    mysql_free_result($getdata2); 
    ?> 
    <div id="interactive5" class="chart" style=" 
    width:400px;height: 400px;;float:right;"></div> 
    <script> 
    var Charts1 = function() { //1st 


     return { //2nd 
      //main function to initiate the module 

      init: function() { //3rd 

       App.addResponsiveHandler(function() { //4th 
        Charts1.initPieCharts(); 

       }); //4th 

      }, //3rd 

      initPieCharts: function() { 
       var totalid5=$("#totalid5").val(); 
    var data4 =[]; 
    for (var n = 0; n < totali5; n++) { 
        var one4=document.getElementById("grptst5" + n).value; 


        var two4 =document.getElementById("datatst5" + n).value; 


        data4[n] = { 
         label: one4, 
         data: two4 
        } 
       } 
    $.plot($("#interactive"), data, { 
     series: { 
      pie: { 
       show: true, 
       label: { 
        show: true, 
        formatter: function(label,point){ 
         return(point.percent.toFixed(2) + '%'); 

        } 
       } 
      } 
     },  
     colors: ["#00FF00","#FF9933","#6495ED","#B0B0B0"], 
     legend: {show: true, 

       backgroundOpacity:0, 
       sorted:"comparator" 
       } 
    }); 

       $("#interactive").bind("plothover", pieHover); 
     function pieHover(event, pos, obj) { 
       if (!obj) 
         return; 
        percent = parseFloat(obj.series.percent).toFixed(2); 
        $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' </span>'); 
       } 
    } 
}; //2nd 


}(); //1st 

回答

0

我相信這個問題是你的標籤是長和/或寬度爲小。嘗試擴展div寬度。

<div id="placeholder" style="width:500px;height:300px;"></div> 

小提琴 - http://jsfiddle.net/Rnusy/46/