javascript - Highcharts Stockchart 中的 MonthPicker 不更改月份

Question

我正在尝试在我的 highchjarts 库存图表中初始化月份选择器

我的数据仅包含 yy-mm x 轴，因此我使用 jquery 扩展“MonthPicker” https://github.com/KidSysco/jquery-ui-month-picker

我可以让一切正常工作，除了当我选择新的月份/年份时，图表不会调整选定的日期 x 轴 - 我还尝试使用事件“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