单击flot图中相应的绘图时突出显示标签

Question

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

/*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代码，但它只突出显示最后一个标签点击的标签。我想在点击系列图时只突出显示相应的标签。

Answer 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。