将多个Y轴中的一个平移至高图 [英] Pan one of multiple Y axis for highchart

问题描述

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

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

和

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，
相反：true，
 tickInterval：500，
 startOnTick：false，
 endOnTick：false 
} ]，
  

并绘制一些数据，例如tihs：

 系列：[{
 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，
数据：[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/

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

  .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/

尝试改变行

  if（yVar <= 20 || yVar> 20）{
  

或行

  yVarDelta = yVar / 10 * yDataRange; 
  

让滚动更顺畅/更快。

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?

解决方案

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.

这篇关于将多个Y轴中的一个平移至高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！