在 window 调整大小之前，隐藏的 Highcharts 无法正确调整大小

Question

我目前有一个 x 标签页。每个选项卡都是一个 div，未选中时设置为 display: hidden（我使用 materialize css）。每个标签页都有一个 Highchart。当我加载页面并切换到带有图表的选项卡时，图表未正确调整大小。

如果我只是重新调整 window 的大小，图表会重新计算，然后它们就会完美匹配。或者，如果我重新加载同一个选项卡，图表也适合。当我进行标签切换时，我可以调用一个函数来调整页面上所有图表的大小吗？

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div class="container">
    <div class="row">
        <div class="col s12">
            <ul id="tabs" class="tabs z-depth-1">
                <li class="tab col s6"><a class="active" href="#stats">Info</a>
                </li>
                <li class="tab col s6"><a href="#length">Length</a>
                </li>
            </ul>
        </div>
        <div id="stats" class="col s12 m12 l12">test-text</div>
        <div id="length" class="col s12 m12 l12">
            <div id="graphLength"></div>
        </div>
    </div>
</div>

Jquery

$(function () {
    $('#graphLength').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Length',
            style: {
                display: 'none'
            }
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e. %b',
                week: '%e. %b',
                month: '%b \'%y',
                year: '%Y'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Length [cm]'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %Y', new Date(this.point.x)) + ' - ' + this.point.y + ' cm' + ' - ID: ' + this.point.z;
            }
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: false
                }
            }
        },

        series: [{
            showInLegend: false,
            name: 'Length',
            data: [
                {x: 1362398400000, y: 55, z: 11},{x: 1364817600000, y: 57, z: 12},{x: 1367582400000, y: 60, z: 13},{x: 1370088000000, y: 62, z: 14},{x: 1376395200000, y: 66, z: 15},{x: 1378900800000, y: 72, z: 16},{x: 1385553600000, y: 80, z: 17},{x: 1395835200000, y: 90, z: 18},{x: 1404043200000, y: 110, z: 19},{x: 1406980800000, y: 120, z: 20},{x: 1419940800000, y: 150, z: 21},{x: 1427544000000, y: 163, z: 22},{x: 1437074091000, y: 178, z: 23}   
            ]
        }]
    });
});

JSFiddle

JSFiddle of the problem

Answer 1

图表可见时可以调用 chart.reflow()。

示例：http://jsfiddle.net/vo8kqrme/

$('#withGraphLength').on('click', function () {
    setInterval(function () {
        $('#graphLength').highcharts().reflow();
    }, 10);
});

在 window 调整大小之前，隐藏的 Highcharts 无法正确调整大小

Hidden Highcharts not sizing correctly until window resize

jquery

highcharts

window-resize

responsive-design