Highcharts - 隐藏图表无法正确重新调整大小 [英] Highcharts - Hidden charts don't get re-size properly

问题描述

我目前有3个标签页。每个选项卡都是一个div，在未选中时设置为 display：hidden 。在这些标签中，我有一个使用Susy（指南针插件）创建的网格系统。另外每个标签页都有一组Highcharts。当我加载页面时，取决于URl中的哪个选项卡，加载了其中一个选项卡。所有的图表看起来都很好，但是当我切换到另一个选项卡时，某些图表不适合他们的div。如果我只是重新调整窗口的大小，图表将被重新计算，然后它们完美匹配。或者，如果我重新加载相同的选项卡，图表也很适合。 我可以调用一个函数来调整页面切换时的页面大小吗？

它看起来像这样：

当它应该看起来像这样：

<编辑：
似乎这不是一个直接与highcharts相关的问题，例如我的谷歌地图看起来像这样：

但是当我调整窗口大小时，它会正确调整：

我可以通过CSS来刷新/调整网格吗？在JS中调用一个函数调用时，该选项卡被切换了？

解决方案

b

  $（window）.resize（）; 
  

加载新标签页时。仍然存在Google Maps API的问题，但它对Highcharts效果很好。

I currently have a 3 tabbed page. Each tab is a div that is set to display: hidden when not selected. In these tabs I have a Grid system created with Susy (compass plugin). Also each tab page has a set of Highcharts. When I load the page, depending on which tab is in the URl, one of the tabs is loaded. All of the charts look fine, however when I switch to a different tab, some of the charts are not fitting correctly in their div. If I just re-size the window, the charts are recalculated and then they fit perfectly. Or if I reload that same tab, the charts fit fine too. Can I call a function that will resize all the charts on the page when I make my tab switch?

It looks like this:

when it should look like this:

EDIT: Seems like this isn't a problem directly related to highcharts, for example my google maps looks like this:

but when I resize the window it adjusts correctly:

Can I make CSS refresh/adjust my grids through a function call in JS when the tab gets switched?

解决方案

What worked for me is calling:

$(window).resize();

When I load a new tab. Still having the issues with the Google Maps API, but it works great with Highcharts.

这篇关于Highcharts - 隐藏图表无法正确重新调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！