时间戳

首页 > 解决方案 > Highcharts Stockchart中的MonthPicker不改变月份

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

问题描述

我正在尝试在我的 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)
    })

});

标签： javascriptjqueryjquery-uihighcharts

解决方案

您需要xAxis.setExtremes()使用传递的新值调用函数。调用上述函数的最佳方法是OnAfterChooseMonthMonthPicker 插件的事件。我准备了完整的例子来展示如何使用这个函数，所以请参考它。

            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

推荐阅读