如何在Highcharts水平条形图中单行显示标签文本

Hey there! I see you want your horizontal bar chart's x-axis labels to stay on a single line instead of wrapping. Let's tweak your Highcharts configuration to make that happen.

Key Changes Needed: #

• Force labels to avoid wrapping with CSS styling
• Add enough left margin to the chart to accommodate long single-line labels
• Adjust Highcharts label overflow behavior to prevent truncation/wrapping

Modified Code: #

Here's your updated code with the necessary fixes marked by comments:

<!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',
                    // Increased left margin to fit long single-line labels
                    marginLeft: 420, 
                    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',
                            // Prevent text wrapping to new lines
                            whiteSpace: 'nowrap' 
                        },
                        // Allow labels to use the extra margin space instead of wrapping
                        overflow: 'allow'
                    } 
                }, 
                yAxis: { 
                    min: 0, 
                    allowDecimals: false, 
                    title: { text: '' } 
                } 
            }); 
        }); 
    </script> 
</body> 
</html>

Quick Explanation: #

1. marginLeft: 420: This creates extra space on the left side of the chart where your x-axis labels live. You can tweak this number up or down depending on how long your longest label is—just make sure it's wide enough to fit the full text.
2. whiteSpace: 'nowrap': This CSS rule tells the browser to keep the label text on a single line no matter what.
3. overflow: 'allow': By default, Highcharts will wrap or truncate labels that don't fit. Setting this to allow lets the labels extend into the extra margin we added, keeping them intact as single lines.

If the chart ends up too wide for your layout, you can also reduce the fontSize slightly instead of cranking up the margin—whichever fits your design better!

内容的提问来源于stack exchange，提问作者Satyanarayana Swamy