Javascript Highcharts：动态调整实心量表的大小

我想一个坚实的仪表图表，充分填补它的容器。要做到这一点，唯一的办法是让它的大小超过100%

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

我还希望包含的div可以垂直调整大小，问题是，当调整大小时，图表最终会在其父div的边界之外调整大小

$('#resizer').resizable({

    handles: {'s': '#sgrip'},
    resize: function() {
        var chart = $('#container-speed').highcharts();
        chart.setSize(
            this.offsetWidth - 20, 
            this.offsetHeight - 20,
            false
        ); 
    }
});

这有什么办法吗

见示例：

---

通过确定允许的最大宽度，并防止图表在超出此最大值时进一步调整大小（使用唯一的变化变量，即高度），解决了此问题

$('#resizer').resizable({

    handles: {'s': '#sgrip'},
    resize: function() {
        var chart = $('#container-speed').highcharts();
        // Get approx 70% of container width
        var maxAllowedWidth = (this.offsetWidth * 0.7)
        var containerHeight =  $(chart.container).height();

        // Max allowed width should be about 70% of containers 
        // height so keeping within this boundary will prevent spill
        if(containerHeight >= maxAllowedWidth && this.offsetHeight - 20 > containerHeight){
            return;
        }  
        chart.setSize(
            this.offsetWidth - 20, 
            this.offsetHeight - 20,
            false
        ); 
    }
});