根据窗口大小调整 Highchart 的大小

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

回流焊()

将图表回流到其容器。默认情况下，根据 Chart.reflow 选项，图表会在 window.resize 事件发生后自动回流到其容器。但是，div 调整大小没有可靠的事件，因此如果在没有窗口调整大小事件的情况下调整容器大小，则必须显式调用此事件。

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

这将有助于解决问题，如果您提供实际的演示可能是一些plunker链接

Answer 2

JS 小提琴

 $('#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);
 });