即/ chrome检查员导致重绘

Question

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

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

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

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

Answer 1

您可以尝试以下选项：

1）将容器div的显示属性更改为＆＃39;＆＃39; （空括号）而不是块
或
2）将display属性更改为block后，强制窗口调整大小事件。    
你可以使用jQuery resize（）方法，如下所示：

$(window).resize(); 

Answer 2

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

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

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

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

Answer 3

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

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