Question

当我的鼠标不在网格的范围内时，我试图隐藏我在jQuery Flot图中创建的垂直条。我为网格设置了水平边界：horizontalBounds = [leftOffset, plot.width() + leftOffset];。然后我使用if语句说＆＃34;如果鼠标在垂直范围内，请执行verticalBar.css。＆＃34;

if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
            if (typeof verticalBar !== "undefined" && verticalBar !== null) {
              verticalBar.css({
                transform: "translate(" + position.pageX + "px, 0px)"
              });
            }

下面是我的css代码（实际上是在我的javascript文件中;不要问......）。当鼠标不在那些水平范围内时，我需要做什么才能隐藏verticalBar？我以为我可以添加属性`visibility：hidden＆＃39;到verticalBar.css，但我无法弄清楚如何做到这一点。任何提示？

verticalBar.css({
              backgroundColor: "#F7E4E6",
              width: "1px",
              height: "100%",
              position: "absolute",
              padding: 0,
              margin: 0,
              left: 0,
              transform: "translateX(" + plot.getPlotOffset().left + "px)"
            });
          }

Answer 1

尝试使用“display：none;”在你的CSS中。

Answer 2

根据您想要隐藏栏的方式，您可以拥有像display: none这样简单的内容。

如果您想添加一些动画，可以使用一些jQuery函数来控制该特定节点。

您还可以利用一组CSS类名称交换来触发一些CSS动画。

Answer 3

所以这些方法似乎都不适合我。我最终发现Flot有一个十字准线插件（flot.crosshair）。十字准线可以配置为仅在x轴/ x坐标上起作用，因为它跟踪鼠标的移动。以下是运行中的十字准线跟踪示例：Flot Tracking Example。添加插件后，我就能获得理想的结果;因为“垂直条”仅在光标位于网格上时显示。以下是配置它所需要做的所有事情（除了将插件添加到适当的文件中）。希望这可以帮助将来的某个人。

 plot = $.plot(
                placeholder
                data
                grid:
                    clickable: true
                    hoverable: true
                    color: "white"
                    mouseActiveRadius: 1000
                tooltip:
                    show: true
                    content: '%y'

                crosshair:
                    mode: "x"
                    color: "#FFFFFF"
                    lineWidth: 1

使用css

3 个答案: