平移多个 Y 轴之一以获取高图

我是 highchart javascript 的新手。而且我没有样品来展示它。但我见过图表有两个 Y 轴，左轴和右轴。我可以上下拖动一个轴而不影响另一个轴。该图表可能包含一些系列数据。

我见过构建的插件：http://www.highcharts.com/plugin-registry/single/27/Y-Axis%20Panning http://www.highcharts.com/plugin-registry/single/27/Y-Axis%20Panning

和这个

http://jsfiddle.net/uLHCx/ http://jsfiddle.net/uLHCx/使用此代码

$(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;
    });

但这只有一个 y 轴。多个又怎样？

您可以像这样指定第二个 yAxis：

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

并在其上绘制一些数据，如下所示：

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]        
    }]

如果您在发布的小提琴中执行此操作，则会得到一个不移动的轴和一个移动的轴。

http://jsfiddle.net/hUt72/ http://jsfiddle.net/hUt72/

可以通过更改此例程来修改滚动行为：

    .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/ http://jsfiddle.net/Em2P3/

尝试换线

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

或线

yVarDelta=yVar/10*yDataRange;

使滚动更平滑/更快。