如何在高层图中定位自定义标签

问题描述

我正试图做这个官方HighCharts小提琴：

翻译通过以下方式进行定位：

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

我试图用这个来描述这些坐标提供的内容。
$ b $ pre $ }，function（chart）{// on完成
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是位于图表系列点左侧的一个随机像素点，它提供它似乎取决于你使用的字体。

：

  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）; b 
 
 
 $ b 
 >小提琴  - 注意 .toPixels 每个轴的作品，因此您需要分别确定点X和点Y的像素表示。该函数的 true 参数基于其标注位置标注，而不是标注的左上角。
 
I am trying to do exactly what is in this official HighCharts fiddle: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/renderer-label-on-chart/ 

However the example's "label" function has hardcoded the x(270) and y(50) parameters:
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)
My chart obviously will require different parameters. I tried using point's plotX etc. However these are undocumented. in fact the are are not part of API as a (presumably) HighCharts developer points out in another answer - they are just inner properties to get coordinates where plot point. in other word, undocumented.
Using them is shorthand for getting values from point:
http://api.highcharts.com/highcharts#Point.xhttp://api.highcharts.com/highcharts#Point.yAnd translating to position via:
http://api.highcharts.com/highcharts#Axis.toPixels()
The links above seem completely unrelated.
I tried this to divine what those coordinates provide
}, 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();

});
seems plotX is some point situated a random set of pixels to the left of the chart series point that provides it (about 60ish) and seems to depend on the font you use.
 解决方案 
This seems to be what you're looking for:
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 - Notice .toPixels works per Axis, so you need to determine the pixel representation of point X and point Y separately. The true parameter to the function positions the callout based on its point, rather than the top left corner of the callout.
                        
这篇关于如何在高层图中定位自定义标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！