function adjustGraph(chart) {
try {
if (typeof (chart === 'undefined' || chart === null) && this instanceof jQuery) {
this.find('.chart-container:visible').each(function () {
$container = $(this);
$container.find('div[id^="chart-"]').each(function () {
$chart = $(this).highcharts();
$chart.setSize($container.width(), $chart.chartHeight, doAnimation = true);
});
});
} else {
chart.setSize($('.chart-container:visible').width(), chart.chartHeight, doAnimation = true);
}
} catch (err) {
}
}
使用
$(window).resize(function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
adjustGraph.call($('body'));
}, 500);
});
对于Bootstrap标签页
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
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">
<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>
<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>
</div>
在 jsfiddle 上查看示例
http://jsfiddle.net/davide_vallicella/LuxFd/2/