选项卡中的 Google 图表 - 隐藏选项卡中的图表大小和位置不正确答案

【问题标题】：Google Charts in tabs - chart size and position incorrect in hidden tab选项卡中的 Google 图表 - 隐藏选项卡中的图表大小和位置不正确
【发布时间】：2013-11-29 16:49:23
【问题描述】：

我有一组两个选项卡。每个标签里面都有一个谷歌图表。这两个图表的大小和位置应该相同。

当页面加载时，图表的位置就是我想要的（不管你最初在哪个标签上）。然后，当您移动到另一个选项卡（最初是隐藏的）时，图表的位置和大小会发生变化。

您可以在此处的示例中看到这一点：http://cb.tortoise-dev.co.uk/

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

任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： google-visualization

【解决方案1】：

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

在初始化选项卡之前绘制图表，因此所有 div 在绘制时都可见
在选项卡上设置事件处理程序，以便在选项卡首次打开时在选项卡中绘制所有图表
在绘制图表之前立即取消隐藏所有 div，然后在图表的“就绪”事件处理程序中根据需要重新隐藏 div

【讨论】：

【解决方案2】：

对于 Twitter Bootstrap 用户，我发现以下 js sn-p 非常有用。这是使用@asgallant 提供的第二种解决方案的一种方式，并利用了http://getbootstrap.com/javascript/#tabs-events 中记录的内置引导选项卡事件。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  if($(e.target).attr('id') == 'first-tab-trigger')
  {
    drawFirstChart();
  }
  if($(e.target).attr('id') == 'second-tab-trigger')
  {
    drawSecondChart();
  }
})

sn-p 要求您向选项卡添加唯一的类或 id 选择器，如下所示（例如，class="first-tab-trigger" 等）：

    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#section-one" id="first-tab-trigger" data-toggle="tab">
            FIRST TAB
        </a>
      </li>
      <li class="col-sm-3">
        <a href="#section-two" id="second-tab-trigger" data-toggle="tab">
            SECOND TAB
        </a>
      </li>
      ...
    </ul>

现在，当单击一个选项卡并且该选项卡的内容可见时，就会绘制（或重新绘制）图表。这解决了您在隐藏选项卡中有图表时遇到的大小问题。

【讨论】：

【解决方案3】：

您还可以在内容再次可见时“重新调整”窗口的大小，从而实现图表重绘的技巧：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  window.dispatchEvent(new Event('resize'));
});

【讨论】：