与Highcharts Gridster，使特定图表更小，并重新计算 [英] Gridster with Highcharts, make specific Chart smaller and recalculate

问题描述

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

  $（ .dashboard> li）.each（function（）
 {
 var chart = $（this）.children（'div'）; 
 
 //控制台。 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（）; 
} 
}）; 
  

但没有任何反应。

如果我手动调整窗口小部件和高度图的大小，主栅格仍然大于窗口，因为它不会重写。

请帮助我。

Update1：​​
定位问题

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

解决方案

是的，它已完成！ ：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是一个函数：以编程方式移动Gridster Widgets

感谢您的回答

[CLOSED]

i am building a dashboard with gridster and highcharts. If i resize the window and a widget with a highchart is bigger than the window, i want to resize it to make it smaller and gridster should recalculate the positions of the others. I tried this code to make a widget and its highchart smaller if its bigger than the windows width:

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

but nothing happens.

If i resize the widgets and its highcharts manually, the main grid is still bigger than the window, because it doesnt recalcualte.

Please help me with that.

Update1: Positioning-Problem

So now i've made it in this way: If the screensize is unter a limit, all widgets get the same size and will be pushed to the first row by setting data-col=1 with jquery. Now a new problem occurs: The pushed widgets are overlapping the others. I guess gridster isnt recalcualting this stuff. How do i force him to recalcualte positions? "avoid_overlapped_widgets: true" isn't working

解决方案

Yes its done!!!! :D

SOLUTION:

I am calculation the last row with:

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'));
            });

and then I moved my all my widgets to the first column and the last row

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

move_widget is a function made here: Move Gridster Widgets programmatically

Thanks for answering

[CLOSED]

这篇关于与Highcharts Gridster，使特定图表更小，并重新计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！