Highcharts - 隐藏的图表无法正确地重新调整大小

Question

我目前有一个3个选项卡的页面。每个选项卡都是一个div，当未被选择时设置为display: hidden。在这些选项卡中，我使用Susy (compass plugin)创建了一个网格系统。同时，每个选项卡页面都有一组Highcharts。当我加载页面时，根据URL中的哪个选项卡，加载其中一个选项卡。所有图表看起来都很好，但是当我切换到另一个选项卡时，某些图表在其div中不适合。如果我重新调整窗口大小，图表将被重新计算，然后它们就能完美地适应。或者如果我重新加载同一个选项卡，图表也会适合。在我的选项卡切换时，我可以调用一个函数来调整页面上的所有图表大小吗？

它看起来像这样：

它应该看起来像这样：

编辑： 似乎这不是直接与highcharts相关的问题，例如我的Google Maps看起来像这样：

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

我可以通过JS中的函数调用使CSS刷新/调整我的网格布局吗？

- thegreyspot

---

没有看到更多的代码，很难确定问题所在，但我猜测可能是某些东西直接在图表上设置了“宽度”和“高度”，可能是Highcharts JS。一种解决方法是让JS更改这些值，但你应该能够使用max-width: 100%来覆盖宽度设置，就像在响应式网格中处理图像一样。 - Miriam Suzanne

Answer 1

对我有效的方法是打电话：

$(window).resize();

当我加载一个新的选项卡时。仍然存在Google Maps API的问题，但它在Highcharts上运行得很好。

- thegreyspot

---

为了让您节省几分钟时间，这是jQuery UI / Tabs和Highcharts宽度问题的完整代码片段。$(function () { $("#tabs").tabs( { activate: function () { $(window).resize(); } }); }); - konrad_pe

谢谢！这让我疯了！ - fool4jesus

window.dispatchEvent(new Event('resize')) 比 jQuery 代码更少。 - Developia

new Event('resize') 很优雅，但不幸的是 IE 不支持。为了实现跨浏览器支持，请使用以下代码：var evt = document.createEvent("HTMLEvents"); evt.initEvent("resize", false, true); window.dispatchEvent(evt); - pmont

google.maps.event.trigger(MapObject, 'resize');，当切换到带有Google Maps的标签时调用此函数，可以修复Google地图问题。var MapObject = new google.maps.Map(document.getElementById('#myMap'), { }); - Dawood Awan

Answer 2

当尝试呈现使用"display: none"开始的内容时，您会遇到许多问题。虽然在许多情况下$(window).resize()可能有效，但我建议先渲染页面，然后再使"display: none"生效。一种可能的解决方案是将opacity: 0或visibility: hidden设置为属性。

"display"属性控制元素的呈现方式，例如块级（100%宽度）或内联（适合内容）。当一个元素具有"display: none"时，它会覆盖这个属性，最终删除其有效宽度和高度，直到该元素接收到块类型。

以下是一个示例以说明：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”hack时，您假设插件或脚本绑定到窗口的调整大小事件，但并非总是如此。触发window.resize还可能减慢渲染速度或导致不希望的效果（例如，当每次切换选项卡时发生小动画高图表首次呈现时显得很糟糕）。

- tribe84

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);
    });

关于Bootstrap标签页

$('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/

- Davide