Как мы меняем диапазонSelector в HighCharts

Question

Есть ли способ изменить rangeSelector с даты и на сегодняшний день при нажатии любой кнопки.

Я хочу предоставить две кнопки, чтобы пользователь мог перемещать выбор вперед и назад.

Посетить jsfiddle регулярно!

Answer 1

Вы можете сделать это с помощью метода setExtremes. Сначала вам нужно получить текущее минимальное время на xAxis, используя getExtremes. Затем вы устанавливаете новое максимальное время на минимальное время. Я использовал moment.js для обработки вычитаемых месяцев (или независимо от вашего выбора диапазона). Я узнаю, какая кнопка диапазона выбрана, а затем используйте value и type, чтобы определить, сколько из того типа даты вычесть, чтобы получить мое новое время начала. Я только сделал это с настройкой 3m, установленной в вашей демонстрации. Вам нужно будет добавить логику для любого другого типа. Вам также придется обрабатывать слишком много назад, чтобы вы оказались вне диапазона данных - это можно сделать, но я оставлю это вам.

Basic "назад" Кнопка функции:

$("#btnBack").click(function() { 
    var theChart = $('#container').highcharts(), 
     extremes = theChart.xAxis[0].getExtremes(), 
     minTime = extremes.min, 
     maxTime = extremes.max, 
     currRangeIndex = theChart.rangeSelector.selected, 
     currRange = theChart.rangeSelector.buttonOptions[currRangeIndex], 
     newMaxTime = minTime; 

    // new start/end times 
    var startTime, 
     endTime; 

    if (currRange.type == 'month') { 
     var endDate = new Date(newMaxTime); 
     var startDate = moment(endDate);  
     startDate.subtract(currRange.count, 'months'); 

     startTime = startDate.valueOf(); 
     endTime = newMaxTime; 
    } 
    theChart.xAxis[0].setExtremes(startTime, endTime); 
}); 

Рабочая "назад" Кнопка jsFiddle.