Pan one of multiple Y axis for highchart

问题

I am new to highchart javascript. And I don't have sample to show it. But I have seen a chart has two Y Axis, left and right. I can drag up and down one of the axis without affect the other axis. This chart might have a few series data over it.

I have seen plugin built: http://www.highcharts.com/plugin-registry/single/27/Y-Axis%20Panning

and this

http://jsfiddle.net/uLHCx/ which uses this code

$(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<-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));
            }
        }
    })
    .mouseup(function (e) {
        isDragging = false;
    });

but this has only one y axis. How about multiple?

回答1:

You can specify a second yAxis like this:

yAxis: [{
        min: -50,
        tickInterval: 500,
        startOnTick:false,
        endOnTick:false
    },{
        min: -50,
        opposite:true,
        tickInterval: 500,
        startOnTick:false,
        endOnTick:false
    }],

and plot some data on it like tihs:

series: [{
        data: [929.9, 971.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 2216.4, 1194.1, 995.6, 954.4]        
    },{yAxis:1,
        data: [929.9, 971.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 2216.4, 1194.1, 995.6, 954.4]        
    }]

If you do that in the fiddle you posted, you get one axis which doesn't move, and one which does.

http://jsfiddle.net/hUt72/

The scrolling behaviour can be modified by changing this routine:

    .mousemove(function(e) {
    var wasDragging = isDragging;
    if (wasDragging) {
        yVar=mouseY-e.pageY; 
       if(yVar<-20 || yVar > 20) {
           mouseY = e.pageY;
            yVarDelta=yVar/10*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));
        }
    }
})

http://jsfiddle.net/Em2P3/

Try changing the line

 if(yVar<=20 || yVar > 20) {

or the line

yVarDelta=yVar/10*yDataRange;

to make the scroll smoother/faster.

来源：https://stackoverflow.com/questions/24505490/pan-one-of-multiple-y-axis-for-highchart

标签

javascript

jquery

Highcharts