跟蹤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。
我會嘗試更改原始元素的大小，但我不知道庫是否允許您指定要在哪個面上繪製標籤。