作者:博仔Mmi | 来源:互联网 | 2023-09-25 08:40
IammakingachartusingjQueryflot(plot)我正在使用jQueryflot制作图表(情节)https:jsfiddle.net5gtqwkj
I am making a chart using jQuery flot (plot)
我正在使用jQuery flot制作图表(情节)
https://jsfiddle.net/5gtqwkjg/2/
https://jsfiddle.net/5gtqwkjg/2/
var updateLegendTimeout = null;
var latestPosition = null;
function updateLegend() {
updateLegendTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x axes.xaxis.max || pos.y axes.yaxis.max) {
return;
}
/*
var o = plot.pointOffset({ x: pos.x, y: -1.25 });
var ctx = plot.getCanvas().getContext("2d");
ctx.beginPath();
ctx.moveTo(o.left, o.top);
o.top = 0;
ctx.lineTo(o.left, o.top);
ctx.stroke();
*/
var i, j, dataset = plot.getData();
var halfDist = (dataset[0].data[1][0] - dataset[0].data[0][0]) / 2;
for (i = 0; i pos.x) {
break;
}
}
// Now Interpolate
var y,
p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 == null) y = p2[1];
else if (p2 == null) y = p1[1];
else y = p1[1];
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
//dataset[i].highlightColor = "#abcdef";
//plot.highlight(dataset[0].series, dataset[0].datapoint);
}
}
$("#placeholder").bind("plothover", function (event, pos, item) {
latestPosition = pos;
if (!updateLegendTimeout) {
updateLegendTimeout = setTimeout(updateLegend, 50);
}
});
I want to add in a functionality that when the user moves the mouse along the x-axis the dot will highlight to indicate what point they are hovering nearest to. I already have the legend reflect the values but how would I highlight the dots?
我想添加一个功能,当用户沿着x轴移动鼠标时,点将突出显示,以指示它们最靠近的位置。我已经有传说反映了价值观,但我如何突出点?
EDIT: Very helpful answers guys! Here is the finished result if anyone is interested https://jsfiddle.net/5gtqwkjg/4/
编辑:非常有用的答案家伙!如果有人有兴趣,这是完成的结果https://jsfiddle.net/5gtqwkjg/4/
2 个解决方案
2
You can make use of the highlight
and unhighlight
functions provided by Flot.
您可以使用Flot提供的高亮和非高亮功能。
highlight(series, datapoint)
突出显示(系列,数据点)
Highlight a specific datapoint in the data series. You can either specify the actual objects, e.g. if you got them from a "plotclick" event, or you can specify the indices, e.g. highlight(1, 3) to highlight the fourth point in the second series (remember, zero-based indexing).
突出显示数据系列中的特定数据点。您可以指定实际对象,例如如果你从“plotclick”事件中获得它们,或者你可以指定索引,例如突出显示(1,3)以突出显示第二个系列中的第四个点(请记住,从零开始的索引)。
unhighlight(series, datapoint) or unhighlight()
unhighlight(系列,数据点)或unhighlight()
Remove the highlighting of the point, same parameters as highlight.
删除点的突出显示,与高亮显示相同的参数。
If you call unhighlight with no parameters, e.g. as plot.unhighlight(), all current highlights are removed.
如果您在没有参数的情况下调用unhighlight,例如如plot.unhighlight(),将删除所有当前高光。
See https://github.com/flot/flot/blob/master/API.md#plot-methods for reference.
请参阅https://github.com/flot/flot/blob/master/API.md#plot-methods以供参考。
Applying that logic to your question, I think I managed to create the desired result you were looking for.
将这个逻辑应用于你的问题,我想我设法创造了你想要的结果。
I first start by unhighlighting everything, just to make sure nothing slips past us when we do highlight points.
我首先开始时不要强调一切,只是为了确保当我们突出显示点时没有任何东西滑过我们。
for (i = 0; i
Next up we go do the fun part, highlight all the points! (Just the ones we actually want to highlight)
接下来我们去做有趣的部分,突出所有要点! (只是我们想要突出的那些)
In your "Find the nearest points, x-wise" loop I added another loop!
在你的“找到最接近的点,x-wise”循环中,我添加了另一个循环!
for (j = 0; j pos.x) {
for(a = 0; a
The result https://jsfiddle.net/qj3068zn/6/, for ease of use.
结果https://jsfiddle.net/qj3068zn/6/,易于使用。
Do note, none of this is optimized. You're probably better off restructuring your code to provide a more general way to approach this and increase reusability and readability.
请注意,这些都不是优化的。您可能最好重新构建代码,以提供更通用的方法来解决此问题并提高可重用性和可读性。