Question

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

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

和这个

使用此代码的

$(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轴。多个怎么样？

Answer 1

您可以指定第二个yAxis：

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

并在其上绘制一些数据，如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]        
    }]

如果你在你发布的小提琴中这样做，你得到的一个轴不会移动，而另一个轴会移动。

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;

使滚动更流畅/更快。

平移多个Y轴中的一个用于高图

1 个答案: