javascript - 我们如何更改 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 .