logo标签列表

隐藏的Highcharts在窗口大小调整之前无法正确调整大小

jqueryhighchartsresponsive-designwindow-resize
3
我目前有一个选项卡页面。每个选项卡是一个div，当未被选中时设置为display:hidden（我使用Materialize CSS）。每个选项卡页面都有一个Highchart图表。当我加载页面并切换到带有图表的选项卡时，图表大小不正确。
如果我只是调整窗口大小，图表将被重新计算，然后它们会完美地适合。或者如果我重新加载同一选项卡，则图表也会适合。我可以调用一个函数，在我的选项卡切换时调整页面上所有图表的大小吗？ 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

1个回答
4

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

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

$('#withGraphLength').on('click', function () {
    setInterval(function () {
        $('#graphLength').highcharts().reflow();
    }, 10);
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接