跟踪jqplot垂直折线图的鼠标位置

Question

我想要创建一个折线图，可以在垂直和水平方向之间改变方向。通过旋转包含图表的div元素，我可以使用CSS规则实现此目的。

我工作到现在：http://jsfiddle.net/GayashanNA/A4V4y/14/

但问题是，我也希望跟踪图表鼠标指针和鼠标点击的点上的方向翻转后，因为我想注释这些点。当图表处于垂直方向时，我无法做到这一点。任何人都可以提出一个方法来做到这一点或者我以错误的方式接近问题？

（注：我能做到这一点在水平方向上，如果尝试点击上面的图上的点，你可以观察它）

感谢和帮助深表感谢。

Answer 1

我终于找到了解决问题的办法。但我不得不改变jqPlot库来实现这一点。为了帮助遇到同样问题的其他人，我将把我的解决方案放在这里。

首先，我必须将以下代码插入到jquery.jqplot.js文件的jqPlot类中，该文件是核心库。

function jqPlot() { 
    //add the following code segment 
    var verticallyOriented = false; 
    this.setVertical = function(state){ 
     verticallyOriented = state; 
    } 
    //don't change other code that isn't mentioned here 

    //now you have to change the logic in the getEventPosition function 
    //to make sure the new orientation is detected 
    function getEventPosition(ev) { 
     //change the line starting with var gridPos = ... 
     //to the following code segment 
     //depending on the orientation the event position calculating algorithm is changed 
     if(verticallyOriented){ 
      var gridPos = {x:ev.pageY - go.top , y:plot.eventCanvas._elem.height() - ev.pageX + go.left}; 
     } else { 
      var gridPos = {x:ev.pageX - go.left, y:ev.pageY - go.top}; 
     } 
     //no change to other code is needed 
    } 
} 

你可以在这里查看工作示例：http://jsfiddle.net/GayashanNA/yZwxu/

主旨为更改库文件：https://gist.github.com/3755694

请纠正我，如果我做错了什么。

谢谢。

Answer 2

我从来没有使用jqPlot，但我想你的问题是试图使用css rotate（），因为光标插件正在使用鼠标位置来确定绘制线条的位置，并且元素的大小不会在通过rotate（）转换，它仍然具有相同的宽度和高度值。

如果你看看代码，你会看到：

if (c.showVerticalLine) { 
    c.shapeRenderer.draw(ctx, [[gridpos.x, 0], [gridpos.x, ctx.canvas.height]]); 
} 
if (c.showHorizontalLine) { 
    c.shapeRenderer.draw(ctx, [[0, gridpos.y], [ctx.canvas.width, gridpos.y]]); 
} 

所以它看起来像基于在原来的元素，当然，赢了”鼠标位置的库始终绘制线t通过rotate（）进行转换后匹配位置，并且rotate（）后XY坐标将被转换为YX。
我会尝试更改原始元素的大小，但我不知道库是否允许您指定要在哪个面上绘制标签。