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

Question

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

但是，该示例的“标签”函数对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等。但是这些没有记录。 实际上，这不是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是某个点，位于提供该点的图表系列点的左侧，随机包含一组像素（大约60 ish），并且似乎取决于您使用的字体。

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参数根据其点而不是标注的左上角定位标注。