图表 |样式模式下绘图带标签的行高控制

Question

我正在寻找一种方法来控制样式模式下绘图带标签的行高。 useHTML 属性在我的情况下不起作用，因为我需要样式在下载的 PNG 中保留。我一直在寻找类似于 .

的解决方案

我试过添加类似的东西，但它完全破坏了我的图表。

function (p) {
  p.call(this);
  const plotLine = this;
  plotLine.label?.css(merge(this.options.label.style));

Here's 一个简单的 fiddle 描述问题，似乎无论字体大小是多少 dy 道具都保持 15。

如果有人能提供帮助，我们将不胜感激。

Answer 1

在这种情况下，您需要wrap Highcharts.PlotLineOrBand.prototype 渲染函数。检查以下代码和演示：

(function(H) {
   H.wrap(H.PlotLineOrBand.prototype, 'render', function(proceed) {
     proceed.apply(this, Array.prototype.slice.call(arguments, ));

     const label = this.label;

     if (label) {
       label.css({
         lineHeight: label.alignOptions.style.lineHeight
       })
     }

   });
 }(Highcharts));

有关扩展 Highcharts 的更多信息： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

演示： https://jsfiddle.net/BlackLabel/nsg5abhq/

图表 |样式模式下绘图带标签的行高控制

Highcharts | Line height control for plot band labels in styled mode

highcharts