Highcharts类别不添加

时间:2016-03-23 09:25:30

标签: javascript graph charts highcharts

我想要显示数字' 6'类别,但系列数据是稳定的。然而,发生的事情是只有1到5个类别。我该怎么做?请参阅以下代码:

function getchart()
{

$('#container').highcharts({
    chart: {
        type: 'column',
                renderTo: 'container'
    },
title: {
            text: 'Daily Events',
            style: {
                'color': '#06F',
                'font-family': 'Roboto',
                'font-size': '16px',
                'font-weight': 'bold'

            },
            useHTML: true
        },
    xAxis: {

       categories: [
                '1',
                '2',
                '3',
                '4',
                '5',
                '6'
            ]
    },

    yAxis: {
        min: 0,
        title: {
            text: 'No. of Events'
        },

        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
  legend: {
            itemStyle: {

                'color': '#666',
                'font-family': 'Roboto',
                'font-weight': 'normal',
                'font-size': '11px'

            },

            useHTML: true
        },
     tooltip: {
        formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y;
        }
    },
    plotOptions: {
        column: {
        pointWidth: 30,
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                style: {
                    textShadow: '0 0 3px black'
                }

            }
        }
    },

    series: [{
         name: 'Incoming',
        data: [
         {y: 10.4, color: '#FAA961'},  //incoming
          {y: 15.4, color: '#FAA961'}, 
          {y: 20.4, color: '#FAA961'}, 
          {y: 12.4, color: '#FAA961'}, 
          {y: 30.4, color: '#FAA961'}, 
        ],
        color: '#FAA961'
    }, {
        name: 'Ongoing',
        data: [
         {y: 10.4, color: '#438EF7'},  //incoming
          {y: 15.4, color: '#438EF7'}, 
          {y: 20.4, color: '#438EF7'}, 
          {y: 12.4, color: '#438EF7'}, 
          {y: 30.4, color: '#438EF7'}, 
        ],
        color: '#438EF7'
    }, {
        name: 'Finished',
        data: [
         {y: 34.4, color: '#43F752'},  //incoming
          {y: 35.4, color: '#43F752'}, 
          {y: 40.4, color: '#43F752'}, 
          {y: 42.4, color: '#43F752'}, 
          {y: 20.4, color: '#43F752'}, 
        ],
        color: '#43F752'
    }]
});

}

1 个答案:

答案 0 :(得分:3)

您可以使用x轴的'min'和'max'值来指定要在图表上显示的类别数组的最小和最大索引值。

在你的情况下,

min: 0,
max: 5

以下是更新后的image example