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。

我们如何更改HighCharts中的rangeSelector

1 个答案: