HighCharts: Панорамирование в yAxis происходит слишком медленно

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), чтобы у координаты Как вы можете видеть в коде, в настоящее время я. обходной путь.

EDIT Я включил функцию перевода в этом jsfiddle и поставил логику таким образом, чтобы панорамирование происходило только при помощи мыши, а не в mousemove. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что если перетаскивание меньше интервала тика, это не только панорамирование кода, но и масштабирование. Я предполагаю, что это происходит потому, что изменение yAxis min и max происходит на полу для минимума и потолка для макс.

Answer 1

Здесь есть несколько проблем. Во-первых, когда вы вызываете setExtremes, ваш диапазон становится больше (вызывает эффект масштабирования). Это связано с тем, что вы не двигаетесь точным интервалом тика. Вы можете вылечить это, установив набор/окончание на клеща на оси у к ложным:

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.

Это может не делать именно то, что вы хотите, но этого должно быть достаточно, чтобы вы могли его модифицировать по мере необходимости.