Javascript 跟踪jqplot垂直折线图的鼠标位置
我想创建一个折线图,它能够在垂直方向和水平方向之间改变方向。通过旋转包含图表的div元素,我可以使用CSS规则实现这一点 我到目前为止的工作: 但问题是我还想在方向翻转后跟踪鼠标指针和鼠标点击图表上的点,因为我想注释这些点。当图表处于垂直方向时,我无法执行此操作。有人能建议一种方法来做这件事吗?还是我以错误的方式处理问题 注意:我可以在水平方向上进行此操作,如果您尝试单击上图中的某个点,您可以观察到Javascript 跟踪jqplot垂直折线图的鼠标位置,javascript,jquery,jqplot,Javascript,Jquery,Jqplot,我想创建一个折线图,它能够在垂直方向和水平方向之间改变方向。通过旋转包含图表的div元素,我可以使用CSS规则实现这一点 我到目前为止的工作: 但问题是我还想在方向翻转后跟踪鼠标指针和鼠标点击图表上的点,因为我想注释这些点。当图表处于垂直方向时,我无法执行此操作。有人能建议一种方法来做这件事吗?还是我以错误的方式处理问题 注意:我可以在水平方向上进行此操作,如果您尝试单击上图中的某个点,您可以观察到 非常感谢您的帮助。我从未使用过jqPlot,但我想您的问题是尝试使用css旋转,因为光标插件使用
非常感谢您的帮助。我从未使用过jqPlot,但我想您的问题是尝试使用css旋转,因为光标插件使用鼠标位置来确定绘制线条的位置,并且元素的大小在通过旋转变换时不会改变,它仍然具有相同的宽度和高度值 如果查看代码,您将看到:
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。
我会尝试更改原始元素的大小,但我不知道库是否允许您指定标签将在哪一侧绘制。我从未使用jqPlot,但我猜您的问题是尝试使用css旋转,因为光标插件使用鼠标位置来确定在何处绘制线条,当通过旋转变换时,元素的大小不会改变,它仍然具有相同的宽度和高度值 如果查看代码,您将看到:
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。
我会尝试更改原始元素的大小,但我不知道库是否允许您指定标签将在哪一侧绘制。我终于找到了解决问题的方法。但我必须改变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
}
}
您可以在此处查看工作示例:
更改的库文件的要点:
如果我做错了什么,请纠正我
谢谢。我终于找到了解决这个问题的办法。但我必须改变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
}
}
您可以在此处查看工作示例:
更改的库文件的要点:
如果我做错了什么,请纠正我
谢谢。谢谢……这个代码段有助于绘制鼠标跟踪线。虽然我不得不更改插件代码,但当鼠标旋转时,我仍然无法检测到鼠标点击。你知道怎么解决吗?干杯谢谢…这个代码段有助于绘制鼠标跟踪线,虽然我不得不更改插件代码,但当鼠标旋转时,我仍然无法检测到鼠标点击。你知道怎么解决吗?干杯