javascript - Highcharts:动态调整实心仪表图的大小

Question

我想要一张能充分装满容器的实心仪表图。做到这一点的唯一方法是将其大小设置为超过 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
        ); 
    }
});

有什么办法解决这个问题吗？

看例子: http://jsfiddle.net/swj1naq2/

Answer 1

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

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

http://jsfiddle.net/dzudn5jq/3/