使用 gridster 和多个 highcharts 调整大小和定位问题

Question

我的代码尝试基于此处的示例：Resize issue while gridster.js with highcharts。

我用 6 个 Highcharts 设置了 Gridster。虽然我看到各个图表，但调整大小功能似乎无法正常工作，尤其是在多次调整大小后（通常调整大小的直角不在网格的右下角）并且图表似乎重叠而不是显示定位我在 gridster 演示中看到的特征。 （可能是浏览器问题？）

如果有人建议我如何重新配置​​我的 jsfiddle 代码示例以在 Highchart 图表中实现预期的 Gridster 性能和预期的调整大小功能，我将不胜感激。

此外，在 css 中单独设置每个图表的背景颜色的任何提示也会有所帮助。

非常感谢

我设置了一个 jsfiddle here。

    <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({

Answer 1

您有 2 个初始化 gridster 的函数。第一个是导致问题的原因。

//first gridster initialization
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))
  });
});

//second gridster initialization
var gridster;
$(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))
  });
});

对于背景颜色，您可以添加颜色样式。

.white { background: white; }
.red { background: red; }
.blue { background: blue; }
.yellow { background: yellow; }

并将每个样式按名称添加到每个“li”的类中，如下所示：

<li class="yellow 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="red 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="blue 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="white 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="yellow 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="blue 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>