Dygraphs:无法为自定义图例设置 z-index div
Dygraphs: cannot set z-index for custom legend div
我正在尝试实现一个将跟随鼠标光标的图例。它有效,但有一个问题:图例 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; }
不是一个选项。
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) 请参阅以下工作片段...
<!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>
我正在尝试实现一个将跟随鼠标光标的图例。它有效,但有一个问题:图例 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; }
不是一个选项。
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) 请参阅以下工作片段...
<!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>