Highcharts堆叠条形图X轴分类显示异常问题排查

我看你现在的问题核心是series的结构不对，导致X轴分类没有正确映射，只显示了第一个区域。咱们来一步步修正：

问题根源 #

你把每个区域的红色、绿色数据都拆成了独立的series，每个series的data只有单个值，这会让Highcharts把每个series都当作一个新的X轴分类，而不是对应到你定义的categories数组里。自然就只显示第一个分类了。

修正方案 #

正确的做法是：把同颜色的所有区域数据合并成一个series，data数组的顺序和xAxis.categories的顺序完全对应，这样每个数据点会自动映射到对应的区域分类上，再配合stacking: 'normal'就能实现堆叠效果。另外要注意把绿色系列放在红色系列前面，这样堆叠时绿色会显示在左侧（符合你要的绿色在前、红色在后的需求）。

修正后的完整代码 #

Highcharts.chart('graphContainer', {
    chart: { type: 'bar' },
    title: { text: 'Area Dashboard' },
    legend: { enabled: false },
    xAxis: {
        type: "category",
        categories: ["Capital Metro (K)", "Eastern (C)", "Great Lakes (J)", "Northeast (B)", "Pacific (F)", "Southern (S)", "Western (E)"],
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [
        // 绿色系列：按categories顺序依次对应每个区域的绿色数据
        {
            name: "Green Data",
            data: [4, 0, 1, 0, 6, 0, 0],
            stack: "areaStack",
            color: "Green"
        },
        // 红色系列：按categories顺序依次对应每个区域的红色数据
        {
            name: "Red Data",
            data: [11, 1, 0, 1, 13, 1, 1],
            stack: "areaStack",
            color: "Red"
        }
    ]
});

额外说明 #

• stack属性只要两个series设置相同的值（比如这里的areaStack），Highcharts就会把它们在同一个X轴分类上堆叠。
• 如果你需要保留每个系列的名称对应区域，其实完全没必要，因为X轴已经显示了区域名称，legend关闭的情况下，名称不影响显示。如果后续要打开legend，也可以把名称改成“绿色数据”“红色数据”这样更清晰的标识。

内容的提问来源于stack exchange，提问作者RichP