我的代码尝试基于此处的示例:Resize issue while gridster.js with highcharts .
我用 6 个 Highcharts 设置了 Gridster。当我看到单独的图表时，调整大小功能似乎效果不佳，尤其是在多次调整大小后(通常调整大小的直 Angular 不在网格的右下角)并且图表似乎重叠而不是显示定位我在 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({
最佳答案
您有 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>
关于javascript - gridster 和多个 highcharts 的调整大小和定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25411132/