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

うまくいったと思います。トリックは、同じタイプ（列）の新しいシリーズとして各列を正しい順序で追加し、色を再利用し、凡例を非表示にすることです...

非常にハックです。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
            }
        }]
    });
});

br、イェンス

于 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 に答える