Plot.ly：悬停文本的简单前缀或后缀

Question

我已尝试阅读文档，但没有找到一种向悬停文本添加后缀的简单方法。有没有办法向 hoverformat 添加文本？例如 y respondents 其中 y 是 y 值。

设置yaxis: {hoverformat: ''}好像不允许字符串？我习惯于使用 FlotChart，您可以在其中简单地输入 "%y respondents".

非常感谢任何帮助。

Answer 1

如果您在跟踪中设置 text，您可以获得后缀。

Sets text elements associated with each (x,y) pair. If a single string, the same string appears over all the data points. If an array of string, the items are mapped in order to the this trace's (x,y) coordinates.

与 hoverinfo (hoverinfo: 'text+y') 一起，您可以接近您想要的（除了需要手动删除的不需要的换行符）。

对于条形图，这似乎不起作用（至少在 2017 年 1 月不起作用）。需要复制数据写入text属性中的数组（也解决换行问题）

var N = 16,
  x = Plotly.d3.range(N).map(Plotly.d3.random.normal(3, 1)),
  y = Plotly.d3.range(N),

  data = [{
    x: x,
    y: y,
    type: 'scatter',
    mode: 'markers',
    text: 'respondents',
    marker: {
      size: 16
    },
    hoverinfo: 'text+y'
  }],
  layout = {
    hovermode: 'closest',
  };

Plotly.plot('myDiv', data, layout);

//here comes the bar chart
var data = [{
  x: ['Jan', 'Feb', 'Mar'],
  y: [20, 14, 25],
  type: 'bar',
  text: [],
  hoverinfo: 'text'
}];

for (N = 0; N < data[0].y.length; N += 1) {
  data[0].text.push(data[0].y[N] + ' Respondents');
}
Plotly.plot('myBarChart', data);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width:400px;height:400px;"></div>
<div id="myBarChart" style="width:400px;height:400px;"></div>

Plot.ly：悬停文本的简单前缀或后缀

Plot.ly: Simple prefix or suffix for hover text

d3.js

plotly