Question

我正在创建一个箱线图，我希望在单个箱图上显示悬停文本（类似于在绘图散点图中可以完成的内容）。在这种特定情况下，我想显示分发中的点数，但我对一般解决方案更感兴趣。

在跟踪词典中，我尝试过使用密钥＆＃34; text＆＃34;和一个值是我想要的文本列表：

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);
}

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

Answer 1

将数据绑定到隐藏元素。然后有一个：hover类改变它的显示和位置属性。

您可能需要稍微使用定位，但将其设置为绝对或固定可能对您有用。

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

将悬停文本添加到plotly.js boxplot

2 个答案: