单击浮动图中的相应图时突出显示标签答案

【问题标题】：Highlight label when clicked on the corresponding plot in a flot graph单击浮动图中的相应图时突出显示标签
【发布时间】：2013-12-23 15:21:47
【问题描述】：

我有一个如图所示的浮点图。单击相应的图时，我需要突出显示一个标签。

/*The below is my function where my HTML is defined in JavaScript*/ 

function insertlabel()
{
    placeholder.find("ticklabels").remove();
    var html=['<div class="ticklabels" style="font-size:smaller;    color:'+options.grid.color+'">'];

    function addlabels(axis,labelgenerate){
        for(var i=0;i<axis.ticks.length;++i){
            var tick=axis.ticks[i];
            if(!tick.label||tick.v<axis.min||tick,v>axis.max)
                continue;
            html.push(labelgenerate(tick,axis));
        }
    }
}

//This is the addlabel function 

addlabels(axes.yaxis,function(tick,axis){
    return '<div id="text" style=position: absolute ; some calculation +ticklabel /div>'
}


/*The jquery code is as follows.*/

$(this).click(function() {
    $('#text').each(function() {
        $(this).css('color','#C4BD97')
    });
});

这是我尝试过的 jquery 代码，但它只突出显示最后一个标签，无论单击哪个图。单击系列图时，我只想突出显示相应的标签。

【问题讨论】：

这是同一个问题，还是这个问题（我认为是第三次）？ stackoverflow.com/questions/20697347你能编辑你以前的问题而不是问新问题吗？
是的，先生，同样的问题，但现在我已经提供了我想要的图像。当我力求找到解决问题的方法时:(
@user2029107, 在这里重复问同一个问题被认为是不礼貌的。如果您有要添加的信息，您应该编辑旧问题。另外，请花时间阅读：tinyurl.com/so-hints。您的主要问题是您在没有任何上下文的情况下剪切并粘贴了一些 sn-ps 代码。你为什么要用自己的标签替换flot的标签？你调查过plotclick 处理程序吗？等等……

标签： javascript jquery html flot

【解决方案1】：

这是一个示例，它将突出显示单击点的 y 值的 y 轴标签。我没有费心用自定义标签替换 flot's 轴标签，就像您似乎正在做的那样（我不确定您将如何处理所有这些）。

$("#placeholder").bind("plotclick", function (event, pos, item) {
    if (item){
        var yVal = item.datapoint[1];
        var yAxis = plot.getAxes().yaxis;             
        for (var i = 0; i < yAxis.ticks.length; i++){
            if (yAxis.ticks[i].v == yVal){
                yCor = yAxis.p2c(yVal);                    
                $('#arrow').css({'display':'block','top':yCor});
            }
        }            
    }else{
        $('#arrow').css({'display':'none','top':yCor});
    }
});

小提琴here.

【讨论】：