我的页面上有两个并排的图表，并且希望在调整窗口大小时调整它们的大小：它们的容器设置为50％宽度，根据示例，这应该足够了。
找到自动调整图表大小的工作示例我可以看到一个非常有效的例子来重现这个问题@ http://jsfiddle.net/4rrZw/2/
注意：您必须多次调整框架大小以重现问题（较小的＆gt;较大的＆gt;较小的应该执行）
我认为这一切都取决于你声明容器的方式......粘贴HTML代码，因为高级图表的JS代码在这里似乎并不相关......（两个例子中都相同）
<table style="width:100%;">
<tr>
<td style="width:50%;">
<div id="container" style="height: 50%"></div>
</td>
<td style="width:50%;"></td>
</tr>
</table>
答案 0 :(得分：20)
您可以避免使用javascript来执行调整大小并依赖css。这可以通过将HighChart渲染为具有以下内容的div来实现：
position: absolute;
width: 100%;
为了确保容器的高度合适，您必须将这个绝对定位的元素包装在另一个已明确设置高度的元素中：
position: relative;
width: 100%;
height: 400px;
通过将HighChart渲染到位置绝对元素，图表将响应父级的宽度缩减。
答案 1 :(得分：18)
我把你的小提琴分成了一个有效的解决方案@ http://jsfiddle.net/AxyNp/ 最重要的代码片段就是：
$(window).resize(function() {
height = chart.height
width = $("#chartRow").width() / 2
chart.setSize(width, height, doAnimation = true);
});
解决方案依据this SO帖子的回答。
似乎你可以做的最好的方法是正确调整图表容器（和单元格）的大小是依靠你自己的调整大小触发器。请注意，我在图表的选项中将reflow设置为“false”以删除现有触发器。
答案 2 :(得分：3)
/**
* Adjust size for hidden charts
* @param chart highcharts
*/
function adjustGraph(chart) {
try {
if (typeof (chart === 'undefined' || chart === null) && this instanceof jQuery) { // if no obj chart and the context is set
this.find('.chart-container:visible').each(function () { // for only visible charts container in the curent context
$container = $(this); // context container
$container.find('div[id^="chart-"]').each(function () { // for only chart
$chart = $(this).highcharts(); // cast from JQuery to highcharts obj
$chart.setSize($container.width(), $chart.chartHeight, doAnimation = true); // adjust chart size with animation transition
});
});
} else {
chart.setSize($('.chart-container:visible').width(), chart.chartHeight, doAnimation = true); // if chart is set, adjust
}
} catch (err) {
// do nothing
}
}
$(window).resize(function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
// resizeEnd call function with pass context body
adjustGraph.call($('body'));
}, 500);
});
$('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);
}
}
},
<div class="tab-pane" id="charts">
<div class="row-fluid">
<div class="span6 offset3">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<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>
<!-- Carousel nav -->
<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>