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插件正是我试图让我的verticalBar使用plothover做的。主要目标是获取verticalBar（参见上面的代码），它使用plothover跟踪鼠标光标，当光标离开网格时消失。十字准线插件就是这样做的。以下是其运作方式的示例：crosshair tracking example，此处是文档和下载信息：flot.crosshair.js。

Plothover不适用于对象

1 个答案: