将垂直线光标捕捉到jqPlot中的数据点

Question

我刚开始对具有多个系列的折线图使用jqPlot。这似乎很棒。

我添加了Cursor插件，目的是在x轴上的最近的数据点上显示垂直线。换句话说，它捕捉到最近的点。然而，光标插件总是在鼠标所在的位置显示垂直光标。

好像我只是想“覆盖”或更换moveLine改变当前的功能。

什么是这样做的最恰当的方法是什么？

这似乎有点太多复制/过去所有的光标插件的只是修改一个非常小的子集。

谢谢！

Answer 1

我知道我是一种通过编辑这个职位考古学家，但我认为有以下可能是有人（我希望）有用。

我（按光标）制成一段代码，其允许绘制光标以下并显示上的最近点的工具提示的垂直线。你可以找到它的演示on this JSFiddle。

我还张贴低于相应的代码（只有一部分计算最近点和显示工具提示）：

//Show nearest point's tooltip 
$("#chart1").bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, data){ 
var c_x = datapos.xaxis; 
var index_x = -1; 
var pos_index = 0; 
var low = 0; 
var high = data.data[0].length-1; 
while(high - low > 1){ 
    var mid = Math.round((low+high)/2); 
    var current = data.data[0][mid][0]; 
    if(current <= c_x) 
     low = mid; 
    else 
     high = mid; 
} 
if(data.data[0][low][0] == c_x){ 
    high = low; 
    index_x = high; 
}else{ 
    var c_low = data.data[0][low][0]; 
    var c_high = data.data[0][high][0]; 
    if(Math.abs(c_low - c_x) < Math.abs(c_high - c_x)){ 
     index_x = low; 
    }else{ 
     index_x = high; 
    } 
} 
//Display marker and tooltip 
if(data.series[0].data[index_x]){ 
    var x = data.series[0].gridData[index_x][0]; 
    var y = data.series[0].gridData[index_x][1]; 
    var r = 5; 
    var highlightCanvas = $(".jqplot-highlight-canvas")[0]; 
    var context = highlightCanvas.getContext('2d'); 
    context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height); 
    context.strokeStyle = 'rgba(47,164,255,1)'; 
    context.fillStyle = 'rgba(47,164,255,1)'; 
    context.beginPath(); 
    context.arc(x,y,r,0,Math.PI*2,true); 
    context.closePath(); 
    context.stroke(); 
    context.fill(); 
    //Display tooltip on nearest point 
    var highlightTooltip = $(".jqplot-highlighter-tooltip"); 
    var val_x = data.data[0][index_x][0]; 
    var val_y = data.data[0][index_x][1]; 
    highlightTooltip.html("X : "+val_x+"<br/>Y : "+val_y); 
    highlightTooltip.css({'left': x+'px', 'top': (y-10)+'px', 'display': 'block'});   
} 
}); 

感觉请使用它，因为你需要它来修改它。

Answer 2

尝试在一切之上有一个Alpha设置为0。