javascript - Highcharts xAxis类别无法正确显示

我的数据中有7个“区域”，我正在尝试为其制作Highcharts堆积条形图。我的类别仅在轴中心的第一个中不能正确显示。知道为什么吗？期望的结果将是沿着左侧向下流动的7个区域，并且它们的两组数据中的每组数据彼此相邻，先是绿色，然后是红色。

在这里小提琴Fiddle Example

Highcharts.chart('graphContainer', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Area Dashboard'
  },
  legend: {
    enabled: false
  },
  xAxis: {
    type: "category",
    uniqueNames: true,
    categories: ["Capital Metro (K)", "Eastern (C)", "Great Lakes (J)", "Northeast (B)", "Pacific (F)", "Southern (S)", "Western (E)"],
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    "name": "Capital Metro (K)",
    "data": [11],
    "stack": "Capital Metro (K)",
    "color": "Red"
  }, {
    "name": "Capital Metro (K)",
    "data": [4],
    "stack": "Capital Metro (K)",
    "color": "Green"
  }, {
    "name": "Eastern (C)",
    "data": [1],
    "stack": "Eastern (C)",
    "color": "Red"
  }, {
    "name": "Eastern (C)",
    "data": [0],
    "stack": "Eastern (C)",
    "color": "Green"
  }, {
    "name": "Great Lakes (J)",
    "data": [0],
    "stack": "Great Lakes (J)",
    "color": "Red"
  }, {
    "name": "Great Lakes (J)",
    "data": [1],
    "stack": "Great Lakes (J)",
    "color": "Green"
  }, {
    "name": "Northeast (B)",
    "data": [1],
    "stack": "Northeast (B)",
    "color": "Red"
  }, {
    "name": "Northeast (B)",
    "data": [0],
    "stack": "Northeast (B)",
    "color": "Green"
  }, {
    "name": "Pacific (F)",
    "data": [13],
    "stack": "Pacific (F)",
    "color": "Red"
  }, {
    "name": "Pacific (F)",
    "data": [6],
    "stack": "Pacific (F)",
    "color": "Green"
  }, {
    "name": "Southern (S)",
    "data": [1],
    "stack": "Southern (S)",
    "color": "Red"
  }, {
    "name": "Southern (S)",
    "data": [0],
    "stack": "Southern (S)",
    "color": "Green"
  }, {
    "name": "Western (E)",
    "data": [1],
    "stack": "Western (E)",
    "color": "Red"
  }, {
    "name": "Western (E)",
    "data": [0],
    "stack": "Western (E)",
    "color": "Green"
  }]
});

最佳答案

使用您当前的选项，每个系列只有一个点，连接到第一类。

而是使用数据中的所有点创建两个系列（一个绿色，一个红色）：https://jsfiddle.net/BlackLabel/7sorc0ju/11/

片段：

series: [{
  "name": "Capital Metro (K)",
  "data": [11, 1, 0, 1, 13, 1, 1],
  "stack": "Capital Metro (K)",
  "color": "Red"
}, {
  "name": "Capital Metro (K)",
  "data": [4, 0, 1, 0, 6, 0, 0],
  "stack": "Capital Metro (K)",
  "color": "Green"
}]