javascript - Highcharts xAxis 类别未正确显示

Question

我的数据中有 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"
  }]
});

Answer 1

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

相反，使用数据中的所有点创建两个系列(一个绿色，一个红色):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"
}]