调整网格和多个高图的大小和定位问题

我基于我的代码尝试在这里的例子:当gridster.js与highcharts.

我用6个Highcharts设置Gridster。当我看到单独的图表时，调整大小的功能似乎并不能很好地工作，特别是在多次调整大小之后(通常情况下，调整大小的直角不在网格的右下角)，图表似乎重叠，而不是显示我在网格演示中看到的定位特征。(可能是浏览器问题吗?)

如果有人能告诉我如何重新配置我的jsfiddle代码示例，以实现Highchart图中预期的Gridster性能和预期的大小调整能力，我将非常感激。

另外，任何关于在css中分别设置每个图表的背景颜色的提示也会有所帮助。

多谢

我在这里设置了一个jsfiddle。

    <div class="controls">
      <button class="js-resize-random">Resize random widget</button>
  </div>
  <div class="gridster ready">
    <ul style="height: 520px; width: 550px; position: relative;">
        <li class="gs-w" data-row="1" data-col="1" data-sizex="2"data-sizey="4">
        <div id="container1" style="width:100%;height:100%;margin: 0 auto"</div>
      <span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="1" data-col="3" data-sizex="1" data-sizey="2">
          <div id="container2" style="width:100%;height:100%;margin: 0 auto">
          <span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="1" data-col="4" data-sizex="1" data-sizey="1">
           <div id="container3" style="width:100%;height:100%;margin: 0 auto">
          <span class="gs-resize-handle gs-resize-handle-both"></span></li>
       <li class="gs-w" data-row="3" data-col="2" data-sizex="3" data-sizey="1">
           <div id="container4" style="width:100%;height:100%;margin: 0 auto">  
           <span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="1" data-col="5" data-sizex="1" data-sizey="3">
            <div id="container5" style="width:100%;height:100%;margin: 0 auto"> 
          <span class="gs-resize-handle gs-resize-handle-both"></span></li>
        <li class="gs-w" data-row="1" data-col="5" data-sizex="1"data-sizey="3">
            <div id="container6" style="width:100%;height:100%;margin: 0 auto"> 
          <span class="gs-resize-handle gs-resize-handle-both"></span></li>    
    </ul>
  </div>

var gridster;
      $(function(){
        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 55],
          widget_margins: [5, 5],
          helper: 'clone',
          resize: {
            enabled: true,
            stop: function(e, ui, $widget) {
              Highcharts.charts[0].reflow();
            }
          }
        }).data('gridster');

        $('.js-resize-random').on('click', function() {
            gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
                getRandomInt(1, 4), getRandomInt(1, 4))
        });
      });

      $(function(){
        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [50, 50],
          widget_margins: [5, 5],
          helper: 'clone',
          resize: {
            enabled: true,
        stop: function(e,ui,$widget){
        Highcharts.charts[0].reflow(); // reflow the first chart
        Highcharts.charts[1].reflow(); 
        Highcharts.charts[2].reflow(); 
        Highcharts.charts[3].reflow();
        Highcharts.charts[4].reflow(); 
        Highcharts.charts[5].reflow();
          }
        }
      }).data('gridster');

        $('.js-resize-random').on('click', function() {
            gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
                getRandomInt(1, 4), getRandomInt(1, 4))
        });
      });
$(function () {
        $('#container1').highcharts({
$(function () {
        $('#container2').highcharts({
$(function () {
        $('#container3').highcharts({
$(function () {
        $('#container4').highcharts({
$(function () {
        $('#container5').highcharts({
$(function () {
        $('#container6').highcharts({