Highcharts技术求助：X轴无法加载全部Rating值

我来帮你搞定这个问题！你遇到的X轴只显示部分Rating的核心原因是：当前代码里每次遍历季度数据时都会重置ratings数组，最后xAxis.categories只保留了最后一个季度的Rating值。我们需要先收集所有唯一的Rating，再为每个季度生成对应完整Rating列表的Count数据。

关键修改步骤： #

• 首先遍历所有季度数据，收集所有不重复的Rating，并按数值排序（让X轴更直观）
• 对每个季度，根据完整的Rating列表生成对应的Count数组，没有对应Rating的项填充0

修改后的完整代码： #

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<script>
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}
            ]
        }
    ]
};

// 第一步：收集所有唯一的Rating，并按数值排序
var allRatings = new Set();
_.each(response.KBByRating, function(val){
    _.each(val.FiscalQtrData, function(main){
        allRatings.add(main.Rating);
    });
});
// 转换为数组并按数值排序
var sortedRatings = Array.from(allRatings).sort(function(a, b){
    return parseFloat(a) - parseFloat(b);
});

// 第二步：为每个季度生成对应完整Rating列表的Count数据
var periodRatingData = [];
_.each(response.KBByRating, function(val){
    // 创建当前季度的Rating-Count映射
    var ratingCountMap = {};
    _.each(val.FiscalQtrData, function(main){
        ratingCountMap[main.Rating] = main.Count;
    });
    // 根据完整Rating列表生成data数组，没有的填0
    var quarterData = sortedRatings.map(function(rating){
        return ratingCountMap[rating] || 0;
    });
    periodRatingData.push({
        name: val.FiscalQtr,
        data: quarterData
    });
});

Highcharts.chart('container', {
    chart:{ type: 'column' },
    title: { text: 'Knowledge Articles Published By Rating' },
    subtitle: { text: '' },
    colors: ['#005073','#64e572','#24cbe5'],
    xAxis: {
        categories: sortedRatings,
        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
});
</script>

改动说明： #

1. 使用Set收集所有不重复的Rating，避免重复值
2. 将收集到的Rating转换为数组并按数值排序，让X轴的Rating从低到高排列，更符合阅读习惯
3. 为每个季度创建Rating和Count的映射表，然后根据完整的Rating列表生成对应的Count数组，没有对应Rating的项填充0，这样每个季度的data数组长度和X轴categories长度一致，所有Rating都会显示在X轴上

这样修改后，X轴就会展示所有出现过的Rating值，每个季度对应Rating的Count也会正确显示（没有数据的Rating会显示0）。

内容的提问来源于stack exchange，提问作者S. Roorkey