热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jqueryflotchart近点时突出显示点-jqueryflotcharthighlightdotwhennearpoint

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 个解决方案

#1


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.

请注意,这些都不是优化的。您可能最好重新构建代码,以提供更通用的方法来解决此问题并提高可重用性和可读性。

#2


2  

Using the highlight() function like Michel de Nijs in his answer, but a simpler version:

在他的回答中使用像Michel de Nijs这样的highlight()函数,但更简单的版本:

1) Put the plot.unhighlight(); at the start of your updateLegend function (you might also want to rename that since it not longer only updates the legend).

1)把plot.unhighlight();在updateLegend函数的开头(您可能还想重命名它,因为它不再仅仅更新图例)。

2) Add plot.highlight(i, j-1); after your for (j ...) loop.

2)添加plot.highlight(i,j-1);在你的for(j ...)循环之后。

See this fiddle for the code.

请参阅此代码的小提琴。


推荐阅读
author-avatar
博仔Mmi
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有