javascript - 根据窗口大小调整 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();
});

小提琴

如果您提供实际演示可能会是一些笨拙的链接，这将有助于对问题进行排序

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