JQuery Flotcharts折线图 - 突出显示特定系列

时间:2014-04-09 13:35:19

标签: jquery flot linechart

是否有可能在jQuery Flotchart上突出特定的行(不是点,而是整个系列)? 如果没有直接的可能性,也许某人有自己的片段?

非常感谢。

编辑1:在"突出显示"我的意思是至少 - 改变一条线的厚度。

1 个答案:

答案 0 :(得分:3)

以下是我在最近的一个项目中的表现。这将是" dim"未单击的行(将不透明度设置为0.1)。点击什么都不会使所有系列回到1.0不透明度:

$("#container").bind("plotclick", function (event, pos, item) {
    var re = re = /\(([0-9]+,[0-9]+,[0-9]+)/;
    var opacity = 1;
    var seriesIdx = -1;
    // note which item is clicked on
    if (item) {
        seriesIdx = item.seriesIndex;
        opacity = 0.1;
    }
    // loop all the series and adjust the opacity 
    var modSeries = 
    $.map(somePlot.getData(),function(series,idx){
        if (idx == seriesIdx){
           series.color = 'rgba(' + re.exec(series.color )[1] + ',' + 1 + ')';
        } else {
            series.color = 'rgba(' + re.exec(series.color )[1] + ',' + opacity + ')';
        }
       return series;
    });
    // reload the series and redraw
    somePlot.setData(modSeries);
    somePlot.draw();
});

这会产生(小提琴here):

enter image description here

如果需要,这应该很容易扩展到lineWidth