带有 Highcharts 的 Gridster，缩小特定图表并重新计算

Question

我正在构建一个带有 gridster 和 highcharts 的仪表板。如果我调整 window 的大小并且带有高图的小部件大于 window，我想调整它的大小以使其更小并且 gridster 应该重新计算其他的位置。我试过这段代码来制作一个小部件，如果它大于 windows 宽度，它的高图会更小：

$( ".dashboard > li" ).each(function()
        {
            var chart = $(this).children('div');

//          console.log(' Window: ' + width);
            console.log(chart);
            if(chart.width() > width)
            {
                //alert('hier');
//              $(this).css('width',width + 'px');
                $(this).css('background-color','red');
                chart.width(width);
                chart.highcharts().reflow();
            }
        });

但什么也没发生。

如果我手动调整小部件及其高位图的大小，主网格仍然比 window 大，因为它不会重新计算。

请帮助我。

更新1：定位问题

所以现在我是这样实现的：如果屏幕尺寸低于限制，所有小部件都将获得相同的尺寸，并且将通过设置 data-col=1 和 [=25= 被推到第一行].现在出现了一个新问题：推送的小部件与其他小部件重叠。我猜 gridster 不会重新计算这些东西。我如何强迫他重新计算位置？ "avoid_overlapped_widgets: true" 不工作

Answer 1

在 gridster 中更改宽度时调用 window 调整大小功能。使用高图调用 div 的百分比宽度。不要使用固定宽度。

 $(window).resize();

Answer 2

您可以将图表容器的宽度设置为 100%（在 CSS 中）或在调整图表大小时调用 setSize。

Answer 3

是的，完成了！！！！ :D

解决方案：

我正在计算最后一行：

var row = 0;
var lastRow = 0;
$( ".dashboard > li" ).each(function()
            {
                rowe = parseInt($(this).attr('data-row'));
                if(row < rowe)
                {
                    row = rowe;
                    lastElement = $(this);
                }
                lastRow = parseInt($(this).attr('data-row'));
            });

然后我将所有小部件移至第一列和最后一行

if(parseInt($(this).attr('data-col')) > 1)
{
   $(".gridster ul").data('gridster').move_widget($(this), 1, lastRow);
 }

move_widget 是这里创建的函数：Move Gridster Widgets programmatically

感谢您的回答

[关闭]

带有 Highcharts 的 Gridster，缩小特定图表并重新计算

Gridster with Highcharts, make specific Chart smaller and recalculate

highcharts

responsive-design

gridster