我有一些图表/图表,我正在使用谷歌可视化API来显示。最初我已将其容器的显示设置为无。一旦用户单击一个按钮,我就使用javascript来阻止容器的display属性。我这样做时会看到两种奇怪的行为
当我这样做时,图表显示不正确(它们的尺寸较小,导致某些文本标签相互之间或图表之外)。但是,如果我最初没有将display属性设置为none,那么它们工作得很好。
当图表混乱并按F12(在ie或chrome上)打开检查器时,这些图表会再次神奇地重绘为适当的大小。
有没有办法解决第一个问题或以某种方式使用javascript来模拟我打开检查员时发生的重绘?
答案 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';
});