1

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

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

我正在尝试比较两个男性堆栈

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

即，无论在哪里使用 john，它都应该具有相同的颜色，而 legand 应该只有一个 john 而不是两个。

任何人都可以帮助我处理此代码。

$(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

3

使用链接到...

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/

这样图例仍然有效，您不需要将颜色设置为相同。

于 2013-05-27T10:31:02.363 回答
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

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

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

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

在第一个堆栈中进行系列。

于 2013-02-07T00:23:54.560 回答
0

您可以手动定义系列颜色并隐藏图例中的第二组以执行您想要的操作，但这并不能真正链接数据。例如，如果您单击图例，它不会隐藏两个 john。据我所知，不支持这种在不同系列中关联 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 回答