如何调整 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 属性。在 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 设置为 true，构建一个适当的 html 并对其应用 html-css 样式，包括行高。

Answer 2

由于某种原因，您使用的 highcharts 库没有考虑某些 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; }

它似乎工作，这是代码笔http://codepen.io/anon/pen/ryWoxo