google-visualization - 标签中的Google图表-隐藏标签中的图表大小和位置不正确

标签 google-visualization

我有两个选项卡。每个标签内都有一个Google图表。这两个图表的大小和位置都应该相同。

加载页面后,图表的位置就是我想要的位置(无论您最初位于哪个选项卡上)。然后,当您移至另一个选项卡(最初处于隐藏状态)时,图表的位置和大小将发生变化。

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

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

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

最佳答案

您的猜想是正确的:如果在进行绘制调用时隐藏了图表的容器div(或父元素),则Visualization API的尺寸度量会变得困惑,并且会出现类似您注意到的效果。您可以使用几种不同的解决方案:

  • 在初始化选项卡之前绘制图表,因此所有div在绘制时都可见
  • 在选项卡上设置事件处理程序,以在首次打开选项卡时绘制选项卡中的所有图表
  • 在绘制图表之前立即取消隐藏所有div,然后根据需要在图表的“就绪”事件处理程序中重新隐藏div
  • 关于google-visualization - 标签中的Google图表-隐藏标签中的图表大小和位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20290314/

    相关文章:

    javascript - 一页上有两个不同的谷歌图表

    google-visualization - 为 Google Visualization Geochart 指定经纬度而不是城市名称

    javascript - 使用多个谷歌图表和jspdf生成PDF

    css - 更改谷歌图表中图例指示器颜色的宽度

    charts - Google 可视化图表停止工作

    javascript - 数据未显示在谷歌条形图中

    javascript - Google Charts - 如何以堆叠形式显示数据 - 组合图表

    javascript - 对象文字 DataTable 中的 Google 可视化样式角色

    javascript - map : trigger a function on 'select'

    javascript - 谷歌图表 : Creating summary charts after category filters have been applied (+ JSFiddle issue)