javascript - 在 Highchart 中动态修改 yAxis Extremes 时出现问题

Question

我在使用setExtremes函数修改Highchart的yAxis极值时发现一个小问题。示例位于 jsfiddle --> http://jsfiddle.net/dhjqoycm/

HTML

<script src="//code.highcharts.com/4.1.4/highcharts.js"></script>
<div id="container"></div>
<input id="btnSetExtremes1" type="button" value="chart.yAxis[0].setExtremes(-38,65)"></input>
<br/>
<br/>
<input id="btnSetExtremes2" type="button" value="chart.yAxis[0].setExtremes(-100,100)"></input>
<br/>
<br/>
<input id="btnRevertToOriginal" type="button" value="Revert to Original Extremes"></input>
<br/><hr>
<label><b><u>Test with Your Own Extremes</u></b></label>
<br/><br/>
<input id="txtMin" type="textbox" placeholder="Enter Min Extreme"></input>
<input id="txtMax" type="textbox" placeholder="Enter Max Extreme"></input>
<input id="btnSetManualExtremes" type="button" value="Set Extremes to Chart"></input>

JAVASCRIPT

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },        
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },  
        legend: {
            enabled: false
        },
        series: [{
            name: 'Vancouver',
            data: [-29.9, -26.3, -20.8, -15.75, -11.9, -5.6, 0.6, -10.5, -16.8, -23.3, -28, {
                dataLabels: {
                    enabled: true,
                    align: 'right',
                    formatter: function () {
                        return this.series.name;
                    },
                    x: 0,
                    verticalAlign: 'bottom'
                },
                y: -28
            }]
        }]
    });

    var iOriginalMinExtreme = $('#container').highcharts().yAxis[0].getExtremes().min;
    var iOriginalMaxExtreme = $('#container').highcharts().yAxis[0].getExtremes().max;

    // the setExtremes1 button action
    $('#btnSetExtremes1').click(function () {
        var chart = $('#container').highcharts();
        chart.yAxis[0].setExtremes(-38, 65);
    });

    // the setExtremes2 button action
    $('#btnSetExtremes2').click(function () {
        var chart = $('#container').highcharts();
        chart.yAxis[0].setExtremes(-100, 100);
    });

    // the setExtremes2 button action
    $('#btnRevertToOriginal').click(function () {
        var chart = $('#container').highcharts();
        chart.yAxis[0].setExtremes(iOriginalMinExtreme, iOriginalMaxExtreme);
    });

    // the setExtremes2 button action
    $('#btnSetManualExtremes').click(function () {
        var chart = $('#container').highcharts();
        chart.yAxis[0].setExtremes($('#txtMin').val(), $('#txtMax').val());
    });

});

在上面的jsfiddle示例中，当单击“chart.yAxis[0].setExtremes(-100,100)”按钮时，yAxis极值设置为从-100到100，这是完美的。单击“chart.yAxis[0].setExtremes(-38,65)”时，yAxis 极值预计为 -38 和 65(根据给定的输入)，但图表中设置的实际极值是从 -50 到 75。

有什么方法可以使图表中显示的极值与给定的输入相同吗？在这种情况下，图表应显示 yAxis 极值从 -38 到 65，而不是 -50 到 75。

谢谢。

Answer 1

将 startOnTick 和 endOnTick 设置为 false，请参阅:http://jsfiddle.net/dhjqoycm/30/如果你想显示最后一个刻度和第一个刻度，你可以编写自己的 tickPositioner 。但是，我不确定极端情况下应使用刻度之间的间隔:(-38, 65)。范围是 103，无法很好地舍入。