Highcharts股票图表中的MonthPicker不更改月份

Question

I am trying to initialize a month picker in my highchjarts stockchart

My data only contain yy-mm x axis, so I am using the jquery extension "MonthPicker" https://github.com/KidSysco/jquery-ui-month-picker

I can get everything working other than when I select the new month/year, the chart does not adjust the selected dates x axis - I have also tried the setExtremes method using the event "OnAfterChooseMonth" with the api .MonthPicker('GetSelectedDate') but with no success

Any ideas? Thank you https://jsfiddle.net/ayzwnfrt/2/

$(document).ready(function() {
// Create the chart
window.chart = new Highcharts.StockChart({
            chart: {
            renderTo: 'container'
        },
            rangeSelector: {
        selected: 2,
        inputDateFormat: '%Y-%m',
                    inputEditDateFormat: '%Y-%m'
    },
    title: {
        text: 'Price'
    },
    series: [{
        name: 'Price',
        data: data,
        type: 'spline',
        tooltip: {
            valueDecimals: 2
        }
    }]
}, function(chart) {

        // apply the date pickers
        setTimeout(function() {
            $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).MonthPicker({
            Button: false,
            MaxMonth: -1,
                            MonthFormat: "yy-mm",
            OnAfterChooseMonth: function (selectedDate) {
                alert(selectedDate);
                this.onchange();
                    this.onblur();
            }
            })
        }, 0)
    })

});

Answer 1

You need to call xAxis.setExtremes() function with new values passed. The best way to call the mentioned function is OnAfterChooseMonth event of MonthPicker plugin. I prepared the complete example which shows how to use that function, so please refer to it.

            OnAfterChooseMonth: function (selectedDate) {
                let fromInput = $('input.highcharts-range-selector:eq(0)')[0],
                date = new Date(Date.parse(selectedDate)).toUTCString(),
                offset = new Date(Date.now()).getTimezoneOffset() * 60000,
                extremes = chart.xAxis[0].getExtremes(),
                value = Date.parse(date);                  

              fromInput === this ? 
                    chart.xAxis[0].setExtremes(value - offset, extremes.max) :
                chart.xAxis[0].setExtremes(extremes.min, value - offset)
                // this.onchange();
                    this.onblur();
            }

Live example: https://jsfiddle.net/tx3c7p94/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes