JQuery Accordion中的可调整大小的Google可视化 [英] Resizable Google Visualization inside JQuery Accordion

问题描述

在一个JQuery可调整大小的 div 我有一个JQuery手风琴小部件。在每个手风琴元素的内部是通过设置 width在手风琴 div 中心的表 ：100％; margin：0 auto; 。每个表中都有一个具有Google可视化列图表的 td 元素。

当resize事件触发时像Google可视化文件一样重绘，因此图表的尺寸适合新的容器尺寸。我所遇到的问题是，只有在适当维度重绘的唯一图表是可见的手风琴div中的图表。

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

我还应该添加，可视化的宽度设置为'100％

感谢

解决方案

在你的chart.draw（）调用中，因为你在一个隐藏的元素上绘制图表。因此，对于您的选项变量，您可以将其设置为：

  var options = {'width'：400，
' height'：300}; // replace your desired dimensions 
 chart.draw（data，options）; 
  

如果您使用其他Google图表绘制方法从另一个最近的类似问题，Google图表API会从容器元素中拉出尺寸，当绘制调用是（）时，

相关：在隐藏的引导标签窗格上重绘google图表

Inside of a JQuery resizable div I have a JQuery Accordion Widget. Inside of each accordion element is a table that is centered in the accordion div by setting width: 100%; margin: 0 auto;. In each table is a td element that has a Google Visualization Column Chart.

When the resize event is triggered I'd like the Google Visualizations to redraw so the dimensions of the Charts fit the new container sizes. The problem I'm having is that the only Chart that is redrawn with the proper dimensions is the one in the visible accordion div.

I'm assuming that when a div element is set to display=none the container dimensions are ignored in the resize event. If this is true does anyone have any good suggestions to work around this?

I should also add that the width of the visualization is set to '100%' not a pixel number.

Thanks

解决方案

You may need to set explicity dimensions in in your chart.draw() call since you're drawing a chart on a hidden element. So for your options variable you would set it to:

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

Adjust accordingly if you're using one of the other Google Charts draw methods (wrapper.Draw() or drawChart()).

From another recent similar question, the Google Charts API pulls the dimensions from the container element when the draw call is made, but if the container is hidden, it has nothing to pull from.

related: redraw google charts on hidden bootstrap tab pane

这篇关于JQuery Accordion中的可调整大小的Google可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！