これがブートストラップの問題なのかハイチャートの問題なのかはわかりませんが、チャートのサイズを正しく設定できないようです。スクロールバーが存在し、ブートストラップスパンにある場合、最初のチャート幅が広すぎます。ウィンドウのサイズを変更しても、幅が広すぎるようには見えませんが、幅が狭すぎる場合があります。
span コンストラクトからコードを削除すると、すべての状況で適切な幅が得られるように思われるため、hc とブートストラップの間に何らかの有害な相互作用がある可能性があると考えています。
デモンストレーション用にフィドルを作成しましたが、スクロールバーが表示されるようにブラウザ ウィンドウを十分に短くする必要があることに注意してください。
http://jsfiddle.net/xEtherealx/Q5EGX/15/
css を介して幅を強制的に一致させる方法はありますか? 回避策としてウィンドウのサイズ変更時にコールバックを作成できますが、代わりに適切な解決策を見つけたいと思います。
編集: 示唆されているように、以下は回避策であり、タイムアウトの後に、またはページの読み込み後に 1 回だけ呼び出すことができます。
this.setChartSize = function() {
chart.setSize( $(chart.container).parent().width(), $(chart.container).parent().height() );
return false;
};
HTML:
<div id="content" class="container-fluid">
<div class="row-fluid">
<div id="toresize" class="span3" style="background: gray; overflow: auto;">
<div class="targetpane">
<h4 class="text-center">HC Sizing Test</h4>
<!-- take up space -->
<div class="well well-small" style="height: 160px;"></div>
<!-- Chart -->
<div class="well well-small" style="padding: 5px;">
<div id="barchart" style="height: 160px; margin-bottom: 5px;"></div>
</div>
<!-- take up space -->
<div class="well well-small" style="height: 160px;"></div>
</div>
</div>
<!-- span -->
<div class="span9" style="background: gray;">
<div class="myBorder">Some content</div>
</div>
</div>
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>
CSS:
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.well
{
background-color: #444;
}
.targetpane
{
color: #888;
background-color: #1B1B1B;
border: 1px solid #888;
border-radius: 3px;
padding: 0px 5px 0px 5px;
}
.bodycontainer {
height: 50px !important;
white-space: nowrap;
overflow-x: hidden;
}
JS:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'barchart',
borderWidth: 1
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
$(window).resize(function () {
$('#toresize').height($(window).height() - 3);
console.log($(window).height());
})
$(window).resize();