单击浮点图中的对应图时，突出显示标签

Question

I have a float graph as shown in the figure. I need to highlight a label when a corresponding plot is clicked.

/*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')
    });
});  

This is the jquery code i tried but its highlighting only the last label whichever plot is clicked. I want to highlight only the corresponding label when its series plot is clicked.

Answer 1

Here's an example that'll highlight the y axis label of the y value of the point clicked. I didn't bother replacing flot's axis labels with custom labels, as you seem to be doing (I'm not sure where you are going with all that).

$("#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});
    }
});  

Fiddle here .