MonthPicker в Highcharts Stockchart не меняет месяц

Question

Я пытаюсь инициализировать средство выбора месяца на моей биржевой диаграмме highchjarts

Мои данные содержат только ось yy-mm x, поэтому я использую расширение jquery "MonthPicker" https://github.com/KidSysco/jquery-ui-month-picker

Я могу заставить все работать, кроме того, что когда я выбираю новый месяц / год, диаграмма не корректирует выбранные даты по оси x - я также попробовал метод setExtremes, используя событие «OnAfterChooseMonth» с api .MonthPicker ('GetSelectedDate')но безуспешно

Есть идеи?Спасибо 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

Вам нужно вызвать xAxis.setExtremes() функцию с переданными новыми значениями.Лучший способ вызвать упомянутую функцию - OnAfterChooseMonth событие плагина MonthPicker.Я подготовил полный пример, который показывает, как использовать эту функцию, поэтому, пожалуйста, обратитесь к нему.

            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();
            }

Живой пример: https://jsfiddle.net/tx3c7p94/

APIСправка: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes