Javascript 动态图：无法为自定义图例div设置z索引_Javascript_Css_Charts_Dygraphs

Javascript 动态图：无法为自定义图例div设置z索引

javascript css charts

Javascript 动态图：无法为自定义图例div设置z索引,javascript,css,charts,dygraphs,Javascript,Css,Charts,Dygraphs,我试图实现一个图形图例，它将跟随鼠标光标。它可以工作，但有一个问题：图例div绘制在图形下面，这不是我想要的见以下MWE： <!DOCTYPE html> <html> <head> <title>Testing</title> <script src="static/dygraph.min.js"></script> <link rel="stylesheet" href="

我试图实现一个图形图例，它将跟随鼠标光标。它可以工作，但有一个问题：图例div绘制在图形下面，这不是我想要的

见以下MWE：

<!DOCTYPE html>
<html>
  <head>
    <title>Testing</title>
    <script src="static/dygraph.min.js"></script>
    <link rel="stylesheet" href="static/dygraph.css" />
    <style>
      #graph {
        height: 400px;
        width: 640px;
      }
      #legend {
        position: absolute;
        background-color: red;
        /* z-index: 99; */
      }
    </style>
  </head>
  <body>
    <div id="legend"></div>
    <div id="graph"></div>
    <script>
      document.onmousemove = function(e) {
        var legend = document.getElementById("legend");
        legend.style.left = e.pageX + "px";
        legend.style.top = e.pageY + "px";
      };

      var data = [];
      for(let i = 0; i < 100; i++) {
        data.push([i, Math.random(), Math.random()]);
      }
      var g = new Dygraph(
        "graph",
        data,
        {
          fillGraph: true,
          fillAlpha: 0.8,
          labels: ["x", "y1", "y2"],
          labelsDiv: legend,
          legendFormatter: legendFormatter
        }
      );

      function legendFormatter(data) {
        if(data.x === null) return "";
        return data.xHTML + "<br />" +
               data.series.map(
                 v => "<span style='color:" + v.color + ";'>" +
                    v.labelHTML + "</span>: " + v.yHTML
               ).join("<br />");
      }
    </script>
  </body>
</html>


测试
#图表{
高度：400px；
宽度：640px；
}
#传奇{
位置：绝对位置；
背景色：红色；
/*z指数：99*/
}
document.onmousemove=函数（e）{
var图例=document.getElementById（“图例”）；
legend.style.left=e.pageX+“px”；
legend.style.top=e.pageY+“px”；
};
var数据=[]；
for（设i=0；i<100；i++）{
data.push（[i，Math.random（），Math.random（）]）；
}
var g=新动态图(
“图形”，
数据，
{
是的，
fillAlpha:0.8，
标签：[“x”、“y1”、“y2”]，
labelsDiv：传奇，
legendFormatter:legendFormatter
}
);
函数legendFormatter（数据）{
if（data.x==null）返回“”；
return data.xHTML+“
”+
data.series.map(
v=>“”+
v、 labelHTML+“：”+v.yHTML
).加入（“
”）；
}

以下屏幕截图显示了当前行为（这不是我想要的）：

我的本能是将传奇设定为具有更高的z指数。然而，这样做导致了一些奇怪的行为

在Firefox中，传奇就这样消失了

在Chromium中，当光标静止（在图形上）时，图例不可见，当光标移动时，可以看到图例闪烁

这是为什么？我如何使图例正确显示（在图表顶部）

我仍然希望在光标离开图形时隐藏图例，因此设置

#legend{display:block！important；}

不是一个选项。

1）当图例div位于顶部并移动到光标位置时，
这会混淆突出显示悬停数据点的图形函数。
您会注意到，当图例div消失时，图形上没有突出显示的点。
这会导致闪烁

要更正此问题，请在x、y位置添加几个像素，
因此图例div不在光标的正下方

legend.style.left = (e.pageX + 16) + "px";
legend.style.top = (e.pageY + 16) + "px";

另外，鼠标会隐藏部分信息，否则

2）要将图例div放置在图表顶部，而不添加z索引，
稍后在dom中的graph div之后添加legend div

<div id="graph"></div>
<div id="legend"></div>

3）请参阅下面的工作代码段


测试
#图表{
高度：400px；
宽度：640px；
}
#传奇{
位置：绝对位置；
背景色：红色；
}
var图例=document.getElementById（“图例”）；
document.onmousemove=函数（e）{
legend.style.left=（e.pageX+16）+“px”；
legend.style.top=（e.pageY+16）+“px”；
};
var数据=[]；
for（设i=0；i<100；i++）{
data.push（[i，Math.random（），Math.random（）]）；
}
var g=新动态图(
“图形”，
数据，
{
是的，
fillAlpha:0.8，
标签：[“x”、“y1”、“y2”]，
labelsDiv：传奇，
legendFormatter:legendFormatter，
}
);
函数legendFormatter（数据）{
//if（data.x==null）返回“”；
return data.xHTML+“
”+
data.series.map(
v=>“”+
v、 labelHTML+“：”+v.yHTML
).加入（“
”）；
}