Highcharts setExtremes溢出问题

Question

我有一张Highcharts柱形图，在x轴上有10个系列。

http://qaa.balcroft.com/images/chart1.png

我想允许用户放大，所以我添加了一个按钮来设置：#extremes：

$('#zoomInButton').click(function () {
    var chart = $('#container').highcharts();

    chart.xAxis[0].setExtremes(4, 9);
});

然而，这会导致图形溢出到左侧的y轴标题区域。

http://qaa.balcroft.com/images/chart2.png

我已尝试修改xAxis.minRange和yAxis.overflow，但都没有解决问题。

有什么建议吗？

创建图表的功能是

function inialiseGraphOnLoad(strOrgCode, strLevelCode, currentLevel, strTeamName){

var jsonMimeType = "application/json;charset=UTF-8";

$.ajax({
    type: "POST",
    url: "ajax/getStaffOnLoad.php",
    cache: false,
    data: {org: strOrgCode, levelcode: strLevelCode, level: currentLevel},
     beforeSend: function(x) {
      if(x && x.overrideMimeType) {
       x.overrideMimeType(jsonMimeType);
      }
     },
    dataType: 'json',
    success: function(dataDepts){
        //Create array of employee names
        chartWidth = 0;
        maxZoom = 0;
        var listDepts = [];
        for (var i = 0; i < dataDepts.employees.length; i++) {
            chartWidth = chartWidth + 250;
            maxZoom = maxZoom + 1;

            var arrayEmployee = dataDepts.employees[i].name;
            var splitResult = arrayEmployee.split("||");
            var strEmployeeCode=splitResult[0];
            var strEmployeeName=splitResult[1];
            var employeeURL = serverURL + strEmployeeCode + '">' + strEmployeeName + '</a>';

            listDepts.push(employeeURL);
        }

        var mainPageWidth = $('#staffMainPage').width();
        if(chartWidth > mainPageWidth){
            chartWidth = mainPageWidth;
        }else if(chartWidth < 500){
            chartWidth = 500;
        }

        $('#hid_lastPage').val(maxZoom);

        //Create series array
        var seriesArray = [];
        for (var i = 0; i < dataDepts.groups.length; i++) {
            seriesArray.push({
                name : dataDepts.groups[i].name,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#424242',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontFamily: 'Verdana, sans-serif'
                    },
                    formatter:function(){
                        if(this.y > 0){
                            return this.y;
                        }
                    }
                },
                color : dataDepts.groups[i].colour,
                data : []
            });

            for (var j = 0; j < dataDepts.employees.length; j++) {
                if(i == 0){
                    seriesArray[i].data.push(dataDepts.employees[j].rating1);
                }else if(i == 1){
                    seriesArray[i].data.push(dataDepts.employees[j].rating2);
                }else if(i == 2){
                    seriesArray[i].data.push(dataDepts.employees[j].rating3);
                }else if(i == 3){
                    seriesArray[i].data.push(dataDepts.employees[j].rating4);
                }else if(i == 4){
                    seriesArray[i].data.push(dataDepts.employees[j].rating5);
                }else if(i == 5){
                    seriesArray[i].data.push(dataDepts.employees[j].rating6);
                }else if(i == 6){
                    seriesArray[i].data.push(dataDepts.employees[j].rating7);
                }else if(i == 7){
                    seriesArray[i].data.push(dataDepts.employees[j].rating8);
                }else if(i == 8){
                    seriesArray[i].data.push(dataDepts.employees[j].rating9);
                }else if(i == 9){
                    seriesArray[i].data.push(dataDepts.employees[j].rating10);
                }else if(i == 10){
                    seriesArray[i].data.push(dataDepts.employees[j].rating11);
                }else if(i == 11){
                    seriesArray[i].data.push(dataDepts.employees[j].rating12);
                }else if(i == 12){
                    seriesArray[i].data.push(dataDepts.employees[j].rating13);
                }else if(i == 13){
                    seriesArray[i].data.push(dataDepts.employees[j].rating14);
                }else if(i == 14){
                    seriesArray[i].data.push(dataDepts.employees[j].rating15);
                }
            }
        }

        // Set up the chart
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                width: chartWidth,
                height: 550,
                marginBottom: 100,
                margin: 80,
                options3d: {
                    enabled: true,
                    alpha: 5,
                    beta: 10,
                    depth: 50,
                    viewDistance: 25
                }
            },
            title: {
                text: strTeamName
            },
            subtitle: {
                text: 'Quality Rating By Employee'
            },
            xAxis: {
                categories: listDepts,
                useHTML: true,
                minRange: 5,
                title: {
                    text: '<br>(click an employee name for more detail)',
                    style: {
                        color: '#6E6E6E',
                        fontSize: '1em',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Quality Rating (%)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' %'
            },
            scrollbar: {
                enabled: true
            },
            plotOptions: {
                column: {
                    depth: 25
                },
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series:seriesArray
        });
    }
});
}