Highcharts 海图'；s叠条交换位置

我必须创建一个带有堆叠条形图的图表，我遇到了一个问题：当我禁用某个特定系列（通过在图例中单击它）时，右侧的堆栈与左侧的堆栈会发生位置变化

演示不仅仅意味着一个冗长的解释，还有一个JSFIDLE：

我不知道是什么导致了这种行为，因为Y轴是固定的，我需要让雄性在左边，雌性在右边

---

解决方案和/或解释可能非常有用。

我认为代码的问题与x轴的索引有关。 你应该在相同的x指数下对雄性和雌性进行分组。例如，指数为0的所有男性和指数为1的所有女性。 另一个解决方案是先对所有雄性使用增长指数，然后对所有雌性使用增长指数

  series: [
  {
     name: "Banana (Male)",
     data: [29,13,16,54,21,2],
     stack: "Male",
     id: "Banana",
     code: "BAN",
     yAxis: 0,
     index: 0,  // all Male have index = 0
     legendIndex: 2,
     color: "rgba(0,169,224,1)"
  },
  {
     name: "Banana (Female)",
     data: [1305,680,720,2520,945,90],
     stack: "Female",
     id: "Banana",
     code: "BAN",
     yAxis: 1,
     index: 1,  // all Female have index = 1
     legendIndex: 2,
     color: "rgba(0,169,224,0.8)"
  },
  {
     name: "Apple (Male)",
     data: [266,235,150,215,213,17],
     stack: "Male",
     id: "Apple",
     code: "APL",
     yAxis: 0,
     index: 0,
     legendIndex: 1,
     color: "rgba(206,0,88,1)"
  },
  {
     name: "Apple (Female)",
     data: [14045,11690,7280,10667.64,10345,765],
     stack: "Female",
     id: "Apple",
     code: "APL",
     yAxis: 1,
     index: 1,
     legendIndex: 1,
     color: "rgba(206,0,88,0.8)"
  },
  {
     name: "Tomato (Male)",
     data: [11293,10300,7975,10703,10934,868],
     stack: "Male",
     id: "Tomato",
     code: "TOM",
     yAxis: 0,
     index: 0,
     legendIndex: 0,
     color: "rgba(130,70,175,1)"
  },
  {
     name: "Tomato (Female)",
     data: [221800,200210,156990,209080,211945,15675],
     stack: "Female",
     id: "Tomato",
     code: "TOM",
     yAxis: 1,
     index: 1,
     legendIndex: 0,
     color: "rgba(130,70,175,0.8)"
  }
]

这里是解决方案一的JSFIDLE：

再见 戴维德

  series: [
  {
     name: "Banana (Male)",
     data: [29,13,16,54,21,2],
     stack: "Male",
     id: "Banana",
     code: "BAN",
     yAxis: 0,
     index: 0,  // all Male have index = 0
     legendIndex: 2,
     color: "rgba(0,169,224,1)"
  },
  {
     name: "Banana (Female)",
     data: [1305,680,720,2520,945,90],
     stack: "Female",
     id: "Banana",
     code: "BAN",
     yAxis: 1,
     index: 1,  // all Female have index = 1
     legendIndex: 2,
     color: "rgba(0,169,224,0.8)"
  },
  {
     name: "Apple (Male)",
     data: [266,235,150,215,213,17],
     stack: "Male",
     id: "Apple",
     code: "APL",
     yAxis: 0,
     index: 0,
     legendIndex: 1,
     color: "rgba(206,0,88,1)"
  },
  {
     name: "Apple (Female)",
     data: [14045,11690,7280,10667.64,10345,765],
     stack: "Female",
     id: "Apple",
     code: "APL",
     yAxis: 1,
     index: 1,
     legendIndex: 1,
     color: "rgba(206,0,88,0.8)"
  },
  {
     name: "Tomato (Male)",
     data: [11293,10300,7975,10703,10934,868],
     stack: "Male",
     id: "Tomato",
     code: "TOM",
     yAxis: 0,
     index: 0,
     legendIndex: 0,
     color: "rgba(130,70,175,1)"
  },
  {
     name: "Tomato (Female)",
     data: [221800,200210,156990,209080,211945,15675],
     stack: "Female",
     id: "Tomato",
     code: "TOM",
     yAxis: 1,
     index: 1,
     legendIndex: 0,
     color: "rgba(130,70,175,0.8)"
  }
]