Ich muss Hover-Interaktion des Graphen in plotly.js anpassen. Ich zeige Zeitreihen an und möchte, dass der Hover-Cursor nur eine vertikale Linie ist. Die Werte unter dem Cursor sollten in einer Tabelle unterhalb des Graphen angezeigt werden (nicht innerhalb des Graphen selbst). Es gelang mir, den vertikalen Liniencursor zu zeigen und die Werte in der Tabelle unten anzuzeigen, aber ich kann nicht herausfinden, wie die Werte im Graphen deaktiviert werden können (ich meine die Tooltips wie Formen mit Werten, wenn man über den Graphen fährt), siehe Snippet .Wie kann man die Werte von Hover verbergen, während man Hover-Events aktiviert?
Ich finde nur, ich könnte die Tooltips deaktivieren, indem Sie das Attribut hovermode: false auf dem Layout festlegen, aber dann gibt es keine Hover-Ereignisse ausgelöst, die ich den vertikalen Liniencursor zeichnen muss.
Gibt es einen Weg, dies zu erreichen?
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>