Highcharts：向 yAxis 添加一个自定义标签

Posted 2023-03-14

【中文标题】Highcharts：向 yAxis 添加一个自定义标签

【英文标题】：Highcharts: Add ONE custom label to yAxis

【发布时间】：2017-07-18 15:14:34

【问题描述】：

我正在使用 highcharts，我知道 yAxis 标签是自动生成的。

问题是我有这个 3D 图表，其中除了数据之外，还有一个固定的“目标”线，我们可以在上面比较哪个数据集在它之上或之下。

由于 3D 图形不能很好地渲染线条，所以我使用了 plotLine，它的效果非常好。当我试图显示这个“目标”是多少时，问题就来了，因为即使它在正确的位置，显示这个目标数量也会很好。

我想要做的是在图表的左侧显示这条线的值，以便任何看到它的人都能够知道该特定数据集的目标是多少。

这是图表的截图，并圈出了我要添加自定义标签的地方： Graph screenshot

红色圆圈内是我要添加此自定义字符串的位置（应该是百分比数字）。

感谢你们提供的任何帮助。谢谢！

【问题讨论】：

我认为您应该能够使用 renderer.text 为您的图表添加自定义标签：jsfiddle.net/0hyaevax

@GrzegorzBlachliński 感谢您的回复。这很好用，我没有考虑过使用渲染器文本，只是想着 yAxis 标签。它适用于默认视图，但由于我的图形视角是可移动的，问题是它停留在同一个地方。 link

那么你想实现与这个例子类似的东西吗？ jsfiddle.net/0hyaevax/2

@GrzegorzBlachliński 这正是我想要做的，结果很完美。非常感谢！如果您希望将其发布为答案，我可以选择它来关闭问题。

【参考方案1】：

您应该能够使用 renderer.text 在图表中添加自定义文本。 http://api.highcharts.com/highcharts/Renderer.text

  load: function() 
    var chart = this,
      yAxis = chart.yAxis[0],
      plotLine = yAxis.plotLinesAndBands[0],
      pLPath = plotLine.svgElem.d;
    chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr(
      fill: 'red'
    ).add();
  ,

在上面的代码中，我使用的是 plotLine 的路径。

您的图表如何工作的实时示例：

http://jsfiddle.net/0hyaevax/2/