將垂直線光標捕捉到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。