使用plotly的hoverinfo：「x + y」與模式：「lines」只顯示y值

Question

我試圖繪製折線圖並希望懸停信息顯示值x和值爲y。

我的跟蹤具有以下屬性（其中包括）：

type: 'scatter', 
    mode: 'lines', 
    hoverinfo: "x+y" 

的問題是，懸停僅顯示Ÿ價值，雖然我已經選擇hoverinfo: "x+y"。

請注意，我想顯示x的值，而不將它們轉換爲text: [x-values]，這看起來有點亂。

這怎麼辦？

Answer 1

您需要

hovermode: "closest" 

添加到layout變量。否則，座標/標籤僅顯示在x和y軸上。使用hovermode: "closest"時，它們顯示在最靠近的標記旁邊。

var d3 = Plotly.d3; 
 
var N = 25; 
 
var x = d3.range(N).map(d3.random.normal()); 
 
var y = d3.range(N).map(d3.random.normal()); 
 

 
var data = [{ 
 
    x: x, 
 
    y: y, 
 
    type: "scatter", 
 
    mode: "lines", 
 
    marker: { 
 
     color: "rgba(200, 50, 100, .7)", 
 
     size: 16 
 
    }, 
 
    hoverinfo: "x+y" 
 
}]; 
 
var layout = { 
 
    hovermode: "closest", 
 
    title: "closest" 
 
}; 
 

 
Plotly.newPlot("myDiv1", data, layout); 
 
layout = { 
 
    title: "standard" 
 
}; 
 
Plotly.newPlot("myDiv2", data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id='myDiv1'></div> 
 
<div id='myDiv2'></div>