Question

我正在寻找Brian Peiris（http://brian.peiris.name/highlightSeries/）制作的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());
        });
    });

我不确定在这里放什么代码，所以告诉我你是否需要更多;图表都运行正常，这只是就绪功能的一部分，在占位符内设置所有图表及其选项。

此外，还有几个附加在标签上的类别是无关紧要的;我正在尝试不同的方法让这些东西起作用。

Answer 1

该插件需要修补版flot才能正常工作（它引入了公共drawSeries方法）。 The last patched version适用于旧版本的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();
  });

参见示例here。

用于jquery flot图表的highlightSeries插件

1 个答案: