Highcharts: невозможно загрузить все значения в Xaxis

Question

Я использую высокие графики и сталкиваюсь с проблемой.

В моих данных у меня разные рейтинги для разных кварталов, и я пытаюсь показать все "оценки" на xaxis для всех "кварталов".

введите код здесь

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>


 var response = {  
   "KBByRating":[  
      {  
         "FiscalQtr":"FY2018 Q4",
         "FiscalQtrData":[  
            {  
               "Rating":"2.5",
               "Count":1
            },
            {  
               "Rating":"4.0",
               "Count":1
            },
            {  
               "Rating":"5.0",
               "Count":1
            }
         ]
      },
      {  
         "FiscalQtr":"FY2018 Q3",
         "FiscalQtrData":[  
            {  
               "Rating":"2.33",
               "Count":1
            },
            {  
               "Rating":"1.0",
               "Count":3
            },
            {  
               "Rating":"5.0",
               "Count":17
            }
         ]
      },
      {  
         "FiscalQtr":"FY2018 Q2",
         "FiscalQtrData":[  
            {  
               "Rating":"3.67",
               "Count":1
            },
            {  
               "Rating":"5.0",
               "Count":8
            }
         ]
      }
   ]
};
var ratings=[],ratingsCount=[],periodRatingData=[];
_.each(response.KBByRating, function(val){
                            ratings=[];
                            ratingsCount=[];
                            _.each(val.FiscalQtrData, function(main){
                                ratings.push(main.Rating),
                                ratingsCount.push(main.Count);
                            });
                            periodRatingData.push({
                                name: val.FiscalQtr,
                                data:ratingsCount
                            });
});
Highcharts.chart('container',
{
chart:{
 type: 'column'
},

    title: {
    text: 'Knowledge Articles Published By Rating'
  },
  subtitle: {
    text: ''
  },
  colors: ['#005073','#64e572','#24cbe5'],
  xAxis: {
    categories:ratings,
    labels: {
      formatter: function(){
        var str = this.value;

        if(str < 0){ 
          str = '';  
        }

        return str;
      }
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Count',
      align: 'middle'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    formatter: function() {
      return '' +'Count'+ ': ' + this.y;
    }
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true
      }
    },
    series: {
      pointWidth: 40,
      groupPadding: '.05',
      shadow: false
    }
  },
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom',
    floating: false,
    labelFormatter: function() {
      return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name + '</span>';
    }
  },
  credits: {
    enabled: true
  },
  exporting: {
    enabled: true
  },
  series: periodRatingData
});

, но я получаю только несколько оценок, которые не верны.Не могли бы вы помочь исправить это.

Здесь я создал живой пример на jsfiddle: https://jsfiddle.net/ugyef9ju/