如何在保持悬停事件触发的同时隐藏悬停值信息?
How to hide values information on hover while keeping hover events firing?
我需要在 plotly.js 中自定义图形的悬停交互。我显示时间序列并希望悬停光标只是一条垂直线。光标下方的值应显示在图表下方的 table 中(不在图表本身内)。我设法显示垂直线光标并在下面的 table 中显示值,但无法弄清楚如何禁用在图表中显示值(我的意思是将鼠标悬停在图表上时,工具提示就像带有值的形状) ,查看代码段。
我只发现我可以通过在布局上设置属性 hovermode: false
来禁用工具提示,但是没有触发悬停事件,我需要绘制垂直线光标。
有办法实现吗?
var gd = document.getElementById('tester');
var hoverInfo = document.getElementById('hoverinfo');
var traceX = {
name: "X",
x: ['2001-06-11 11:50', '2001-06-12 00:00', '2001-06-12 12:30'],
y: [35, 21, 28],
type: 'scatter', // set the chart type
mode: 'lines+markers',
line: {
width: 1
}
};
var cursor1 = {
xid: 1,
type: 'line',
// x-reference is assigned to the x-values
xref: 'x',
// y-reference is assigned to the plot paper [0,1]
yref: 'paper',
x0: '2001-06-12 12:30',
y0: 0,
x1: '2001-06-12 12:30',
y1: 1,
fillcolor: '#d3d3d3',
opacity: 0.1,
};
var layout = {
yaxis: {
title: "Wind Speed",
hoverformat: ''
}, // set the y axis title
xaxis: {
showgrid: false, // remove the x-axis grid lines
tickformat: "%B, %Y", // customize the date format to "month, day"
hoverformat: ''
},
margin: { // update the left, bottom, right, top margin
l: 40,
b: 40,
r: 20,
t: 20
},
showline: true,
hovermode: 'x',
shapes: []
};
var hoverFn = function(data) {
if (gd.layout.shapes.length === 0) {
gd.layout.shapes.push(cursor1);
}
var update = {
'shapes[0].x0': data.points[0].x,
'shapes[0].x1': data.points[0].x
};
Plotly.relayout(gd, update);
var infotext = data.points.map(function(d) {
return (d.data.name + ': ' + d.x + ' | ' + d.y.toPrecision(3));
});
hoverInfo.innerHTML = infotext.join('<br/>');
};
var unhoverFn = function(data) {
//hoverInfo.innerHTML = '';
}
var draw = function(data, layout) {
Plotly.newPlot(gd, data, layout, {
showLink: false,
displaylogo: false
});
gd.on('plotly_click', function(data) {
//console.log('click');
})
.on('plotly_beforehover', function(data) {
//console.log('beforehover');
})
.on('plotly_hover', function(data) {
//var pointNum = data.points[0].pointNumber;
var pointNum = data;
hoverFn(data);
})
.on('plotly_unhover', function(data) {
unhoverFn(data);
});
Plotly.addTraces(gd, [traceX]);
};
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows) {
var data = [{
name: 'P1',
type: 'scatter', // set the chart type
mode: 'lines', // connect points with lines
x: rows.map(function(row) { // set the x-data
return row['Time'];
}),
y: rows.map(function(row) { // set the x-data
return row['10 Min Sampled Avg'];
}),
line: { // set the width of the line.
width: 1
}
}, {
name: 'P2',
type: 'scatter', // set the chart type
mode: 'lines', // connect points with lines
x: rows.map(function(row) { // set the x-data
return row['Time'];
}),
y: rows.map(function(row) { // set the x-data
return Number(row['10 Min Sampled Avg']) + 3.0;
}),
line: { // set the width of the line.
width: 1
}
}];
draw(data, layout);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="tester" style="width:600px;height:300px;"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>
找到了。将 Plotly.Fx.hover(gd, []);
添加到我的 hoverFn()
中。数组(第二个参数)指定要显示的点,将其留空即可。
(基于文档中的 example。)
var gd = document.getElementById('tester');
var hoverInfo = document.getElementById('hoverinfo');
var traceX = {
name: "X",
x: ['2001-06-11 11:50', '2001-06-12 00:00', '2001-06-12 12:30'],
y: [35, 21, 28],
type: 'scatter', // set the chart type
mode: 'lines+markers',
line: {
width: 1
}
};
var cursor1 = {
xid: 1,
type: 'line',
// x-reference is assigned to the x-values
xref: 'x',
// y-reference is assigned to the plot paper [0,1]
yref: 'paper',
x0: '2001-06-12 12:30',
y0: 0,
x1: '2001-06-12 12:30',
y1: 1,
fillcolor: '#d3d3d3',
opacity: 0.1,
};
var layout = {
yaxis: {
title: "Wind Speed",
hoverformat: ''
}, // set the y axis title
xaxis: {
showgrid: false, // remove the x-axis grid lines
tickformat: "%B, %Y", // customize the date format to "month, day"
hoverformat: ''
},
margin: { // update the left, bottom, right, top margin
l: 40,
b: 40,
r: 20,
t: 20
},
showline: true,
hovermode: 'x',
shapes: []
};
var hoverFn = function(data) {
Plotly.Fx.hover(gd, []);
if (gd.layout.shapes.length === 0) {
gd.layout.shapes.push(cursor1);
}
var update = {
'shapes[0].x0': data.points[0].x,
'shapes[0].x1': data.points[0].x
};
Plotly.relayout(gd, update);
var infotext = data.points.map(function(d) {
return (d.data.name + ': ' + d.x + ' | ' + d.y.toPrecision(3));
});
hoverInfo.innerHTML = infotext.join('<br/>');
};
var unhoverFn = function(data) {
//hoverInfo.innerHTML = '';
}
var draw = function(data, layout) {
Plotly.newPlot(gd, data, layout, {
showLink: false,
displaylogo: false
});
gd.on('plotly_click', function(data) {
//console.log('click');
})
.on('plotly_beforehover', function(data) {
//console.log('beforehover');
})
.on('plotly_hover', function(data) {
//var pointNum = data.points[0].pointNumber;
var pointNum = data;
hoverFn(data);
})
.on('plotly_unhover', function(data) {
unhoverFn(data);
});
Plotly.addTraces(gd, [traceX]);
};
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows) {
var data = [{
name: 'P1',
type: 'scatter', // set the chart type
mode: 'lines', // connect points with lines
x: rows.map(function(row) { // set the x-data
return row['Time'];
}),
y: rows.map(function(row) { // set the x-data
return row['10 Min Sampled Avg'];
}),
line: { // set the width of the line.
width: 1
}
}, {
name: 'P2',
type: 'scatter', // set the chart type
mode: 'lines', // connect points with lines
x: rows.map(function(row) { // set the x-data
return row['Time'];
}),
y: rows.map(function(row) { // set the x-data
return Number(row['10 Min Sampled Avg']) + 3.0;
}),
line: { // set the width of the line.
width: 1
}
}];
draw(data, layout);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="tester" style="width:600px;height:300px;"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>
另一种解决方案是使用 hoverinfo
值并将其设置为 'none',如参考文献中所示:https://plot.ly/javascript/reference/#scatter-hoverinfo
像这样:
var trace1 =
{
x: [1, 2, 3],
y: [40, 50, 60],
name: 'data1',
type: 'scatter',
hoverinfo: 'none'
};
优点是悬停事件仍然会触发。如果您改用 Plotly.Fx.hover(gd, []);
,unhover-event 将不会触发。
从参考资料中复制:
hoverinfo(flaglist 字符串)
"x"、"y"、"z"、"text"、"name" 的任意组合,用“+”或 "all" 或"none" 或 "skip"。
示例:"x"、"y"、"x+y"、"x+y+z"、"all"
默认值:"all"
确定悬停时显示哪些跟踪信息。如果设置none
或skip
,悬停时不显示任何信息。但是,如果设置了 none
,点击和悬停事件仍然会被触发。
我需要在 plotly.js 中自定义图形的悬停交互。我显示时间序列并希望悬停光标只是一条垂直线。光标下方的值应显示在图表下方的 table 中(不在图表本身内)。我设法显示垂直线光标并在下面的 table 中显示值,但无法弄清楚如何禁用在图表中显示值(我的意思是将鼠标悬停在图表上时,工具提示就像带有值的形状) ,查看代码段。
我只发现我可以通过在布局上设置属性 hovermode: false
来禁用工具提示,但是没有触发悬停事件,我需要绘制垂直线光标。
有办法实现吗?
var gd = document.getElementById('tester');
var hoverInfo = document.getElementById('hoverinfo');
var traceX = {
name: "X",
x: ['2001-06-11 11:50', '2001-06-12 00:00', '2001-06-12 12:30'],
y: [35, 21, 28],
type: 'scatter', // set the chart type
mode: 'lines+markers',
line: {
width: 1
}
};
var cursor1 = {
xid: 1,
type: 'line',
// x-reference is assigned to the x-values
xref: 'x',
// y-reference is assigned to the plot paper [0,1]
yref: 'paper',
x0: '2001-06-12 12:30',
y0: 0,
x1: '2001-06-12 12:30',
y1: 1,
fillcolor: '#d3d3d3',
opacity: 0.1,
};
var layout = {
yaxis: {
title: "Wind Speed",
hoverformat: ''
}, // set the y axis title
xaxis: {
showgrid: false, // remove the x-axis grid lines
tickformat: "%B, %Y", // customize the date format to "month, day"
hoverformat: ''
},
margin: { // update the left, bottom, right, top margin
l: 40,
b: 40,
r: 20,
t: 20
},
showline: true,
hovermode: 'x',
shapes: []
};
var hoverFn = function(data) {
if (gd.layout.shapes.length === 0) {
gd.layout.shapes.push(cursor1);
}
var update = {
'shapes[0].x0': data.points[0].x,
'shapes[0].x1': data.points[0].x
};
Plotly.relayout(gd, update);
var infotext = data.points.map(function(d) {
return (d.data.name + ': ' + d.x + ' | ' + d.y.toPrecision(3));
});
hoverInfo.innerHTML = infotext.join('<br/>');
};
var unhoverFn = function(data) {
//hoverInfo.innerHTML = '';
}
var draw = function(data, layout) {
Plotly.newPlot(gd, data, layout, {
showLink: false,
displaylogo: false
});
gd.on('plotly_click', function(data) {
//console.log('click');
})
.on('plotly_beforehover', function(data) {
//console.log('beforehover');
})
.on('plotly_hover', function(data) {
//var pointNum = data.points[0].pointNumber;
var pointNum = data;
hoverFn(data);
})
.on('plotly_unhover', function(data) {
unhoverFn(data);
});
Plotly.addTraces(gd, [traceX]);
};
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows) {
var data = [{
name: 'P1',
type: 'scatter', // set the chart type
mode: 'lines', // connect points with lines
x: rows.map(function(row) { // set the x-data
return row['Time'];
}),
y: rows.map(function(row) { // set the x-data
return row['10 Min Sampled Avg'];
}),
line: { // set the width of the line.
width: 1
}
}, {
name: 'P2',
type: 'scatter', // set the chart type
mode: 'lines', // connect points with lines
x: rows.map(function(row) { // set the x-data
return row['Time'];
}),
y: rows.map(function(row) { // set the x-data
return Number(row['10 Min Sampled Avg']) + 3.0;
}),
line: { // set the width of the line.
width: 1
}
}];
draw(data, layout);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="tester" style="width:600px;height:300px;"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>
找到了。将 Plotly.Fx.hover(gd, []);
添加到我的 hoverFn()
中。数组(第二个参数)指定要显示的点,将其留空即可。
(基于文档中的 example。)
var gd = document.getElementById('tester');
var hoverInfo = document.getElementById('hoverinfo');
var traceX = {
name: "X",
x: ['2001-06-11 11:50', '2001-06-12 00:00', '2001-06-12 12:30'],
y: [35, 21, 28],
type: 'scatter', // set the chart type
mode: 'lines+markers',
line: {
width: 1
}
};
var cursor1 = {
xid: 1,
type: 'line',
// x-reference is assigned to the x-values
xref: 'x',
// y-reference is assigned to the plot paper [0,1]
yref: 'paper',
x0: '2001-06-12 12:30',
y0: 0,
x1: '2001-06-12 12:30',
y1: 1,
fillcolor: '#d3d3d3',
opacity: 0.1,
};
var layout = {
yaxis: {
title: "Wind Speed",
hoverformat: ''
}, // set the y axis title
xaxis: {
showgrid: false, // remove the x-axis grid lines
tickformat: "%B, %Y", // customize the date format to "month, day"
hoverformat: ''
},
margin: { // update the left, bottom, right, top margin
l: 40,
b: 40,
r: 20,
t: 20
},
showline: true,
hovermode: 'x',
shapes: []
};
var hoverFn = function(data) {
Plotly.Fx.hover(gd, []);
if (gd.layout.shapes.length === 0) {
gd.layout.shapes.push(cursor1);
}
var update = {
'shapes[0].x0': data.points[0].x,
'shapes[0].x1': data.points[0].x
};
Plotly.relayout(gd, update);
var infotext = data.points.map(function(d) {
return (d.data.name + ': ' + d.x + ' | ' + d.y.toPrecision(3));
});
hoverInfo.innerHTML = infotext.join('<br/>');
};
var unhoverFn = function(data) {
//hoverInfo.innerHTML = '';
}
var draw = function(data, layout) {
Plotly.newPlot(gd, data, layout, {
showLink: false,
displaylogo: false
});
gd.on('plotly_click', function(data) {
//console.log('click');
})
.on('plotly_beforehover', function(data) {
//console.log('beforehover');
})
.on('plotly_hover', function(data) {
//var pointNum = data.points[0].pointNumber;
var pointNum = data;
hoverFn(data);
})
.on('plotly_unhover', function(data) {
unhoverFn(data);
});
Plotly.addTraces(gd, [traceX]);
};
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows) {
var data = [{
name: 'P1',
type: 'scatter', // set the chart type
mode: 'lines', // connect points with lines
x: rows.map(function(row) { // set the x-data
return row['Time'];
}),
y: rows.map(function(row) { // set the x-data
return row['10 Min Sampled Avg'];
}),
line: { // set the width of the line.
width: 1
}
}, {
name: 'P2',
type: 'scatter', // set the chart type
mode: 'lines', // connect points with lines
x: rows.map(function(row) { // set the x-data
return row['Time'];
}),
y: rows.map(function(row) { // set the x-data
return Number(row['10 Min Sampled Avg']) + 3.0;
}),
line: { // set the width of the line.
width: 1
}
}];
draw(data, layout);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="tester" style="width:600px;height:300px;"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>
另一种解决方案是使用 hoverinfo
值并将其设置为 'none',如参考文献中所示:https://plot.ly/javascript/reference/#scatter-hoverinfo
像这样:
var trace1 =
{
x: [1, 2, 3],
y: [40, 50, 60],
name: 'data1',
type: 'scatter',
hoverinfo: 'none'
};
优点是悬停事件仍然会触发。如果您改用 Plotly.Fx.hover(gd, []);
,unhover-event 将不会触发。
从参考资料中复制: hoverinfo(flaglist 字符串)
"x"、"y"、"z"、"text"、"name" 的任意组合,用“+”或 "all" 或"none" 或 "skip"。
示例:"x"、"y"、"x+y"、"x+y+z"、"all"
默认值:"all"
确定悬停时显示哪些跟踪信息。如果设置none
或skip
,悬停时不显示任何信息。但是,如果设置了 none
,点击和悬停事件仍然会被触发。