如何在highchart的标签中使用line-height属性

Question

尝试在highchart标签选项中的行之间留出空格。

但是对于像line-height这样的css属性无法做任何事情，如果你们知道任何相当于pls的内容请告诉我......

labels:{
  items:[{
        html:"This is first lineof the  label<br>this second line of the 
              label<br>this is third line of the label",
        style:{
                 top:5,
                 left:30
              }
          },{
        html:"This is first lineof the  second label<br>this second line of 
           the second label<br>this is third line of the label",
        style:{
            top:5,
            left:250
         }
     }]

},   

这是我的fiddle

Answer 1

您可以在line-height中设置style，如下所示：

Highcharts.chart('container', {
  labels: {
    items: [{
      html: "This is first lineof the  label<br>this second line of the label<br>this is third line of the label",
      style: {
        top: 5,
        left: 30,
        lineHeight: '30px' // set style here
      }
    }, {
      html: "This is first lineof the  second label<br>this second line of the second label<br>this is third line of the label",
      style: {
        top: 5,
        left: 250,
        lineHeight: '30px' // set style here
      }
    }]
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

#container text tspan {
  line-height: 12px;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>