Google图表选项卡 - 隐藏选项卡中的图表大小和位置不正确 [英] Google Charts in tabs - chart size and position incorrect in hidden tab

问题描述

我有一组两个标签。每个标签中都有一个Google图表。这两个图表在大小和位置上应该是相同的。

加载页面时，图表的位置是我想要的位置（无论您选择哪个选项卡最初是）。然后移动到另一个选项卡（最初隐藏）图表的位置并调整大小。

您可以在示例中看到以下内容： http://cb.tortoise-dev.co.uk/

<为了简化事情，我已经为图表容器添加了固定的宽度和高度，但这没有帮助。我很确定问题是当页面被加载时，隐藏的容器没有尺寸，并且图表被绘制成一种默认大小而不是填充容器（就像它在最初可见的选项卡中那样）。我不确定解决方案是什么。

任何帮助将不胜感激。

解决方案

您的怀疑是正确的：如果图表的容器div（或父元素）在绘图时隐藏调用后，Visualization API的尺寸测量结果就会变得混乱起来，并且会出现类似您注意到的效果。您可以使用几种不同的解决方案：

1. 在初始化标签之前绘制图表，因此所有div在绘制时间都可见


2. 在您的选项卡上设置事件处理程序，以在第一次打开时在选项卡中绘制所有图表
   
3. 在绘制图表之前立即取消隐藏所有div ，然后根据需要在图表的就绪事件处理程序中重新隐藏div

I have a set of two tabs. Each tab has a Google chart inside it. Both these charts should be identical in terms of size and position.

When the page is loaded, the position of the chart is how I want it (regardless of which tab you are initially on). When you then move to the other tab (initially hidden) the chart's position and sizing changes.

You can see this in the example here: http://cb.tortoise-dev.co.uk/

To simplify things I've added fixed widths and heights to the chart container, but this hasn't helped. I'm pretty sure that the problem is to do with the hidden container having no dimensions when the page is loaded and the chart being drawn to a sort of default size rather than filling the container (like it does in the initially visible tab). I'm not sure what the solution is though.

Any help would be greatly appreciated. Thanks in advance.

解决方案

Your suspicion is correct: if the chart's container div (or a parent element) is hidden when the draw call is made, the Visualization API's dimensional measurements get messed up, and effects like the one you've noticed show up. There are a few different solutions you can go with:

1. draw the charts before you initialize your tabs, so all divs are visible at draw time
2. set up event handlers on your tabs to draw all charts within a tab when it is first opened
3. unhide all divs immediately prior to drawing the charts, then re-hide divs as necessary in "ready" event handlers for the charts

这篇关于Google图表选项卡 - 隐藏选项卡中的图表大小和位置不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！