Question

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

我的追踪具有以下属性（等等）：

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

问题是悬停只显示 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>

使用plotly的hoverinfo：“x + y”和模式：“lines”仅显示y值

1 个答案: