HighCharts：yAxis平移发生得太慢 [英] HighCharts: Panning in yAxis is happening too slowly
问题描述
我在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）{
isDraggi ng = false;
}）;
如果有人可以提供一个替代路径将像素（e.pageY）转换为y co -ordinate。正如你可以在代码中看到的，目前我正在做一个解决方法。
编辑
我在这个 jsfiddle ，并且已经设置了逻辑，以便平移只发生在mouseup而不是mousemove上。我目前面临的问题是，如果拖动小于滴答间隔时间，不仅代码平移，而且缩放。我认为它的发生是因为yAxis最小和最大值的变化出现在最小值和最大值上限处。 有解析方案
这里有几个问题。首先，当你调用setExtremes时，你的范围变大（引起缩放效果）。这是因为你没有按照确切的时间间隔移动。你可以通过设置set / end在y轴上打勾来解决这个问题：
yAxis：{
min ：-50，
tickInterval：500，
startOnTick：false，
endOnTick：false
}，
将像素转换为坐标的方法是使用'translate'。我改变了你的第一个jsfiddle，如下所示：
http://jsfiddle.net/uLHCx/ p>
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））;
$ / code> 您可以通过更改yVarDelta的计算来更改滚动量。
请注意，我对yVar进行了范围检查，以便除非鼠标移动了给定的数量，否则我们不会重新显示，并重置mouseY的值。
这可能不是您想要的，但它应该足以让您根据需要进行修改。
I made a small code for panning in yAxis, but its a little slow. it becomes faster if I increase the value of tickInterval. But the downside is that with increased tickInterval, the code starts working oddly when I drag the mouse for less than the tickInterval size (try changing tickInterval to 500 in my fiddle and then drag mouse for a minute increment.
My link to jsfiddle.
Pertinent Code:
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;
});
Will also appreciate if someone can provide an alternate route to converting pixels (e.pageY) to y co-ordinate. As you can see in code, currently I am doing a workaround.
EDIT I included translate function in this jsfiddle and have put logic such that the panning happens only at mouseup and not at mousemove. The issue I am currently facing is that if the drag is less than tick interval, not only does the code pan, but it also zooms. I presume its happening because the change in yAxis min and max occurs at a floor for min and ceiling for max.
There are a few problems here. Firstly, when you call setExtremes, your range gets bigger ( causing the zoom effect). This is because you are not moving by an exact tick interval. You can cure this by setting set/end on tick on the y axis to false:
yAxis: {
min: -50,
tickInterval: 500,
startOnTick:false,
endOnTick:false
},
The way to convert pixels to coordinates is to use 'translate'. I changed your first jsfiddle as follows: 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));
}
You can change the scroll amount by changing the calculation of yVarDelta.
Note, I put a range check on the yVar so that we don't redisplay unless the mouse has moved a given amount, and reset the valu of mouseY.
This may not do exactly what you want, but it should be enough for you to modify it as required.
这篇关于HighCharts：yAxis平移发生得太慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
