无法获得Flot条形图并排渲染

Question

尽管看了很多教程，但无论如何，该浮动图表的条形图都是相互重叠的。我现在所得到的不是理想的，但是它比彼此重叠的条更好。右边有一个条，左边有一个条，第三个条在中心重叠。我正在尝试并排放置所有三个酒吧。

我已经尝试了许多链接上提供的解决方案，例如： jQuery flot multi bar chart side by side

Javascript：

    <!-- Custom Theme JavaScript -->
    <script src="../js/jquery-1.9.1.min.js"></script>

    <!-- Flot Charts JavaScript -->
    <script src="../js/flot/excanvas.min.js"></script>
    <script src="../js/flot/jquery.flot.js"></script>
    <script src="../js/flot/jquery.flot.resize.js"></script>
    <script src="../js/flot/jquery.flot.time.js"></script>
    <script src="../js/flot/jquery.flot.tooltip.min.js"></script>
    <script src="../js/flot/jquery.flot.categories.js"></script>
    <script src="../js/flot/jquery.flot.threshold.js"></script>
    <script src="../js/flot/jquery.flot.orderBars.js"></script>

<div id="flot-bar-chart" class="chart" style="width:90%;height:200px; margin: 0 auto;"></div>

<script>


//Flot Bar Chart

$(function() {

    var barOptions = {
        series: {
            bars: {
                show: true,
            }
        },
        xaxis: {
            ticks:[
                [0,'Jan'],
                [1,'Feb'],
                [2,'Mar'],
                [3,'Apr'],
                [4,'May'],
                [5,'June'],
                [6,'July'],
                [7,'Aug'],
                [8,'Sep'],
                [9,'Oct'],
                [10,'Nov'],
                [11,'Dec']
            ],
            autoscaleMargin: .02
        },
        grid: {
            hoverable: true
        },
        legend: {
                  noColumns: 0,
                  container: $("#chartLegend")
              },
        tooltip: true,
        tooltipOpts: {
            content: " %y "
        }
    };

    var barData = {
        label: "All Agents",
        bars: {
                show: true,
                barWidth: 0.4,
                align: "right"
            },
        color: "Cyan",
        data: [
            [0, <?php echo $count_all_Jan; ?>],
            [1, <?php echo $count_all_feb; ?>],
            [2, <?php echo $count_all_mar; ?>],
            [3, <?php echo $count_all_apr; ?>],
            [4, <?php echo $count_all_may; ?>],
            [5, <?php echo $count_all_jun; ?>],
            [6, <?php echo $count_all_jul; ?>],
            [7, <?php echo $count_all_aug; ?>],
            [8, <?php echo $count_all_sep; ?>],
            [9, <?php echo $count_all_oct; ?>],
            [10, <?php echo $count_all_nov; ?>],
            [11, <?php echo $count_all_dec; ?>]
        ]
    };

    var barData2 = {
        label: "Full CAPing",
        bars: {
                show: true,
                barWidth: 0.4,
                align: "left"
            },
        color: "red",
        data: [
            [0, <?php echo $count_a_Jan; ?>],
            [1, <?php echo $count_a_feb; ?>],
            [2, <?php echo $count_a_mar; ?>],
            [3, <?php echo $count_a_apr; ?>],
            [4, <?php echo $count_a_may; ?>],
            [5, <?php echo $count_a_jun; ?>],
            [6, <?php echo $count_a_jul; ?>],
            [7, <?php echo $count_a_aug; ?>],
            [8, <?php echo $count_a_sep; ?>],
            [9, <?php echo $count_a_oct; ?>],
            [10, <?php echo $count_a_nov; ?>],
            [11, <?php echo $count_a_dec; ?>]
        ]
    };

    var barData3 = {
        label: "Quarter CAPing",
        bars: {
                show: true,
                barWidth: 0.4,
                align: "center"
            },
        color: "green",
        data: [
            [0, <?php echo $count_q_Jan; ?>],
            [1, <?php echo $count_q_feb; ?>],
            [2, <?php echo $count_q_mar; ?>],
            [3, <?php echo $count_q_apr; ?>],
            [4, <?php echo $count_q_may; ?>],
            [5, <?php echo $count_q_jun; ?>],
            [6, <?php echo $count_q_jul; ?>],
            [7, <?php echo $count_q_aug; ?>],
            [8, <?php echo $count_q_sep; ?>],
            [9, <?php echo $count_q_oct; ?>],
            [10, <?php echo $count_q_nov; ?>],
            [11, <?php echo $count_q_dec; ?>]
        ]
    };

    $.plot($("#flot-bar-chart"), [barData, barData2, barData3], barOptions);

});

</script>

        <style>
        #chartLegend {
              border-radius: 8px 8px 8px 8px;
              border-top: 1px solid grey;
              border-bottom: 1px solid grey;
        }
        #chartLegend th, #chartLegend td {
              padding: 5px;          
              display: inline-block;
          }
        </style>                                
        <div id="chartLegend" align="center"></div>