问题 隐藏父容器时，不会呈现绘图图形
我遇到了一个问题，即flot图形不会在标签界面中呈现，因为占位符div是具有'display：none'的div的子元素。将显示轴，但没有图形内容。
我在下面编写了javascript函数作为plot函数的包装器来解决这个问题。对其他人做类似事情可能会有用。
function safePlot(placeholderDiv, data, options){
// Move the graph place holder to the hidden loader
// div to render
var parentContainer = placeholderDiv.parent();
$('#graphLoaderDiv').append(placeholderDiv);
// Render the graph
$.plot(placeholderDiv, data, options);
// Move the graph back to it's original parent
// container
parentContainer.append(placeholderDiv);
}
这是可以放置的图形加载器div的CSS
在页面的任何地方。
#graphLoaderDiv{
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 150px;
}
10062
2018-03-25 01:50
起源
答案:
也许这是更好的解决方案。它可以用作替代品 $.plot()：
var fplot = function(e,data,options){
var jqParent, jqHidden;
if (e.offsetWidth <=0 || e.offetHeight <=0){
// lets attempt to compensate for an ancestor with display:none
jqParent = $(e).parent();
jqHidden = $("<div style='visibility:hidden'></div>");
$('body').append(jqHidden);
jqHidden.append(e);
}
var plot=$.plot(e,data,options);
// if we moved it above, lets put it back
if (jqParent){
jqParent.append(e);
jqHidden.remove();
}
return plot;
};
然后接听你的电话 $.plot() 并将其更改为 fplot()
8
2017-11-07 17:43
唯一没有任何CSS技巧的东西是在这之后加载1秒后的情节：
$('#myTab a[href="#tabname"]').on("click", function() {
setTimeout(function() {
$.plot($(divChartArea), data, options);
}, 1000);
});
或者对于较旧的jquery
$('#myTab a[href="#tabname"]').click (function() {
setTimeout(function() {
$.plot($(divChartArea), data, options);
}, 1000);
});
以上示例适用于Click功能的Bootstrap标记。但应该适用于任何隐藏的div或对象。
工作范例： http://topg.org/server-desteria-factions-levels-classes-tokens-id388539
只需点击“播放器”标签，您就会看到上面的示例。
2
2017-09-27 02:40
答案:
也许这是更好的解决方案。它可以用作替代品 $.plot()：
var fplot = function(e,data,options){
var jqParent, jqHidden;
if (e.offsetWidth <=0 || e.offetHeight <=0){
// lets attempt to compensate for an ancestor with display:none
jqParent = $(e).parent();
jqHidden = $("<div style='visibility:hidden'></div>");
$('body').append(jqHidden);
jqHidden.append(e);
}
var plot=$.plot(e,data,options);
// if we moved it above, lets put it back
if (jqParent){
jqParent.append(e);
jqHidden.remove();
}
return plot;
};
然后接听你的电话 $.plot() 并将其更改为 fplot()
8
2017-11-07 17:43
唯一没有任何CSS技巧的东西是在这之后加载1秒后的情节：
$('#myTab a[href="#tabname"]').on("click", function() {
setTimeout(function() {
$.plot($(divChartArea), data, options);
}, 1000);
});
或者对于较旧的jquery
$('#myTab a[href="#tabname"]').click (function() {
setTimeout(function() {
$.plot($(divChartArea), data, options);
}, 1000);
});
以上示例适用于Click功能的Bootstrap标记。但应该适用于任何隐藏的div或对象。
工作范例： http://topg.org/server-desteria-factions-levels-classes-tokens-id388539
只需点击“播放器”标签，您就会看到上面的示例。
2
2017-09-27 02:40
这个是FAQ：
你的 #graphLoaderDiv 必须有宽度和高度，不幸的是，隐形div没有它们。相反，让它可见，但将其左侧设置为 -10000px。然后，一旦你准备好显示它，只需将它设置为0px（或其他）。
1
2018-03-25 15:36
好的，我现在明白了你真正说的是什么......我仍然认为你的答案太复杂了。我只是使用选项卡式界面尝试了这一点，其中图形在加载时位于隐藏选项卡中。它似乎对我很好。
http://jsfiddle.net/ryleyb/dB8UZ/
我没有 visibility:hidden 在那里，但它似乎没有必要......
你也可以 visibility:hidden 设置然后将标签代码更改为以下内容：
$('#tabs').tabs({
show: function(e,ui){
if (ui.index != 2) { return; }
$('#graphLoaderDiv').css('visibility','visible');
}
});
但鉴于所提供的信息，这些似乎都不是特别必要。
0
2018-03-26 23:11
我知道这有点旧，但您也可以尝试使用File的Resize插件。
http://benalman.com/projects/jquery-resize-plugin/
它并不完美，因为你有时会获得可能缩小的非尺寸图形的闪光。根据您使用的图表类型，也可能会关闭某些格式和定位。
0
2018-04-06 23:23