ハイチャートで高さを変更する

Question

私は、ウィンドウのサイズが変更されたときに、幅の大きさをうまく調整するハイチャートを持っています。しかし、高さではありません。私はこのセットのチャートサイズを試しましたが、それはプローバルでは機能しません。ウィンドウのサイズ変更時に自動的に高さを変更する方法はありますか？

これは出力のための私のCSSコードです。私はjqueryのUIのタブを持って、他のタブが表示される。これはchartdivのための私のCSSです

#output-container 
{ 
float: right; 
display: inline; 
position: absolute; 
right: 10px; 
left: 400px; 
top:120px; 
overflow-y: auto; 
} 

のDataTable：

#chartContainer{ 
margin: auto; 
} 

そして、これは、jsのチャート機能である：

function qchart(){ 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chartContainer', 
      type: 'column', 
      spacingBottom: 3, 
      //height: (screen.availHeight)-500, 
      marginRight: 30, 
      marginBottom: 30, 
      reflow: true 
     }, 
     //etc.. 
    }; 
    //... 
} 

Answer 1

リカルドの答えは、しかし、正しいです：時々、あなたのように、必要に応じてコンテナは単純にサイズを変更していない状況で自分自身を見つけることがブラウザウィンドウがサイズを変更するため、ハイチャートのサイズを変更できなくなります。

これは常に動作します：
1.時間とパイプラインのリサイズイベントリスナーを設定します。高さを設定し、highcharts-オプションで動的に
3.設定reflow: false幅やコースのためにあなたの実際のサイズ変更機能でExample with 500ms on jsFiddle
2.使用chart.setSize(width, height, doAnimation = true);は、作成時に明示的にheightとwidthを設定します。私たちが独自のサイズ変更イベント処理を行うので、別のものにHighchartsフックが必要はありません。

Answer 2

APIリファレンスによると

：

By default the height is calculated from the offset height of the containing element. Defaults to null.

したがって、redrawイベントを使用して親divに従ってheightを制御することができます。これは、サイズを変更すると呼び出されます。

参照

• http://api.highcharts.com/highstock#chart.height
• http://api.highcharts.com/highstock#chart.events.redraw

Answer 3

あなたが明示的に

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

See other stackoverflow answer

highcharts documentation

Answer 4

をコンテナの高さを設定する必要があり、私は私のチャートを除く高さと同様の問題は、私は「ブートストラップモーダルポップアップ、中にあったていましたmはすでにCSSのサイズを制御しています。ただし、何らかの理由で、ウィンドウの水平方向のサイズが変更されたときに、グラフコンテナの高さが無期限に拡大します。ウィンドウを前後にドラッグすると、ウィンドウが無期限に垂直方向に拡張されます。ハードコーディングされた高さ/幅のソリューションも気に入らない。

したがって、モーダルでこれを行う場合は、this solutionとウィンドウのサイズ変更イベントを組み合わせてください。

// from link 
$('#ChartModal').on('show.bs.modal', function() { 
    $('.chart-container').css('visibility', 'hidden'); 
}); 

$('#ChartModal').on('shown.bs.modal.', function() { 
    $('.chart-container').css('visibility', 'initial'); 
    $('#chartbox').highcharts().reflow() 
    //added 
    ratio = $('.chart-container').width()/$('.chart-container').height(); 
}); 

ここで、「比率」は高さ/幅の縦横比になります。これは、ブートストラップモーダルのサイズ変更時にサイズ変更されます。この測定はモーダルが開かれたときにのみ行われます。私は比率をグローバルとして保存していますが、それはおそらくベストプラクティスではありません。

$(window).on('resize', function() { 
    //chart-container is only visible when the modal is visible. 
    if ($('.chart-container').is(':visible')) { 
     $('#chartbox').highcharts().setSize( 
      $('.chart-container').width(), 
      ($('.chart-container').width()/ratio), 
      doAnimation = true); 
    }  
}); 

これで、画面を横にドラッグしてサイズを変更すると、グラフの縦横比が維持されます。

ワイド

対小さい可能

（まだ笑VW単位で周りいじる、その後ろにすべてが読むには小さすぎる！）