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/

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

1 个答案: