मैं अपने हाईचजार्ट्स स्टॉकचार्ट में एक महीने के पिकर को शुरू करने की कोशिश कर रहा हूं

मेरे डेटा में केवल yy-mm x अक्ष है, इसलिए मैं jQuery एक्सटेंशन "MonthPicker" का उपयोग कर रहा हूं https://github.com/KidSysco/jquery-ui-month-picker

जब मैं नए महीने/वर्ष का चयन करता हूं, तो मैं सब कुछ काम कर सकता हूं, चार्ट चयनित तिथियों एक्स अक्ष को समायोजित नहीं करता है - मैंने एपीआई के साथ "ऑनआफ्टरचुजमोन्थ" ईवेंट का उपयोग करके सेट चरम विधि का भी प्रयास किया है। महीना पिकर ('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)
    })

});

0
user1758908 9 अक्टूबर 2018, 14:07

1 उत्तर

सबसे बढ़िया उत्तर

आपको xAxis.setExtremes() फ़ंक्शन को नए मानों के साथ कॉल करने की आवश्यकता है। उल्लिखित फ़ंक्शन को कॉल करने का सबसे अच्छा तरीका है 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/

एपीआई संदर्भ: https://api.highcharts. com/class-reference/highcharts.Axis#setExtremes

1
daniel_s 9 अक्टूबर 2018, 18:47