web-dev-qa-db-ja.com

ハイチャート-動的な高さのチャートを作成する方法は？

ブラウザウィンドウに合わせてサイズを変更するグラフが必要ですが、問題は高さが400pxに固定されていることです。 このJSFiddleの例 にも同じ問題があります。

どうやってやるの？ chart.events.redrawイベントハンドラーを使用して（.setSizeを使用して）グラフのサイズを変更しようとしましたが、終わりのないループ（開始イベントハンドラー、setSizeを呼び出す、別のイベントハンドラーなど）を開始すると思います。

javascripthighcharts
35
duality_

HighChartsでheightプロパティを設定しないでください。チャートに含まれる要素に高さを設定する限り、それは動的に処理されます。位置が絶対的な場合は、固定の数値またはパーセントでもかまいません。

Highcharts docs ：

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

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

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

ウィンドウサイズ変更イベントをフックした場合：

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

フィドルの例を参照してください here 。

Highcharts APIリファレンス： setSize（） 。

25
Mark

高さを削除すると問題が解決します。ハイチャートは画面を調整するとサイズが変更されるため、設計上応答性があるためです。

4
RAM

別の良いオプションは、renderTo HTML参照を渡すことです。文字列の場合、そのIDの要素が使用されます。それ以外の場合は次のことができます：

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

またはjqueryを使用：

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

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

3
ill

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

例として、私のスクリプト（scriptaculosを使用）は次のとおりです。

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

Formは私のWebページのhtmlフォームで、gfxはhighchartグラフィックスです。

3
destroyedlolo

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

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

高さのパーセンテージを持つJSFiddle Highcharts

1
Phil