2

我有一个看起来像这样的图表：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'
        }]
    });
});
4

3 回答 3

1

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

非常hackish，独立排序8个类别的JS代码会很难看，但结果看起来不错。

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

我的 jsfiddle 在这里

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

兄弟，延斯

于 2016-09-21T09:13:21.617 回答
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; }

希望我一切都好。

于 2015-12-25T23:45:28.373 回答
0

我觉得这个是可以的

这可能看起来像一个小工作。

由于我们的列数有限，因此在给定示例中我的意思是 4。

如果我们有对每个系列进行排序的数组，那么我们可以处理它们。

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

可能没有来自 APi 的解决方案。在我看来，这是一种可能的方法。

谢谢，

于 2013-10-15T07:41:32.683 回答