1

我编写了一个用于在 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 中包含了 translate 函数，并设置了这样的逻辑，使得平移只发生在 mouseup 而不是 mousemove。我目前面临的问题是，如果拖动小于刻度间隔，代码不仅会平移，还会缩放。我推测它的发生是因为 yAxis 最小值和最大值的变化发生在最小值的下限和最大值的上限处。

4

1 回答 1

0

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

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

将像素转换为坐标的方法是使用“翻译”。我将您的第一个 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 进行了范围检查，以便我们不会重新显示，除非鼠标移动了给定的数量，并重置 mouseY 的值。

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

于 2013-03-04T13:13:59.703 回答