jquery - 发生 mouseup 时获取 highstock 导航器句柄的 x 值

Question

我搜索了 API 以查找是否有办法在 mouseup 事件后获取句柄 x 值，但我找不到任何东西。我唯一能找到的是如何获取主要系列的值，而不是导航器本身。有人知道获得这些值的方法吗？这是我目前正在使用的一些示例代码，底部有一个导航器滑块，供您随意使用。我想从导航器中拖动一个句柄，一旦我释放它就会弹出一条带有 x 值的警报消息。

http://jsfiddle.net/fqptH/2/

var highPoint=0;
var highCount=0;

$(function() {   
function getPoints() {
    var dataPoints = [];
    for (var i=0; i<=100; i++) {
        if (i == highPoint && highCount < 20) {
            dataPoints[i]=[i,8];
            highCount++;
        } else {
            var randomnumber=Math.floor(Math.random()*2);
            dataPoints[i]=[i,randomnumber];
        }
        if (highCount == 20) { highCount = 0; }
    }
    if (highPoint == 100) { highPoint=0; }
    if (highCount == 19) { highPoint++; }
    return dataPoints;
} 

var chart = new Highcharts.StockChart({
    chart: {
        renderTo: 'container'
    },
    navigator : {
        series: {
            //data: [[1,1],[2,2],[3,1]]
            data: getPoints()
        }
    },
    series: [{
        data: [[1,1],[2,2],[3,1]]
        //data: getPoints()      
    }]
});

function update() {
    //chart.series[0].setData(getPoints());
    setTimeout(update, 100);        
}
update();
});

Answer 1

画好后试试这个：

// left handle
$(Highcharts.charts[0].scroller.handles[0].element).mouseup(function(){
    var minPixel = Highcharts.charts[0].scroller.zoomedMin;
    alert(Highcharts.charts[0].scroller.xAxis.toValue(minPixel));
});

// right handle
$(Highcharts.charts[0].scroller.handles[1].element).mouseup(function(){
    var maxPixel = Highcharts.charts[0].scroller.zoomedMax;
    alert(Highcharts.charts[0].scroller.xAxis.toValue(maxPixel));
});

示例小提琴在这里。

Answer 2

我不确定这有多大帮助，但它可能会让你上路：http: //jsfiddle.net/fqptH/3/

xAxis: {
    events: {
        setExtremes: function(e) {
            console.log('<b>Set extremes:</b> e.min: '+ e.min +
                ' | e.max: '+ e.max + ' | e.trigger: ' + e.trigger);
        }
    }
},

它似乎在您移动手柄时反复触发，所以我不确定您如何知道它何时完成然后触发您的弹出窗口。

Answer 3

借助@Mark 的有用提示，我提出了以下建议。toValue 无法正确解析数字，但通过查看源代码，您可以使用 .translate(value, true) 执行非常相似的操作。这会将像素位置转换为轴值。

var scroller = Highcharts.charts[0].scroller;
var navMin = scroller.xAxis.translate(scroller.zoomedMin, true);
var navMax = scroller.xAxis.translate(scroller.zoomedMax, true);
alert('min: '+Math.round(navMin)+"\nmax: "+Math.round(navMax));

这是一个完整的 jsfiddle 示例：

http://jsfiddle.net/fqptH/9/