自定义悬停文本，单数/复数 (plotly.js)答案

【问题标题】：Custom hover text, singular/plural (plotly.js)自定义悬停文本，单数/复数 (plotly.js)
【发布时间】：2016-04-14 10:41:32
【问题描述】：

我正在构建一个散点图。

我的 X 轴代表日期，Y 轴代表给出的响应数。

当鼠标悬停时，我想显示：

1 回复或
N 条回复

我想这与自定义悬停有关，但看不到如何使用跟踪或 Y 轴的 hoverinfo 属性。

【问题讨论】：

标签： plotly

【解决方案1】：

您需要在跟踪中使用text 属性。

https://jsfiddle.net/abalter/n54k9zzj/

var data =
[
  {x: "2015-05-01", y: 5},
  {x: "2015-05-02", y: 10},
  {x: "2015-05-03", y: 0},
  {x: "2015-05-04", y: 1}
];

var x = [];
var y = [];
var text = [];
data.forEach(function(item, index)
{
  x.push(item.x);
  y.push(item.y);
  if (item.y == 0)
  {
    text.push("No responses");
  }
  else if (item.y == 1)
  {
    text.push("1 reponse");
  }
  else
  {
    text.push(item.y + " responses");
  }
});

var trace = 
{
  x: x,
  y: y,
  text: text,
  hoverinfo: "text",
  mode: "markers",
  name: "Responses"
}

var yaxis = 
{
    title: "Responses"
}

var xaxis = 
{
    type: "date"
}

var layout = 
{
  xaxis: xaxis,
  yaxis: yaxis
}

Plotly.plot
(
  "graph",
  [trace],
  layout
);

【讨论】：

【解决方案2】：

如果您想添加自定义文本，请尝试以下操作：

var myText = "Namaste" ;

var trace = {
    x: [1,2,3],
    y: [4,5,6],
    z: [7,8,9],
    text: ["A","B","C"],
    hovertemplate: ' x: %{x}<br> y: %{y}<br> z: %{z}<br> Placement:%{text}<br> myText: ' + myText,
    mode: 'markers' ,
    type: 'scatter3d' ,
    marker: {
        size:3,
        color: 'rgb(112, 32, 130)'
    }
};

注意：属性“text”，“hovertemplate”在添加您自己的自定义文本时起着重要作用。

【讨论】：

请注意，如果您需要更多自定义文本，可以在hovertemplate 中使用关键字%{text} 和%{customdata}