Plotover 不适用于对象

Question

我正在使用 Flot 的 plothover 方法在鼠标在绘图网格内移动时创建某些动作。对于工具提示和突出显示我的数据点来说，它似乎工作正常。我创建了一个跟随鼠标光标的垂直条对象，我只希望它在鼠标悬停在网格上时可见。简单地将 verticalBar 的 css 设置为 visibility: "hidden" 或 display: "none" 似乎不起作用（注意：我想看到垂直条，但只有当鼠标在网格上时）。我相信这个问题与我对 plothover 的使用有关，但我不确定为什么它不像处理工具提示和高亮显示那样处理 verticalBar。

placeholder = $(element);
        plot = $.plot(placeholder, data, {
          grid: {
            clickable: true,
            hoverable: true,
            color: "white",
            mouseActiveRadius: 100
          },
          tooltip: {
            show: true,
            content: '%y'
          },
          series: {
            lines: {
              show: true
            },
            points: {
              show: true,
              radius: 2.0
            },
            autoHighlight: true,
            highlightColor: "#37FDFC"
          },
          colors: (function() {
            var i, len, ref, results;
            results = [];
            for (i = 0, len = data.length; i < len; i++) {
              l = data[i];
              results.push(((ref = l.lines) != null ? ref.fillColor : void 0) === "#C90E30" ? "#A80C28" : "#357A27");
            }
            return results;
          })(),
          xaxis: {
            show: false
          },
          yaxis: {
            min: params.min(),
            max: params.max(),
            font: {
              size: 10,
              lineHeight: 12,
              color: "#000000"
            },
            ticks: 4,
            minTickSize: 50,
            tickFormatter: function(val, axis) {
              return (val.toFixed(axis.tickDecimals)) + "m";
            },
            tickDecimals: 0
          }
        });
        placeholder.on("plothover", function(event, position, item) {
          var horizontalBounds, leftOffset, pixelCoords, topOffset;
          if (pointsOnly.length >= position.x) {
            pixelCoords = plot.pointOffset({
              x: position.x,
              y: pointsOnly[parseInt(position.x)][2]
            });
            console.log(pointsOnly[parseInt(position.x)][0]);
            if (pointsOnly[parseInt(position.x)][0] === "#439C32") {
              vis = "The target is Visible";
              visLegend.text(vis);
            } else if (pointsOnly[parseInt(position.x)][0] === "#C90E30") {
              vis = "The target is Not Visible";
              visLegend.text(vis);
            }
          }
          leftOffset = plot.getPlotOffset().left;
          topOffset = plot.getPlotOffset().top;
          horizontalBounds = [leftOffset, plot.width() + leftOffset];
          if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
            if (typeof verticalBar !== "undefined" && verticalBar !== null) {
              verticalBar.css({
                transform: "translate(" + position.pageX + "px, 0px)"
              });
            }
          }
          if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
            return typeof visLegend !== "undefined" && visLegend !== null ? visLegend.css({
              transform: "translate(" + position.pageX + "px, 0px)"
            }) : void 0;
          }
        });
        verticalBar = placeholder.append("<div></div>").children().eq(-1);
        verticalBar.css({
          backgroundColor: "#F7E4E6",
          width: "1px",
          height: "100%",
          position: "absolute",
          padding: 0,
          margin: 0,
          left: 0,
          display: "none",
          transform: "translateX(" + plot.getPlotOffset().left + "px)"
        });
        visLegend = placeholder.append("<div></div>").children().eq(-1);
        visLegend.css({
          border: "1px solid #FF0000",
          backgroundColor: "#ff66cc",
          fontWeight: "bold",
          fontSize: "7",
          color: "#ffffff",
          position: "absolute",
          padding: "1px",
          margin: 0,
          top: -30,
          opacity: 0.5,
          left: 0,
          transform: "translateX(" + plot.getPlotOffset().left + "px)"
        });
        return console.log(plot.getData());
      };
    })(this)
  };
});
return null;

Answer 1

显然，有一个 flot 插件可以完全执行我试图使用 plothover 让我的 verticalBar 执行的操作。主要目标是让使用 plothover 跟踪鼠标光标的 verticalBar（参见我上面的代码）在光标离开网格时消失。十字准线插件正是这样做的。这是它如何运作的一个例子：crosshair tracking example and here is the documentation and download info: flot.crosshair.js。

Plotover 不适用于对象

Plothover not working for object

jquery

hover

flot