如何定位在highcharts一个自定义标签

Question

我试图做的正是在这个官方HighCharts小提琴：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/renderer-label-on-chart/

但是在这个例子的“标签”功能的硬编码的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) 

我的图表显然将需要不同的参数。我尝试使用点的plotX等，但这些都没有记录。事实上，这些都不是API的一部分，因为HighCharts的开发人员可能会在另一个答案中指出 - 它们只是内部属性，用于获取绘图点的坐标。换句话说，没有证件。

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

http://api.highcharts.com/highcharts#Point.x http://api.highcharts.com/highcharts#Point.y ，并通过翻译向位置：

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是位于一组随机像素，以图表系列点提供它（约60ish）的左某一点，似乎取决于在你使用的字体上。

Answer 1

这似乎是你在找什么：

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 - 注意.toPixels工作每轴，所以你需要单独确定点X和Y的像素表示。该函数的true参数基于其标注位置标注，而不是标注的左上角。