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

【问题标题】：Tracking mouse position of a jqplot vertical line chart跟踪jqplot垂直折线图的鼠标位置
【发布时间】：2023-07-19 12:49:01
【问题描述】：

我想创建一个jqPlot 折线图，它能够在垂直和水平方向之间改变方向。通过旋转包含图表的 div 元素，我能够使用 CSS 规则来实现这一点。

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

但问题是我还想在翻转方向后跟踪鼠标指针和鼠标点击图表上的点，因为我想注释这些点。当图表处于垂直方向时，我无法执行此操作。谁能建议一种方法来做到这一点？还是我以错误的方式处理问题？

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

非常感谢和帮助。

【问题讨论】：

标签： javascript jquery jqplot

【解决方案1】：

我从未使用过 jqPlot，但我猜你的问题是尝试使用 css 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]]);
}

所以看起来库总是根据鼠标在原始元素上的位置绘制线条，当然，这与旋转（）转换后的位置不匹配，并且 XY 坐标将被转换为旋转（）后的 YX。
我会尝试更改原始元素的大小，但我不知道库是否允许您指定要在哪一侧绘制标签。

【讨论】：

谢谢...此代码段有助于绘制鼠标跟踪线（虽然我不得不更改插件代码），但我仍然无法检测到鼠标单击时它是旋转的。你知道如何解决这个问题吗？干杯！

【解决方案2】：

我终于找到了解决问题的方法。但我不得不改变 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

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

谢谢。

【讨论】：