1

yAxisでパンするための小さなコードを作成しましたが、少し遅いです。tickIntervalの値を大きくすると速くなります。ただし、欠点は、tickIntervalを大きくすると、tickIntervalサイズ未満でマウスをドラッグするとコードが奇妙に機能し始めることです（フィドルでtickIntervalを500に変更してから、マウスを1分ずつドラッグしてみてください。

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 に変換関数を含め、パンがmousemoveではなくmouseupでのみ発生するようにロジックを配置しました。私が現在直面している問題は、ドラッグがティック間隔よりも小さい場合、コードパンだけでなくズームも行うことです。yAxisの最小値と最大値の変化は、最小値はフロアで、最大値は天井で発生するため、これが発生していると推測されます。

4

1 に答える 1

0

ここにはいくつかの問題があります。まず、setExtremes を呼び出すと、範囲が大きくなります (ズーム効果が発生します)。これは、正確なティック間隔で移動していないためです。これは、y 軸の set/end on tick を 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 に答える