Точки переключения штабелей Highchart

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/

Ciao Давиде