Highcharts 交换类别和标签海图（条形图）

我一直在寻找这个问题的解决方案，在没有任何运气（以及多次尝试和错误）的情况下，我找到了一个解决方案。我的问题是，这是否是最好的解决方案，但实际上，我只想让它打开，这样其他人就可以很快找到解决方案

在Highcharts中的分组条形图中，数据按两个对象分组：类别和系列/标签。 但有时，交换您分组的内容是可取的——类别或标签

下面是一些解决方案：

HTML:

---

我希望有人觉得它有用：）

更改一个单词，以获得更好的性能

（图表不会每次迭代都重新绘制）

---

谢谢你，很好的解决方案。也许你应该以问答的方式发布这篇文章：）什么是问答P

<div id="container" style="width:100%; height:100%;"></div>
<div id="toggle" style="background:red; width:80px; height:40px;" onclick="toggleGrouping()">
    Click Me
</div>

$(function () {  
    $('#container').highcharts({
        credits: {
            text: 'metaflagstat.py - Charts made by Highcharts.js',
            href: 'http://ac.gt/metaflagstat'
        },
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Read Count Statistics'
        },
        xAxis: {
            categories: ['A', 'B', 'C', 'D', 'E', 'F']
        },
        yAxis: {
            title: {
                text: 'Stuff'
            }
        },
        plotOptions: {
            column: {
                grouping: true,
            }
        },
        series: [{
            name: "Series 1",
            data: [97930988, 246487056, 103547366, 160785442, 175190470, 186172354]
        }]
    });
});

    // Interesting Bit:

toggleGrouping = function() {
        newLabels = [];
        newCategories = [];
        newData = [];
        var chart = $('#container').highcharts();
        seriez = chart.series;
        $.each(chart.xAxis[0].categories, function (i, name) {
            newLabels.push(name);
        });
        $.each(seriez, function (x, serie) {
            newCategories.push(serie.name);
            $.each(serie.data, function (z, point) {
                if (newData[z] == undefined) {
                    newData[z] = [];
                }
                if (newData[z][x] == undefined) {
                    newData[z][x] = '';
                }
                newData[z][x] = point.y;
            });
        });
        while (chart.series.length > 0) {
            chart.series[0].remove(true);
        }
        chart.xAxis[0].setCategories(newCategories, false);
        $.each(newData, function (key, newSeries) {
            chart.addSeries({
                name: newLabels[key],
                data: newSeries
            }, false);
        });
        chart.redraw();
}

toggleGrouping = function() {
        newLabels = [];
        newCategories = [];
        newData = [];
        var chart = $('#container').highcharts();
        seriez = chart.series;
        $.each(chart.xAxis[0].categories, function (i, name) {
            newLabels.push(name);
        });
        $.each(seriez, function (x, serie) {
            newCategories.push(serie.name);
            $.each(serie.data, function (z, point) {
                if (newData[z] == undefined) {
                    newData[z] = [];
                }
                if (newData[z][x] == undefined) {
                    newData[z][x] = '';
                }
                newData[z][x] = point.y;
            });
        });
        while (chart.series.length > 0) {
            //chart.series[0].remove(true);
            chart.series[0].remove(false);
        }
        chart.xAxis[0].setCategories(newCategories, false);
        $.each(newData, function (key, newSeries) {
            chart.addSeries({
                name: newLabels[key],
                data: newSeries
            }, false);
        });
        chart.redraw();
}