大范围数据上的Highchart Bar不显示

Question

I'm currently working on a web project for showing traffic usage in chart mode, and I'm using Highchart Bar for this project. The problem is, when I run this code it doesn't give error at all

 <script type="text/javascript">
    $(function () {
    $('#chart1').highcharts({
        chart: {
            type: 'column',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: 'Sum of User'
        },
        xAxis: {
            categories: [
                'A','B','C','D',                ],
            labels: {
                rotation: -20,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    'User Values: '+ Highcharts.numberFormat(this.y, 1);
            }
        },
        series: [{
            name: 'sum',
            data: [
            3,5,1,1,                ],
            dataLabels: {
                enabled: true,
                rotation: 0,
                color: '#FFFFFF',
                align: 'center',
                x: 0,
                y: 17,
                style: {
                    fontSize: '14px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});
</script>

But when I'm increasing the data categories into A, B, C, D, E, F, and G with each categories values respectively: 2,1,1,17,1,43,6,5, the script doesn't show any graph at all. Any ideas?

Answer 1

I dont think anything is wrong.

 $(function () {
    $('#chart1').highcharts({
        chart: {
            type: 'column',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: 'Sum of User'
        },
        xAxis: {
            categories: [
                'A','B','C','D','E','F','G'                ],
            labels: {
                rotation: -20,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    'User Values: '+ Highcharts.numberFormat(this.y, 1);
            }
        },
        series: [{
            name: 'sum',
            data: [
            2,1,1,17,1,43,6,               ],
            dataLabels: {
                enabled: true,
                rotation: 0,
                color: '#FFFFFF',
                align: 'center',
                x: 0,
                y: 17,
                style: {
                    fontSize: '14px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});

test the fiddle

let me know your comments.

Answer 2

Please start with small data...

Like first try to display A,B,C .. then A,B,C,D . .if success then add one more E ..

Do small steps then check at which point that graph does not show..

On this way may solve you problem.