Question

我在使用setExtremes函数修改Highchart的yAxis极值时发现了一个小问题。样本在jsfiddle中 - ＆gt; 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，不能很好地舍入。

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

1 个答案: