Highcharts Stockchart中的MonthPicker不改变月份

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() 函数并传递新值。调用上述函数的最佳方法是 MonthPicker 插件的 OnAfterChooseMonth 事件。我准备了完整的例子来展示如何使用这个函数，所以请参考它。

            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