javascript - 如何将自定义工具提示放置在绘图条形图中的条形顶部？

Question

希望你们都做得很好。

我陷入了一个问题。我正在将 plotlyjs 用于条形图，其中我正在使用自定义工具提示（使用悬停事件来创建自定义 html 内容）。下面你可以看到：

<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
<div id="custom-tooltip">Custom tooltip</div>

---

var trace1 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  name: 'SF Zoo',
  type: 'bar',
  hoverinfo: 'none'
};

var trace2 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [12, 18, 29],
  name: 'LA Zoo',
  type: 'bar',
  hoverinfo: 'none'
};

var data = [trace1, trace2];

var layout = {barmode: 'stack', showlegend: false};

Plotly.newPlot('myDiv', data, layout);

var graphElem = document.getElementById('myDiv');
const tooltipElem = document.getElementById('custom-tooltip');

graphElem.on('plotly_hover', function(data){
  const yaxis = data.points[0].yaxis;
    const xaxis = data.points[0].xaxis;
  console.log(data)
    const distY = yaxis.d2p(data.points[0].y) + yaxis._offset + 20; //
    const distX = xaxis.d2p(data.points[0].x) + xaxis._offset - 110;
 
  tooltipElem.innerHtml = '<h3>Custom tooltip</h3>';
  console.log(distX, distY)
  tooltipElem.style.left = distX + "px";
    tooltipElem.style.top = distY + "px";
    tooltipElem.style.display = "block";
  
})
 .on('plotly_unhover', function(data){

});

但是每当悬停在任何栏上时，我都找不到将自定义 div 放置在栏顶部的方法。

密码笔

我怎样才能做到这一点？

标签： javascriptplotly.js