JQuery Accordion 中可调整大小的 Google 可视化答案

【问题标题】：Resizable Google Visualization inside JQuery AccordionJQuery Accordion 中可调整大小的 Google 可视化
【发布时间】：2014-07-19 05:50:49
【问题描述】：

在可调整大小的 JQuery div 内部，我有一个 JQuery Accordion Widget。每个手风琴元素的内部是一个table，通过设置width: 100%; margin: 0 auto; 位于手风琴div 的中心。每个表中都有一个 td 元素，其中包含一个 Google 可视化柱形图。

当触发调整大小事件时，我希望 Google 可视化重新绘制，以便图表的尺寸适合新的容器尺寸。我遇到的问题是，唯一用正确尺寸重绘的图表是可见手风琴 div 中的图表。

我假设当div 元素设置为display=none 时，resize 事件中会忽略容器尺寸。如果这是真的，有人有什么好的建议来解决这个问题吗？

我还应该补充一点，可视化的宽度设置为“100%”而不是像素数。

谢谢

【问题讨论】：

有趣。图表是在原始 td 内还是您尝试将其以 100% 的高度和宽度放入 div 中？表中有多少个 td？如果很少，为什么要一张桌子？您是否尝试过使用面积、高度宽度进行样式设置？
它在一个 div 中。老实说，它在桌子上的原因是因为我的 css 技能很弱。整个表格由 3 行组成，每行有 3 个 td 元素。第 1 行 == 标题。第 2 行 == 输入框、范围滑块、输入框。第 3 行 == ''，图表，''。图表是为了展示与上述滑块位置相关的项目分布情况。
好吧，有时表格可能会有点限制，所以这里是所有 div 的一个小技巧，也许我们可以稍微改进一下...jsfiddle.net/FT2qC

标签： javascript jquery html css jquery-ui

【解决方案1】：

您可能需要在您的 chart.draw() 调用中设置明确的维度，因为您在隐藏元素上绘制图表。因此，对于您的 options 变量，您可以将其设置为：

var options = {'width':400,
               'height':300}; //substitute your desired dimensions
chart.draw(data, options);

如果您使用的是其他 Google 图表绘制方法之一（wrapper.Draw() 或 drawChart()），请进行相应调整。

从最近的另一个类似问题中，Google Charts API 在进行绘图调用时从容器元素中提取尺寸，但如果容器被隐藏，则它没有可提取的内容。

【讨论】：

谢谢 GVIrish。这或多或少符合我的假设。我的图表选项中的 % 值是问题所在。