如何调整Highcharts轴标签

Question

有没有办法调整Highcharts中轴标签的行高？有时使用断行标签时，如果可以降低行高，可能会出现重叠/间距问题。

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

示例选项：

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'],
 ...

Codepen：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属性。在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
    })
  }
})

Axis config：

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

实例和输出：

https://jsfiddle.net/4dztcw5d/

正如我在评论中提到的，你也可以将labels.useHTML设置为true，构建一个合适的html并应用它的html-css样式，包括行高。

Answer 2

出于某种原因，您使用的高图库并未考虑某些css。 我尝试使用这个http://code.highcharts.com/highcharts.js，似乎工作我添加了x轴标签样式

 fontSize:'15px',
 lineHeight: "12"

并且必须使用！important

设置颜色

text:nth-child(odd){ fill: blue!important; }
text:nth-child(even){ fill: red!important; }

它似乎有效，这里是codepen http://codepen.io/anon/pen/ryWoxo