Question

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

作为一个演示不仅仅是一个很长的解释，还有一个jsfiddle：http://jsfiddle.net/69gep9rt/

To reproduce the switch, simply click on "Banana (Male)" in the legend.

我不知道导致这种行为的原因是什么，因为Y轴是固定的，我需要保持左边的男性和右边的女性。

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

Answer 1

我认为代码的问题与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)"
  }
]

这里是解决方案一的jsFiddle：http://jsfiddle.net/69gep9rt/2/

侨的Davide

Highchart的堆叠条切换位置

1 个答案: