Question

我目前正在开发一个用于在图表模式下显示流量使用情况的网络项目，我正在使用Highchart Bar进行此项目。问题是，当我运行这段代码时，它根本不会给出错误

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

但是当我将数据类别分别增加到A，B，C，D，E，F和G时，每个类别的值分别为：2,1,1,17,1,43,6,5，脚本根本不显示任何图形。有任何想法吗？

Answer 1

我认为没有错。

 $(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'
                }
            }
        }]
    });
});

测试fiddle

让我知道你的意见。

Answer 2

请从小数据开始......

首先尝试显示A,B,C .. 然后A,B,C,D .。如果成功，则再添加一个E ..

执行small steps然后检查图表未显示的位置。

这样可以解决你的问题。

大范围数据的Highchart Bar不显示

2 个答案: