我目前有一个x标签页。每个标签都是一个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
答案 0 :(得分:4)
当图表可见时,可以调用chart.reflow()。
示例:http://jsfiddle.net/vo8kqrme/
$('#withGraphLength').on('click', function () {
setInterval(function () {
$('#graphLength').highcharts().reflow();
}, 10);
});