Question

我在SO上寻找解决这个问题的方法，在没有任何运气（以及许多试验和错误）后，我找到了解决方案。我的问题是，如果它是最好的解决方案，但实际上，我只是想要这样做，所以面对这个问题的其他人可以快速得到解决方案。

在Highcharts中的分组条形图中，数据按两个部分分组：类别和系列/标签。但有时需要交换你所分组的内容 - 类别或标签。

这是解决方案的一个小提琴：http://jsfiddle.net/srLtL5qd/8/

HTML：

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

JS：

$(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();
}

我希望有人发现它有用：）

Answer 1

更改一个单词以获得更好的效果。

（图表不会在每次迭代中重绘）

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();
}

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

1 个答案: