HighCharts-ダイナミックな高さのチャートを作成するにはどうすればよいですか？

Question

ブラウザウィンドウでサイズを変更するチャートが必要ですが、問題は高さが400pxに固定されていることです。 このjsfiddleの例 同じ問題があります。

どうやってやるの？ Chart.events.redrawイベントハンドラーを使用してチャートを変更しました（.setsizeを使用）が、終わりのないループ（別のイベントハンドラーなどを発射するSetSizeを呼び出す火災イベントハンドラーなど）を開始しました。

Answer 1

ハイチャートに高さのプロパティを設定しないでください。チャートを含む要素に高さを設定する限り、それはあなたのために動的に処理します。ポジションが絶対的な場合、固定数または偶数パーセントになる可能性があります。

HighChartsドキュメント:

デフォルトでは、高さは含まれる要素のオフセットの高さから計算されます

例： http://jsfiddle.net/wkkad/149/

#container {
    height:100%;
    width:100%;
    position:absolute;
}

Answer 2

ウィンドウのサイズ変更イベントをフックした場合はどうなりますか：

$(window).resize(function() 
{    
    chart.setSize(
       $(document).width(), 
       $(document).height()/2,
       false
    );   
});

フィドルの例を参照してください ここ.

HighCharts APIリファレンス： setSize（）.

Answer 3

高さを削除すると、HighChartは画面を調整すると設計することで応答性が高いため、問題が解決します。

Answer 4

または、JavaScriptのwindow.onresizeを直接使用できます

たとえば、私のコード（Scriptaculosを使用）は次のとおりです。

window.onresize = function (){
    var w = $("form").getWidth() + "px";
    $('gfx').setStyle( { width : w } );
}

ここで、フォームは私のWebページ上のHTMLフォームであり、GFXはHighChartグラフィックスです。

Answer 5

別の良いオプションは、Renderto HTMLリファレンスに合格することです。文字列の場合、そのIDの要素が使用されます。それ以外の場合は：

chart: {
    renderTo: document.getElementById('container')
},

またはjqueryで：

chart: {
    renderTo: $('#container')[0]
},

詳細については、こちらをご覧ください。https://api.highcharts.com/highstock/chart.renderto

Answer 6

パーセンテージを使用する場合、幅に対する高さはそれに伴って動的に変化します。

chart: {
    height: (9 / 16 * 100) + '%' // 16:9 ratio
},

高さの割合のJSFiddle HighCharts