如何在高图表中放置自定义标签

我正在尝试执行官方 HighCharts 小提琴中的操作：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/renderer-label-on-chart/ http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/renderer-label-on-chart/

然而，该示例的“label”函数已对 x(270) 和 y(50) 参数进行硬编码：

function (chart) { // on complete
var point = chart.series[0].points[8];
chart.renderer.label('Max observation', 270, 50, 'callout',
point.plotX + chart.plotLeft, point.plotY + chart.plotTop)

我的图表显然需要不同的参数。我尝试使用 point 的plotX 等。但是这些都没有记录。事实上，正如（大概）HighCharts 开发人员在另一个答案中指出的那样，它们并不是 API 的一部分 - 它们只是获取绘图点坐标的内部属性。换句话说，无证。

使用它们是从点获取值的简写：

http://api.highcharts.com/highcharts#Point.x http://api.highcharts.com/highcharts#Point.x http://api.highcharts.com/highcharts#Point.y http://api.highcharts.com/highcharts#Point.y并通过以下方式转换为位置：

http://api.highcharts.com/highcharts#Axis.toPixels() http://api.highcharts.com/highcharts#Axis.toPixels()

上面的链接看起来完全不相关。

我尝试用这个来推测这些坐标提供了什么

}, function (chart) { // on complete
var point = chart.series[0].points[8];
chart.renderer.label('.'
, point.plotX.toFixed(0), point.plotY.toFixed(0), 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)

        .add();

}); 

似乎plotX是位于提供它的图表系列点左侧的一组随机像素的某个点（大约60左右），并且似乎取决于您使用的字体。

这似乎就是您正在寻找的：

var point = chart.series[0].points[8];
var pxX = chart.xAxis[0].toPixels(point.x, true);
var pxY = chart.yAxis[0].toPixels(point.y, true);

chart.renderer.label('Max observation', pxX, pxY, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop);

Fiddle http://jsfiddle.net/nrzqxvok/- 注意.toPixels works per Axis，所以需要分别确定X点和Y点的像素表示。这true函数的参数根据其点定位标注，而不是标注的左上角。