gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 04:05:47 30 4
gpt4 key购买 nike

我刚刚开始使用 jqPlot 绘制具有多个系列的折线图。看起来不错。

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

看来我只是想“覆盖”或替换 moveLine 以更改当前功能。

这样做最合适的方法是什么?

复制/粘贴所有游标插件只是为了修改一个非常小的子集似乎有点多。

谢谢!

最佳答案

通过编辑这篇文章,我知道我是一名考古学家,但我认为以下内容对某些人有用(我希望)。

我编写了一段代码,允许在光标之后绘制一条垂直线并在最近的点(根据光标)显示工具提示。你可以找到它的演示 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'});
}
});

欢迎使用它,并根据需要修改它。

关于jqplot - 将垂直线光标捕捉到 jqPlot 中的数据点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7747298/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com