即/ chrome检查员导致重绘

时间:2014-05-15 19:24:35

标签: javascript html css google-visualization

我有一些图表/图表,我正在使用谷歌可视化API来显示。最初我已将其容器的显示设置为无。一旦用户单击一个按钮,我就使用javascript来阻止容器的display属性。我这样做时会看到两种奇怪的行为

  1. 当我这样做时,图表显示不正确(它们的尺寸较小,导致某些文本标签相互之间或图表之外)。但是,如果我最初没有将display属性设置为none,那么它们工作得很好。

  2. 当图表混乱并按F12(在ie或chrome上)打开检查器时,这些图表会再次神奇地重绘为适当的大小。

  3. 有没有办法解决第一个问题或以某种方式使用javascript来模拟我打开检查员时发生的重绘?

3 个答案:

答案 0 :(得分:2)

您可以尝试以下选项:

1)将容器div的显示属性更改为'' (空括号)而不是块

2)将display属性更改为block后,强制窗口调整大小事件。    
你可以使用jQuery resize()方法,如下所示:

$(window).resize(); 

答案 1 :(得分:0)

我尝试使用脚本调整窗口大小,但我发现某些浏览器不支持此功能。最后,我最终使用jQuery从DOM中删除容器div,然后在我想显示它时再次附加它。这保留了图表的正确尺寸

$tab3 = $('#tab3').remove();

然后当我想显示它时(类窗格的div是id tab3的div的原始父级)

$('.panes').append($tab3);

答案 2 :(得分:0)

在隐藏div中绘制图表会导致Visualization API的维度检测算法中断,这就是您的图表混乱的原因。修复是在div显示时绘制图表,然后在绘制图表后隐藏div。您可以为图表使用“就绪”事件处理程序来完成此任务:

google.visualization.events.addListener(chart, 'ready', function () {
    document.querySelector('#myChartDiv').style.display = 'none';
});