Question

我的图表看起来像这样： http://jsfiddle.net/rtGFm/37/

我想要一个“排序”按钮，从每个类别的高到低排序，为每个类别按不同的顺序排列。这可能与HighCharts有关吗？

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                'foreclosures',
                'nuisances',
                'distance from city center'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            formatter: function() {
                return ''+
                    this.x +': '+ this.y +' mm';
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Alger Heights',
            data: [49.9, 71.5, 50]
        }, {
            name: 'Shawmut Hills',
            data: [83.6, 78.8, 67]
        }, {
            name: 'Baxter',
            data: [48.9, 38.8, 100]
        }, {
            name: 'Midtown',
            data: [42.4, 33.2, 80]
        }, {
            type: 'scatter',
            data: [55,60,70],
            marker: {
                symbol: 'square',
                lineColor: '#FFFFFF',
                lineWidth: 1,
                radius: 8
            },
            name: 'Average'
        }]
    });
});

Answer 1

我有同样的问题:) highcharts仍然没有为这个问题提供任何解决方案，但它足够灵活，所以你可以排序 - 只需通过javascript。

将您的数据放在一个单独的值中：

var dataMain = [{name:"test1",data:5}, {name:"test1",data:1},{name:"test1",data:2}]

在系列中，您只需添加一个对数据进行排序的功能：

series: (function(){ for(var i = 0;i<dataMain.length;i++){ dataMain[i].data = dataMain[i].data.sort(function(a,b){ return a[0] - b[0] ; }) return dataMain; }

希望我能得到一切怀疑。

Answer 2

我相信它能够发挥作用。诀窍是以正确的顺序添加每一列作为具有相同类型（列）的新系列，重用颜色并隐藏图例......

非常hackish，JS代码独立地分类为8个类别将是丑陋但结果看起来很好。

编辑：更新了小提琴，我看到类别之间的间距随着系列增长，看起来并不是超级。

我的jsfiddle是here

$(function () {
    $('#container').highcharts({
            chart: {
            inverted: true
        },
        title: {
            text: 'Series sorted in within categories'
        },
        xAxis: {
            categories: ['January']
        },
        series: [{
            type: 'column',
            name: 'Stockholm',
            data: [{x:0, y:95, color: Highcharts.getOptions().colors[0]}]
        }, {
            type: 'column',
            name: 'Göteborg',
            data: [{x:0, y:80, color: Highcharts.getOptions().colors[1]}]
        }, {
            type: 'column',
            name: 'Göteborg',
            data: [{x: 1, name: 'February', y: 98, color: Highcharts.getOptions().colors[1] // VGR's color
            }],
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }, {
            type: 'column',
            name: 'Stockholm',
            data: [{x: 1, name: 'February', y: 80, color: Highcharts.getOptions().colors[0] // VGR's color
            }],
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});

BR，延

Answer 3

我认为这可以做到，

这可能看起来像是一个小问题。

因为在给定的例子中我们的列数有限，我的意思是4。

如果我们有关于每个系列完成排序的数组，那么我们就可以处理它们了。

单击按钮时，我们可以使用新的数据集和类别数组更新图表。

可能是APi没有解决方案。据我说，这是一种可能的方法。

谢谢，

按类别排序系列

3 个答案: