假设我在plotly的文档中使用simple box plot example:
var data = [
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
type: 'box'
}
];
Plotly.newPlot('myDiv', data);
我想在框形图左侧的基础数据散布图上覆盖一个标记。该标记将具有其自己的悬停文本和所有内容。这就是我设想的样子:
有办法做到这一点吗?我到处都在寻找一个示例,但找不到任何相关的内容。谢谢!
最佳答案
如果要在箱形图(pointpos = 0
)上绘制点,则可以添加x值与箱形图名称相同的另一条迹线,在本例中为trace 0
。
如果要在箱线图旁边绘制点,这将变得更加棘手,因为散点在轴上没有定义x值。
您可以手动输入新点,但是悬停信息仍然在旧位置。
var data = [{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: 0,
type: 'box'
},
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: 1.8,
type: 'box'
},
{
x: ['trace 0'],
y: [18],
name: 'My special marker',
text: 'Some really interesting hover info',
marker: {
size: 20
}
},
{
x: ['trace 1'],
y: [18],
name: 'Another special marker',
text: 'Some really interesting hover info',
marker: {
size: 20
}
}
];
Plotly.newPlot('myDiv', data);
var boxPoint = document.getElementsByClassName('trace boxes')[1].getElementsByClassName('point')[0];
var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('point')[1];
var y = point.attributes['transform'].value.split(',')[1];
var x = boxPoint.attributes['transform'].value.split(',')[0];
point.setAttribute('transform', x + ', ' + y);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>