Gridster 与 Highcharts，使特定图表更小并重新计算

Posted 2023-05-07

【中文标题】Gridster 与 Highcharts，使特定图表更小并重新计算

【英文标题】：Gridster with Highcharts, make specific Chart smaller and recalculate

【发布时间】：2015-12-15 20:40:58

【问题描述】：

我正在用gridster和highcharts构建一个仪表板。 如果我调整窗口的大小并且带有 highchart 的小部件比窗口大，我想调整它的大小以使其更小，并且 gridster 应该重新计算其他小部件的位置。 如果它大于窗口宽度，我尝试使用此代码使小部件及其高图更小：

$( ".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();
            
        );

但什么也没发生。

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

请帮帮我。

更新1： 定位问题

所以现在我已经这样做了：如果屏幕尺寸超出限制，所有小部件都将获得相同的尺寸，并通过使用 jquery 设置 data-col=1 将其推送到第一行。现在发生了一个新问题：推送的小部件正在重叠其他小部件。我猜gridster不会重新计算这些东西。我如何强迫他重新计算职位？ “avoid_overlapped_widgets: true”不起作用

【问题讨论】：

这是我“缩小特定图表”的问题：***.com/questions/32630868/…

【参考方案1】：

在 gridster 中更改宽度时调用窗口调整大小功能。使用 highchart 以百分比形式调用 div 的宽度。不要使用固定宽度。

 $(window).resize();

【讨论】：

所以现在我这样做了：如果屏幕尺寸超出限制，则所有小部件都将获得相同的尺寸，并将通过使用 jquery 设置 data-col=1 将其推送到第一行.现在出现了一个新问题：推送的小部件与其他小部件重叠。我猜gridster不会重新计算这些东西。我如何强迫他重新计算职位？ “avoid_overlapped_widgets: true”不起作用

【参考方案2】：

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

【参考方案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

感谢回复

[关闭]

【讨论】：

哦不，他不会在 android 中这样做

ok Android 没有加载完整的 javascript。再试一次就可以了