Javascript Highchart-将div文本平行于条形图放置

我想将div文本放置在靠近条的位置。 如何设置div

我已经尝试将div设置为绝对位置，并且在图表呈现后，取顶值，如下所示

      $.each(series, function (i, s) {
          debugger;
          $.each(s.points, function (j, p: any) {
            debugger;
            topPosition.push(p);
          });
        });


topPosition[index].dataLabel.translateY

但对于堆叠的钢筋，这不起作用。 根据渲染的图表获取位置并将我们的div设置在highchart条形图旁边的最佳方法是什么？

预期结果：

---

您可以使用以下公式找到外部div的垂直位置：

div.style.top = chart.plotSizeX - point.plotX + chart.plotTop + 'px';

绘图区域旋转（90度），因此我们必须使用

chart.plotSizeX

和

point.plotX

而不是

chart.plotSizeY

和

point.plotY

。在本例中，

图表。plotSizeX

是绘图区域的高度，

点。plotX

是点到绘图区域底部的距离<代码>图表。plotTop不会更改-它描述了绘图区域距离图表顶部和底部的距离

示例：

HTML:

---

现场演示：

请检查我的问题。我已经更新了工作和非工作样品。对于正常的酒吧，这是工作。但对于堆叠的条形图，我不知道要使文本平行于条形图，我必须选择哪个位置。请使用point的

plotX

属性（正如我在回答中所做的）：

<div id="adjacentToBar" style="position: absolute; background: red; width: 100px; height: 20px;">
Hello
</div>

var div = document.getElementById('adjacentToBar'),
  point = chart.series[0].points[1];

div.style.top = chart.plotSizeX - point.plotX + chart.plotTop + 'px';
div.style.left = chart.chartWidth + chart.plotLeft + 'px';