Question

我想在highcharts中的水平条上显示一行中的文字。下面是代码。我想在highcharts中的水平条上显示一行中的文字。下面是代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="container" style="min-width: 100%; max-width:100%; height: 400px; margin: 0 auto"></div>
    </div>
  </div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
  <script type="text/javascript">
    $(function () {

    var chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        marginLeft:120,
        marginBottom: 100,
        type:'bar'
    },
    credits: {enabled: false},
    legend: { 
        enabled: true,
        layout: 'vertical',
        backgroundColor: '#FFFFFF',
        floating: true,
        align: 'right',
        verticalAlign: 'bottom',
        margin: 50
    },
    title: {text: null},
    tooltip: {},
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'John',
        color: '#006666',
        pointWidth: 40,
        data: [2, 2, 1, 1, 1]
    }, {
        name: 'Jane',
        color: '#00FF00',
        pointWidth: 40,
        data: [2, 2, 2, 1, 2]
    }, {
        name: 'Joe',
        color: '#FF8C00',
        pointWidth: 40,
        data: [1, 1, 1, 1, 1],
    }],
    xAxis: {
        categories: ['Computer Devices & Accessories', 'Computer Peripherals Hire & Repair Services', 'Computer Laptop Hardware & Peripherals', 'Computer Stationery, Hard disk, Ram, Pen Drives & Other Products', 'Internet Accessories'],
        labels: {
            align:'left',
            x:5,
            style: {
                fontSize: '1em',
                color:'#fff'
            }
        }

    },
    yAxis: {
        min: 0,
        allowDecimals: false,
        title: {
          text: ''
        }
    }       
});



    });
  </script>
</body>
</html>

我想要完成的事情有一个更好的例子

我想在highcharts中的水平条上显示一行中的文字。下面是代码。我想在highcharts中的水平条上显示一行中的文字。下面是代码

Answer 1

您需要为标签设置width

...
style: {
            fontSize: '1em',
            color:'#fff',
            width:'500px'
        }

Fiddle

正如您所看到的那样，第4个柱太短，因此您必须设置第二条线的宽度

Answer 2

尝试在标签

中使用以下属性

label{
display:block
}

如何在单行标签上显示文字

2 个答案: