javascript - Highcharts marimekko チャートの累積列の再スタック

Question

ハイチャートを使用して基本的な可変幅縦棒グラフ (別名マリメッコ) をセットアップしましたが、シリーズが削除または非表示になった後のデータ ギャップを解消するために縦棒を適切に再スタックするのに苦労しています。

JSFIDDLE DEMO <-- ここで問題のデモをセットアップしました。

凡例項目をクリックすると、チャートからシリーズが削除されますが、配列内の次のデータ ポイントもすべて削除されます (つまり、シリーズCをクリックすると、シリーズC、D、およびEが削除されますが、 ABDEに再描画されるはずです) 。 . y 軸のデータはすべての系列の累積合計を表示するためのものであるため、これらはギャップのない隣接する列として再シャッフルする必要があります。これを正しくレンダリングするにはどうすればよいですか?

THIS POSTでは、同様のデモ コードを使用して同じ問題を解決しようとしていますが、答えはややとらえどころがなく、機能させることができません。

前もって感謝します！

$(function () {
var dataArray = [
    { name: 'A', x: 200, y: 120 },
    { name: 'B', x: 380, y: 101 },
    { name: 'C', x: 450, y: 84 },
    { name: 'D', x: 198, y: 75 },
    { name: 'E', x: 95, y: 55 }
];

function makeSeries(listOfData) {
    var sumX = 0.0;
    for (var i = 0; i < listOfData.length; i++) {
        sumX += listOfData[i].x;
    }
    var allSeries = []
    var x = 0.0;
    for (var i = 0; i < listOfData.length; i++) {
        var data = listOfData[i];
        allSeries[i] = {
            name: data.name,
            data: [
                [x, 0], [x, data.y],
                {
                    x: x + data.x / 2.0,
                    y: data.y,
                    dataLabels: { enabled: false, format: data.x + ' x {y}' }
                },
                [x + data.x, data.y], [x + data.x, 0]
            ],
            w: data.x,
            h: data.y
        };
        x += data.x + 0;
    }
    return allSeries;
}

$('#container').highcharts({

    chart: { type: 'area' },
    xAxis: {
        tickLength: 0,
        labels: { enabled: true}
    },
    yAxis: {
        title: { enabled: false}
    },
    plotOptions: {
         series: {
            events: {
                legendItemClick: function () {
                    var pos = this.index;
                    var sname = this.name;
                    var chart = $('#container').highcharts();
                    while(chart.series.length > 0) {
                        chart.series[pos].remove(true);
                    }
                    dataArray[pos]= { name: sname, x: 0, y: 0 };
                    chart.series[0].setData(dataArray);
                }
            }
        },
        area: {
            lineWidth: 0,
            marker: {
                enabled: false,
                states: {
                    hover: { enabled: false }
                }
            }
        }
    },

    series: makeSeries(dataArray)
});

});