Das folgende Skript erstellt ein einfaches Marimekko-Diagramm, in dem die x-Werte kumuliert werden. Dies ist eine aufregende Möglichkeit, Daten zu zeichnen.http: //jsfiddle.net/Guill84/1o926coh

Wenn Sie die Bereiche in der Legende umschalten, werden die betroffenen Bereiche durch das Skript einfach ausgeblendet, was bedeutet, dass das Diagramm Lücken aufweist. Wie kann ich dieses Skript so ändern, dass das Array "allSeries" jedes Mal neu berechnet wird, wenn eine Schaltfläche in der Legende umgeschaltet wird?

Um zu wiederholen und hoffentlich zu verdeutlichen, wonach ich suche: Die Idee ist, dass, wenn ich den grünen Bereich entferne, die schwarze und orangefarbene Reihe nebeneinander liegen sollten.

$(function () {
    var rawData = [
        { name: 'A', x: 5, y: 5.6 },
        { name: 'B', x: 3, y: 10.1 },
        { name: 'C', x: 11, y: 1.2 },
        { name: 'D', x: 2, y: 17.8 },
        { name: 'E', x: 8, y: 8.4 }
    ];

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: {

        area: {
            lineWidth: 0,
            marker: {
                enabled: false,
                states: {
                    hover: { enabled: false }
                }
            }
        }
    },

    series: makeSeries(rawData)
});

});

Lass mich wissen was du denkst

Originalskript:Wie kann ich die Breite der Balken in einem Highchart ändern?