如何定位在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參數基於其標註位置標註，而不是標註的左上角。