HighCharts에서 rangeSelector를 변경하는 방법

Question

아무 버튼이나 클릭하여 rangeSelector을 날짜와 현재 날짜로 변경할 수있는 방법이 있습니까?

두 개의 버튼을 제공하여 사용자가 선택 항목을 앞뒤로 이동할 수있게하려고합니다.

정기적으로 jsfiddle을 방문하십시오!

Answer 1

setExtremes 방법으로이를 수행 할 수 있습니다. 먼저 getExtremes을 사용하여 xAxis에서 현재 최소 시간을 가져와야합니다. 다음으로 새로운 최대 시간을 최소 시간으로 설정합니다. 달을 빼거나 (또는 ​​선택한 범위가 무엇이든) moment.js을 처리했습니다. 어떤 범위 단추가 선택되었는지 확인한 다음 value 및 type을 사용하여 새 시작 시간을 얻기 위해 뺄 날짜의 양을 결정하십시오. 나는 당신이 당신의 데모에 가지고있는 설정 3m으로 만 이것을했습니다. 다른 유형의 논리를 추가해야합니다. 당신은 또한 당신이 지금 데이터 범위에서 벗어나기 위해 거꾸로 지나가는 것을 처리해야합니다 - 이것은 할 수 있지만 당신에게 맡깁니다. "뒤로"

기본 버튼 기능 :

$("#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.