javascript - 如何调整 Highcharts 轴标签中的行高/椭圆

Question

有没有办法调整 Highcharts 中轴标签的行高？有时，对于断行标签，可能会出现重叠/间距问题，如果可以降低行高，这些问题会得到缓解。

正如您在下图中较长的红色标签中所见，自定义行高会很有帮助。有没有办法做到这一点？在 CSS 或 xAxis.labels.style 中设置 line-height 没有任何效果。

示例选项:

xAxis: {
    labels: {
      style: { 
        textOverflow: 'none', // To disable automatic ellipsizing, per https://github.com/highcharts/highcharts/issues/3941
        // lineHeight: '0.5' // Has no effect
      }
    },
    categories: [
      'Sweden', 
      'Federal Democratic Republic of Ethiopia', 
      'Finland',
      'United Kingdom of Great Britain and Northern Ireland', 
      'Oceania'],
 ...

代码笔:http://codepen.io/ericpedia/pen/peNZML

---

Answer 1

您不能通过 css 执行此操作，因为 svg 中不支持 line-height 表示属性。查看答案svg-how-to-set-text-line-height . Highcharts 做什么 - 它通过设置 dy 模拟 svg 上的 html-css line-height 属性属性(property)。在 SVG 中，dy 不是表示属性，因此不能在样式表中设置它。

要保留 lineheight 选项，您可以修改 Highcharts 内部方法，以便应用其 cssish 样式。

var H = Highcharts;
H.wrap(H.Tick.prototype, 'addLabel', function (p) {
  p.call(this);

  const label = this.label;
  const labelOptions = this.axis.options.labels;

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

轴配置:

 labels: {
      style: { 
        textOverflow: 'none',
        lineHeight: 12
      }
    },

实例和输出:

https://jsfiddle.net/4dztcw5d/

正如我在评论中提到的，您还可以设置 labels.useHTML为真，构建一个合适的 html 并对其应用 html-css 样式，包括行高。