Question

我在yAxis中制作了一个用于平移的小代码，但它有点慢。如果我增加tickInterval的值，它会变得更快。但缺点是随着tickInterval的增加，当我将鼠标拖动到小于tickInterval大小时，代码开始奇怪地工作（尝试在我的小提琴中将tickInterval更改为500，然后拖动鼠标一分钟增量。

我与jsfiddle的链接。

相关代码：

var mouseY;
$(chart.container)
.mousedown(function(event) {
    mouseY=event.offsetY;
    yData=chart.yAxis[0].getExtremes();
    yDataRange=yData.max-yData.min;
    isDragging=true;
})
.mousemove(function(e) {
    var wasDragging = isDragging;
    if (wasDragging) {
        yVar=mouseY-e.pageY; 
        if(yVar!=0) {
            yVarDelta=yVar/500*yDataRange;
            chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
        }
    }
})
.mouseup(function (e) {
    isDragging = false;
});

如果有人可以提供将像素（e.pageY）转换为y坐标的替代路线，也会感激不尽。正如您在代码中看到的，目前我正在做一个解决方法。

修改我在这个jsfiddle中包含了翻译函数，并且已经设置了逻辑，使得平移只发生在mouseup而不是mousemove。我目前面临的问题是，如果拖动小于刻度间隔，则代码不仅会平移，而且还会缩放。我认为它发生了，因为yAxis min和max的变化发生在最低点和最高点的最低点。

Answer 1

这里有一些问题。首先，当您调用setExtremes时，您的范围会变大（导致缩放效果）。这是因为您没有按精确的滴答间隔移动。您可以通过将y轴上的set / end设置为false来解决此问题：

    yAxis: {
        min: -50,
        tickInterval: 500,
        startOnTick:false,
        endOnTick:false
    },

将像素转换为坐标的方法是使用'translate'。我改变了你的第一个jsfiddle如下： http://jsfiddle.net/uLHCx/

       if(yVar<-50 || yVar > 50) {
           mouseY = e.pageY;
            yVarDelta=yVar/100*yDataRange;
           yVarDelta =  chart.yAxis[0].translate(e.pageY) - chart.yAxis[0].translate(e.pageY - yVarDelta);
            chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
        }

您可以通过更改yVarDelta的计算来更改滚动量。

注意，我对yVar进行了范围检查，这样我们就不会重新显示，除非鼠标移动了给定的数量，并重置了鼠标的值。

这可能不完全符合您的要求，但您应该根据需要对其进行修改。

HighCharts：yAxis中的平移发生得太慢了

1 个答案: