传说与flot饼图重叠

Question

在我的网站中，我在标签中使用了Flot饼图。在每个标签中，传说都会出现在饼图上。我不明白我错在哪里。有谁可以帮助我。我附了屏幕截图。

我的代码：

    <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

Answer 1

我认为问题在于你的标签是长的和/或宽度是小的。尝试扩展div宽度。

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

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