как отобразить текст на этикетке в одну строку - PullRequest
0 голосов
/ 09 мая 2018

Я хочу отображать текст метки в одну строку на горизонтальной полосе в старших графиках. ниже приведен код. Я хочу отображать текст метки в одну строку на горизонтальной полосе в верхних диаграммах. ниже код

<!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>

Есть лучший пример того, чего я хочу достичь

Я хочу отображать текст метки в одну строку на горизонтальной полосе в старших графиках. ниже приведен код. Я хочу отображать текст метки в одну строку на горизонтальной полосе в верхних диаграммах. ниже код

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

Вам нужно установить width для ваших ярлыков

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

Fiddle

Как видите, 4-й столбик слишком короткий, поэтому вам нужно установить ширину для появления второй строки

0 голосов
/ 09 мая 2018

Попробуйте использовать свойство ниже в метке

label{
display:block
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...