我现在有一个3选项卡页面。每个标签是被设置到一个div display: hidden时不被选择。在这些选项卡我有与Susy（指南针插件）创建的网格系统。同样，每个标签页都有一套Highcharts的。当我加载的页面，这取决于哪个标签是在URL中，突出部中的一个被加载。所有图表看起来很好，但是当我切换到不同的选项卡，一些图表不正确在他们的div配件。如果我只是重新调整窗口大小，图表被重新计算，然后他们配合得非常完美。或者，如果我重新加载相同的标签，图表符合也没关系。 我可以调用，将调整页面上的所有图表，当我让我的标签切换功能？

它看起来像这样：

当它应该是这样的：

编辑：看起来这是没有直接关系的highcharts一个问题，例如我的谷歌地图是这样的：

但是当我调整窗口的大小是正确的调整：

我可以让CSS刷新/调整通过JS函数调用我的网格时，标签被打开？

Answer 1:

什么工作对我来说是调用：

$(window).resize();

当我打开一个新的标签。仍然有谷歌地图API的问题，但它的伟大工程与Highcharts。

Answer 2:

“：无显示”，当你试图呈现的东西，开始的时候使用你会发现很多的问题。虽然$（窗口）.resize（）可能会在很多情况下工作，我会建议试图为显示之前先渲染你的页面：没有生效。一种可能的解决办法是设置不透明度：0或visibility：hidden的。

显示属性是什么控制你的元件将如何呈现，例如块（100％宽度）或内联（适应内容）。当一个元素有显示：无，它将覆盖这一点，最终去除它的有效宽度和高度，直到该元件接收一个块类型。

这里是展示一个例子： http://jsfiddle.net/m2f3scmm/3/

<div id="log1" style="display: none;">
</div>
<div id="log2" style="visibility: hidden;">
</div>
<div id="log3" style="opacity: 0">
</div>

当您使用了“调整”的黑客，我们假定你是插件，或者你正在使用绑定到窗口的resize事件是情况并非总是如此脚本。触发window.resize也可以减缓渲染或造成不良影响（例如，小动画highcharts确实当第一渲染 - 这看起来跛当每一个选项卡改变时发生）。

Answer 3:

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null) && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(function () { // for only visible charts container in the curent context
                $container = $(this); // context container
                $container.find('div[id^="chart-"]').each(function () { // for only chart
                    $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                    $chart.setSize($container.width(), $chart.chartHeight, doAnimation = true); // adjust chart size with animation transition
                });
            });
        } else {
            chart.setSize($('.chart-container:visible').width(), chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    }
    catch (err) {
        // do nothing
    }
}

用法

$(window).resize(function () {
        if (this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            // resizeEnd call function with pass context body
            adjustGraph.call($('body'));

        }, 500);
    });

为引导标签

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var isChart = $(this).attr('data-chart');
            var target = $(this).attr('href');
            if (isChart) {
                // call functio inside context target
                adjustGraph.call($(target));
            }
        });



  <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active">
            <a href="#anagrafica" data-toggle="tab"><h5>Anagrafica</h5></a>
        </li>
        <li>
            <a href="#consumi" data-toggle="tab" data-chart="1"><h5>Consumi</h5></a>
        </li>
    </ul>

在图表上

new Highcharts.Chart({
            chart: {
                renderTo: 'chart-bar',
                defaultSeriesType: 'column',
                zoomType: 'xy',
                backgroundColor: null,
                events: {
                    load: function (event) {
                        adjustGraph(this);
                    }
                }
            },

HTML代码

div class="tab-pane" id="charts">
    <div class="row-fluid">
        <div class="span6 offset3">
            <div id="myCarousel" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner chart-container">
                    <div class="active item">
                        <h3>Chart 1/h3>
                        <div id="bar-pod-annuale">
                           <div id="chart-bar" style="width:100%;margin: 0 auto"></div>
                        </div>
                    </div>
                    <div class="item">
                        <h3>Char 2</h3>
                        /** chart **/
                    </div>
                    <div class="item">
                        <h3>Char 3</h3>
                        /** chart **/
                    </div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
            </div>
        </div>
    </div>

查看的jsfiddle http://jsfiddle.net/davide_vallicella/LuxFd/2/

文章来源: Highcharts - Hidden charts don't get re-size properly