如何在高层图中定位自定义标签 [英] How to position a custom label in highcharts

问题描述

我正试图做这个官方HighCharts小提琴： http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/renderer-然而，该示例的标签函数对x（270）和y（50）参数进行了硬编码：

 函数（图表）{//完成
 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（）

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

我试图用这个来描述这些坐标提供的内容。
$ 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.x
http://api.highcharts.com/highcharts#Point.y
And 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.

                        
这篇关于如何在高层图中定位自定义标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！