Highcharts：动态调整实心仪表图的大小答案

【问题标题】：Highcharts: Dynamically size a solid gauge chartHighcharts：动态调整实心仪表图的大小
【发布时间】：2015-07-17 17:55:10
【问题描述】：

我想要一个能够充分填充其容器的实心仪表图。这样做的唯一方法是将其大小设置为 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/

【问题讨论】：

标签： javascript css highcharts

【解决方案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/

【讨论】：