1

I using column stacked and grouped chart for comparing.

Check this example code : @fiddle http://jsfiddle.net/wvT85/

I am trying to compare two male stacks

I want the grouped chart have same colors for the item and no repeated legends.

i.e where ever john is used it should have same color and legand should have only one john not two.

Can any one help me on this code.

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
                type: 'column'
            },

            title: {
                text: 'Total fruit consumtion, grouped by gender'
            },

            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },

            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Number of fruits'
                }
            },

            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },

            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },

            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2],
                stack: 'male'
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5],
                stack: 'male'
            }, {
                name: 'John',
                data: [2, 5, 6, 2, 1],
                stack: 'male2'
            }, {
                name: 'Joe',
                data: [3, 0, 4, 4, 3],
                stack: 'male2'
            }]
        });
    });

});
4

4 に答える 4

2

私は最近同じ問題に遭遇しました。だから私がしたことは、問題を解決するために上記の2つの答えを組み合わせることです.

http://jsfiddle.net/sanshila/2g79dhds/1/

series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male',
            color: '#6666FF',
            events: {
                legendItemClick: function (event) {
                    this.visible ? this.chart.get('johnId').hide() : this.chart.get('johnId').show();
                }
            }
        }, {
            name: 'John',
            id: 'johnId',
            color: '#6666FF',
            showInLegend: false,
            data: [2, 5, 6, 2, 1],
            stack: 'male2'
        }]
于 2014-11-06T09:01:08.737 に答える
0

シリーズの色を手動で定義し、凡例の2番目のセットを非表示にして、必要な操作を行うことができますが、これは実際にはデータをリンクしません。たとえば、凡例をクリックしても、両方のジョンが非表示になることはありません。異なるシリーズで2つのポイントを関連付けるこのタイプは、私が知る限りサポートされていません。私はあなたがあなたのデータをどのように表現しているかを再考したいかもしれないと思います、私はあなたが何を達成しようとしているのかまだ理解していません。

シリーズ：[{名前：'ジョン'、色：'青'、データ：[5、3、4、7、2]、スタック：'男性'}、{名前：'ジョン'、色：'青'、 showInLegend：false、データ：[2、5、6、2、1]、スタック：'male2'}]}）;

http://jsfiddle.net/wvT85/2/

于 2012-09-10T02:44:55.857 に答える
0

これがあなたが望むものだと思います：http://jsfiddle.net/b3AF9/21/

ベンが言ったように、スタックの色を手動で設定します。次に、2 番目のスタックに ID を指定して追加します

event: {
  legendItemClick: function(event){
     this.visible? 
       this.chart.get('Joe2').hide() :
       this.chart.get('Joe2').show();
  }
}

最初のスタックのシリーズに。

于 2013-02-07T00:23:54.560 に答える