使用 plotly 的 hoverinfo: "x+y" with mode: "lines" 仅显示 y 值

Question

我正在尝试绘制折线图并希望悬停信息显示 x 的值和 y 的值.

我的轨迹具有以下属性（以及其他属性）：

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

问题是悬停只显示 y 值，尽管我选择了 hoverinfo: "x+y".

请注意，我想显示 x 值而不将它们转换为 text: [x-values]，这看起来有点老套。

如何做到这一点？

Answer 1

您需要添加

hovermode: "closest"

到 layout 变量。否则 coordinates/labels 仅显示在 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>

使用 plotly 的 hoverinfo: "x+y" with mode: "lines" 仅显示 y 值

Using plotly's hoverinfo: "x+y" with mode: "lines" shows only y values

javascript

plotly