我目前有一个选项卡页面。每个选项卡是一个div,当未被选中时设置为
如果我只是调整窗口大小,图表将被重新计算,然后它们会完美地适合。或者如果我重新加载同一选项卡,则图表也会适合。我可以调用一个函数,在我的选项卡切换时调整页面上所有图表的大小吗? HTML
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