高图:堆积图的图例 [英] Highcharts: legend of stacked chart

问题描述

例如，这是我用来解释问题的图表.

This is the chart I have for example to explain the question.

$(function () {
    $('#container').highcharts({

        chart: {
            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: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
        }]
    });
});

图例中有系列名称.图表堆积有分组的列.我们将它们分为男性和女性类别.

We have series names in the legend. And chart is stacked with grouped columns. we have stacked them in male and female categories.

有什么办法让传说中的男性和女性吗?这样我们一次只能看到男性或女性的食物消费.

Is there any way to get Male and Female in the legends? so that we can see only male food consumption or female food consumption at a time.

您可以在此处引用小提琴-jsfiddle.net/bLZHd/

You can refer fiddle as here - jsfiddle.net/bLZHd/

谢谢

推荐答案

您可以使用 labelFormatter 将项目名称替换为堆栈名称.两个系列应该隐藏在图例(showInLegend)参数中.然后，只有您需要捕获legendItemClick并进行迭代以检查意向堆栈名称.

You can use labelFormatter to replace item name with stack name. Two series shoud be hidden in legend (showInLegend) paramter. Then only what you need is catching legendItemClick and iterate for checking serie stack name.

legendItemClick: function () {
                    var chart = this.chart,
                        key = this.options.stack;   

                    $.each(this.chart.series,function(i,serie){

                        if(serie.options.stack === key) {
                            if(serie.visible)
                                serie.hide();
                            else
                                serie.show();
                        }    

                    });
                    return false;
                }

http://api.highcharts.com/highcharts#legend.labelFormatter

这篇关于高图:堆积图的图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！