Question

我刚开始使用jqPlot作为包含多个系列的折线图。看起来很棒。

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

好像我只是想“覆盖”或替换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的所有其他内容上尝试条形图系列。

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

2 个答案: