长长度字符串未在图表中正确显示-Longlengthstringisnotdisplayingcorrectlyinthechart

In the Javascript code under the function highcharts.chart i have given the json code as xAxis: { categories:["jasrajsinghbediisthebest"]} .The string jasrajsinghbediisthebest is not appearing correctly in the chart due to its large length . I want that the chart should display long strings.I dont want to change the size of the div ,it should remain at 400px.

在函数highcharts.chart下的Javascript代码中,我将json代码作为xAxis:{categories:[“jasrajsinghbediisthebest”]}。字符串jasrajsinghbediisthebest由于其较长的长度而未在图表中正确显示。我想图表应该显示长字符串。我不想改变div的大小,它应该保持在400px。

js code:

$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
    xAxis: {
    //  xAxis data format :["x","y","z"]
        categories:["jasrajsinghbediisthebest"]
    },
    chart: {
        renderTo: 'container',
        type: 'column',
        margin: 75,
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Chart rotation demo'
    },
    subtitle: {
        text: 'Test options by dragging the sliders below'
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
function showValues() {
    $('#R0-value').html(chart.options.chart.options3d.alpha);
    $('#R1-value').html(chart.options.chart.options3d.beta);
}

// Activate the sliders
$('#R0').on('change', function () {
    chart.options.chart.options3d.alpha = this.value;
    showValues();
    chart.redraw(false);
});
$('#R1').on('change', function () {
    chart.options.chart.options3d.beta = this.value;
    showValues();
    chart.redraw(false);
});

showValues();
});

html code:

    

        
Alpha Angle
 
        
Beta Angle
 
    

css code:

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

2 个解决方案

labels: { 
align: 'left',  
style: { 
    textOverflow:'none', 
    whiteSpace: 'nowrap' 
  } 
 }

xAxis: {
        //  xAxis data format :["x","y","z"]
        categories: ["jasrajsinghbediisthebest"],
        labels: {
            useHTML:true,
            style: {
            }
        }
    },

.highcharts-xaxis-labels span {
    word-break:break-all!important;
    white-space: normal!important;
}