为Plotly.js箱线图添加悬停文本

Question

我正在创建一个箱线图，并且希望在每个箱线图上显示悬停文本（类似于plotly散点图中可以实现的功能）。在这种情况下，我想显示进入分布的点数，但更感兴趣的是一般解决方案。

在trace字典中，我尝试使用键“text”和一个包含所需文本的列表作为值。

for (var i = 0; i < genes.length; i++) {
    var d = distributions[i];
    var g = genes[i];

    var x = [];
    var text = [];
    for (var j = 0; j < d.length; j++) {
        x.push(g);
        text.push("N=" + d.length);
    }
    trace = {x: x, y:d, type: 'box', name: g, text:text};

    data.push(trace);
}

是否有关键字或机制，可以在用户将鼠标悬停在单个箱线图上时显示元数据？谢谢。

- dllahr

Answer 1

将数据绑定到隐藏元素上。然后使用:hover类更改其显示和位置属性。

您可能需要稍微调整一下位置，但将其设置为绝对或固定位置可能适合您。

- JvR

---

可以的。在这些例子中，他们将悬停（mouseenter和mouseleave）事件绑定到一个函数，该函数创建HTML并将其插入“显示元素”中。 - JvR

@dllahr 如果这篇文章对你有帮助，请标记为答案。谢谢。 - JvR

Answer 2

您可以使用以下提示在所选 Y 值处添加自定义工具提示：

• 添加一个带有所需 Y 值的条形跟踪器
• 隐藏其图例
• 将其不透明度设置为 0
• 自定义工具提示文本

示例：

let hover = {
    type: 'bar',
    x: ['col1', 'col2', 'col3'],
    y: [1,2,3],
    hovertext: ['text1', 'text2', 'text3'],
    marker: {
        color: '#333',
    },
    hoverinfo: 'text', // show only hovertext in tooltip
    showlegend: false, // hide legend
    opacity: 0, // hide bars
    width: .5, // align tooltips (have same width for boxplot and bars to)
};
data.push(hover);

演示：https://codepen.io/kiruahxh/pen/PoNYvWw

- Kiruahxh