用于jquery flot图表的highlightSeries插件

highlightSeries plugin for jquery flot charts

本文关键字：highlightSeries 插件 jquery flot 用于      更新时间：2023-09-26

我正在寻找Brian Peiris制作的highlightSeries插件的帮助(http://brian.peiris.name/highlightSeries/)。它似乎不起作用；我确信事件正在启动，因为我之前执行的警报测试运行良好，打印出了$(this).text()。当用户将鼠标悬停在图例中的系列名称上时，我试图让图表上的系列突出显示（这在Peiris先生的网站上非常好）。

   $('.server-chart').each(function() {
        var serv = $(this).attr('id').substr(6);
        var plotData = [];
        //alert(serv + ": " + $.toJSON(serverStats[serv]));
        for (var k in serverStats[serv].StatsByCollection) {
            var outlabel = k;
            var outdata = serverStats[serv].StatsByCollection[k];
            plotData.push({ label: outlabel, data: outdata});
        }
        plotOptions = {
            legend: {
                container: $('#legend-' + serv),
                labelFormatter: function(label, series) {
                    return '<a href="#' + label + '" class="checked label-clickable">' + label + '</a>';
                },
                noColumns: 2
            },
            series: {
                lines: {
                    show: true,
                    fill: false
                },
                points: {
                    show: false,
                    fill: false
                }
            },
            colors: colors,
            grid: {
                hoverable: false
            },
            highlightSeries: {
                color: "#FF00FF"
    }
        }
        $_plot = $.plot(this, plotData, plotOptions);
        $plots.push($_plot);
        $('#legend-' + serv + ' .legendLabel, #legend-' + serv + ' .legendColorBox').on('mouseenter', function () {
            $_plot.highlightSeries($(this).text());
        });
        $('#legend-' + serv + ' .legendLabel, #legend-' + serv + ' .legendColorBox').on('mouseleave', function () {
            $_plot.unHighlightSeries($(this).text());
        });
    });

我不确定还应该在这里加上什么代码，所以如果你需要更多，请告诉我；图表都运行良好，这只是就绪函数的一部分，在占位符中设置所有绘图及其选项。

此外，还有几个附加到标签上的类是无关的；我尝试了不同的方法来让这些东西发挥作用。

插件需要flot的修补版本才能工作（它引入了一个公共drawSeries方法）。最后一个补丁版本是针对flot（0.7）的旧版本。

话虽如此，我不会使用这个插件。如果你只是想突出一个系列的传奇鼠标悬停，这是非常简单的。

$('#legend .legendLabel, #legend .legendColorBox').on('mouseenter', function() {
    var label = $(this).text();
    var allSeries = $_plot.getData();
    // find your series by label
    for (var i = 0; i < allSeries.length; i++){
      if (allSeries[i].label == label){
        allSeries[i].oldColor = allSeries[i].color;
        allSeries[i].color = 'black'; // highlight it in some color
        break;
      }
    }
    $_plot.draw(); // draw it
  });
  $('#legend .legendLabel, #legend .legendColorBox').on('mouseleave', function() {
    var label = $(this).text();
    var allSeries = $_plot.getData();
    for (var i = 0; i < allSeries.length; i++){
      if (allSeries[i].label == label){
        allSeries[i].color = allSeries[i].oldColor;
        break;
      }
    }
    $_plot.draw();
  });

请参阅此处的示例。

相关文章：