Question

我使用列堆叠和分组图表进行比较。

检查此示例代码：@fiddle http://jsfiddle.net/wvT85/

我想比较两个男性堆栈

我希望分组图表的项目颜色相同，没有重复的图例。

即在使用约翰的地方，它应该有相同的颜色和腿，并且应该只有一个约翰而不是两个。

任何人都可以帮我解决这个问题。

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

});

Answer 1

使用LinkedTo ...

http://api.highcharts.com/highcharts#plotOptions.series.linkedTo

它的演示如下：

linkedTo: ':previous',

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange-line/

这样，图例仍可正常使用，您无需将颜色设置为相同。

Answer 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'
        }]

Answer 3

您可以手动定义系列颜色并隐藏图例中的第二组以执行您想要的操作，但这并不能真正链接数据。例如，如果单击图例，它将不会隐藏两个johns。据我所知，这种类型的关联不同系列中的2个点是不受支持的。我想说，我认为您可能想重新考虑如何表示您的数据，我仍然不明白您要完成的任务。

系列：[{ 名字：'约翰'，颜色：“蓝”，数据：[5,3,4,7,2]，堆栈：'男性' }，{ 名字：'约翰'，颜色：“蓝”， showInLegend：假的，数据：[2,5,6,2,1]，堆栈：'male2' }] }）;

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

Answer 4

我认为这就是你想要的：http://jsfiddle.net/b3AF9/21/

正如Ben所说，手动设置堆栈的颜色。然后将ID提供给第二个堆栈并添加

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

到第一个堆栈中的系列。

Highchart Js柱形图堆积和分组

4 个答案: