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

Question

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

我目前为止的工作:http://jsfiddle.net/GayashanNA/A4V4y/14/

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

(注意:我可以在水平方向上这样做，如果您尝试单击上图中的一个点，您可以观察到它。)

非常感谢和帮助。

Answer 1

我从未使用过 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]]);
}

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