假设我在plotly的文档中使用simple box plot example

javascript - 是否可以在plotly.js箱形图的顶部覆盖标记?-LMLPHP

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


我想在框形图左侧的基础数据散布图上覆盖一个标记。该标记将具有其自己的悬停文本和所有内容。这就是我设想的样子:

javascript - 是否可以在plotly.js箱形图的顶部覆盖标记?-LMLPHP

有办法做到这一点吗?我到处都在寻找一个示例,但找不到任何相关的内容。谢谢!

最佳答案

如果要在箱形图(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>

10-05 23:12
查看更多