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

标签 javascript jquery jqplot

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

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

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

(注意:我可以在水平方向上执行此操作,如果您尝试单击上图上的某个点,您可以观察到它。)

非常感谢和帮助。

最佳答案

我从来没有使用过jqPlot,但我猜你的问题是尝试使用cssrotate(),因为光标插件使用鼠标位置来确定在哪里绘制线条,并且元素的大小在转换时不会改变通过旋转(),它仍然具有相同的宽度和高度值。

如果你看一下代码,你会看到:

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。
我会尝试更改原始元素的大小,但我不知道该库是否允许您指定要在哪一侧绘制标签。

关于javascript - 跟踪 jqplot 垂直折线图的鼠标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12390711/

相关文章:

javascript - 错误类型 3. Activity 类 {com.awesome_project/com.awesome_project.MainActivity} 在 react native 中不存在(Android 设备)

javascript - FACEBOOK JS SDK::如何在墙上张贴图片

javascript - 使用嵌套表对齐问题的 TreeView

jquery - 页面 peal z-index 问题?

javascript - 动态计算多个选择选项数据值

javascript - jqplot - 如何让轴刻度显示在条形之间的线上?

javascript - 通过 javascript 和 zip 下载多个 AWS s3 文件的正确方法

javascript - 将 JSON 数据从 Node.js 存储到 MongoDB

javascript - jqPlot - 重新绘制而不刷新页面

javascript - jqplot 在 IE7 中运行不佳