将多个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]
}]
如果您在发布的小提琴中这样做,您将获得一个不会移动的轴, 。
可以通过更改此例程来修改滚动行为:
.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));
})
尝试改变行
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.
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));
}
}
})
Try changing the line
if(yVar<=20 || yVar > 20) {
or the line
yVarDelta=yVar/10*yDataRange;
to make the scroll smoother/faster.
这篇关于将多个Y轴中的一个平移至高图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!