根據窗口大小調整Highchart的大小

嗨，我已經離開了導航菜單，並且右側的內容是高圖。以下是我Highchart配置，根據窗口大小調整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或調整上改變我的圖我leftmenu大小？目前該圖表已經從我的div包裝器中溢出。先謝謝你們。

來源

2017-04-03 blackdaemon

reflow()

迴流圖表到其容器。默認情況下，按照chart.reflow選項，圖表將自動重排到window.resize事件之後的容器中。但是，對於div大小沒有可靠的事件，因此如果容器沒有調整窗口大小事件的大小，必須明確調用它。

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

Fiddle

這將是有益的排序問題，如果你提供實際試玩可能有些plunker鏈接

來源

2017-04-03 10:30:17

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); 
});

來源

2017-04-03 11:02:20 Kondal

根據窗口大小調整Highchart的大小

回答

相關問題