Dygraphs：无法为自定义图例 div 设置 z-index答案

【问题标题】：Dygraphs: cannot set z-index for custom legend divDygraphs：无法为自定义图例 div 设置 z-index
【发布时间】：2018-07-20 20:14:52
【问题描述】：

我正在尝试实现一个跟随鼠标光标的图例。它可以工作，但有一个问题：图例 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>

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

我的本能是将图例设置为具有更高的 z-index。但是，这样做会导致一些奇怪的行为。

在 Firefox 中，图例会消失。

在 Chromium 中，当光标静止时（在图表上），图例不可见，而当光标移动时，图例会闪烁。

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

我仍然希望在光标离开图表时隐藏图例，因此设置 #legend { display: block !important; } 不是一个选项。

【问题讨论】：

标签： javascript css charts dygraphs

【解决方案1】：

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

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

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

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

2) 将图例 div 放置在图表顶部，而不添加 z-index，
稍后在 dom 中添加图例 div，在图形 div 之后...

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

3) 看下面的工作 sn-p...

<!DOCTYPE html>
<html>
  <head>
    <title>Testing</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.css" />
    <style>
      #graph {
        height: 400px;
        width: 640px;
      }
      #legend {
        position: absolute;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="graph"></div>
    <div id="legend"></div>
    <script>
      var legend = document.getElementById("legend");
      document.onmousemove = function(e) {
        legend.style.left = (e.pageX + 16) + "px";
        legend.style.top = (e.pageY + 16) + "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>

【讨论】：