ウィンドウサイズに基づくハイチャートのサイズ変更

Question

こんにちは、私はナビゲーションメニューを残し、右側の内容はハイチャートです。続いて は、私のHighchartの設定である

this.InputData = { 

      chart: { type: 'column' }, 
      title : { text : 'Overview' }, 

      xAxis: { 
       categories: this._weekValues 
      }, 
      yAxis: { 
       allowDecimals: false, 
       title: { text: 'some title'}, 
       min: 0, 
       max: 100, 
       labels: { 
        formatter:function() { 
         var pcnt = (this.value/100) * 100; 
         return Highcharts.numberFormat(pcnt, 0) + '%'; 
        } 
       } 
      } 
     } 

そして、私は変化に私の左側のメニューのサイズをトリガされる機能を持って、

this.menuEvent.onChangeLeftMenu().subscribe(()=>{ 
      Observable.timer().subscribe(()=>{ 
       console.log('highchart redraw?'); 
      }); 
     }); 

にはどうすれredrawかは私を変える上で、私のグラフのサイズを変更することができます左メニューサイズ？現在、グラフはdivのラッパーからオーバーフローしています。先輩に感謝します。

Answer 1

reflow()

そのコンテナにグラフをリフロー。デフォルトでは、チャートは、chart.reflowオプションに従って、window.resizeイベントの後にコンテナに自動的にリフローされます。しかし、divのサイズ変更には信頼できるイベントはありません。したがって、ウィンドウのサイズ変更イベントなしでコンテナのサイズを変更する場合は、明示的に呼び出す必要があります。

$('#reflow-chart').click(function() { 
    chart.reflow(); 
}); 

Fiddle

あなたが提供する場合、実際のデモは、一部のplunkerリンク

Answer 2

JS Fiddle

$('#add').click(function() { 
chart.addAxis({ // Secondary yAxis 
    id: 'rainfall-axis', 
    title: { 
     text: 'Rainfall' 
    }, 
    lineWidth: 2, 
    lineColor: '#08F', 
    opposite: true 
}); 
chart.addSeries({ 
    name: 'Rainfall', 
    type: 'column', 
    color: '#08F', 
    yAxis: 'rainfall-axis', 
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    $(this).attr('disabled', true); 
    $('#remove').attr('disabled', false); 
}); 
$('#remove').click(function() { 
    chart.get('temperature-axis').remove(); 

    $(this).attr('disabled', true); 
$('#add').attr('disabled', false); 
}); 

であってもよいし、問題をソートするために参考になります