两个派，一个传奇与独特的项目（合并传说） [英] Two pies, one legend with unique items (merge legends)

问题描述

是否可以在一个图形中合并两个饼图并合并传说？

我这样做了： http://jsfiddle.net/Adysone/YpfBs/

  chart = new Highcharts.Chart（{
图表：{
 renderTo：'container'，
 type：'pie'
}，
 title：{
文字：饼图，
 align：'center'
}，
图例：{
 layout：'vertical'，
 align：'right'， 
 verticalAlign：'top'
}，
 tooltip：{
 formatter：function（）{
 return this.key +'：'+ this.y +' （'+ Math.round（this.percentage）+'％）'; 
} 
}，
 plotOptions：{
 pie：{
 showInLegend：true， 
 size：200 
} 
}，
 series：[
 {
名称：2011，
 dat a：[
 {
 name：Apple，
 color：＃FF3333，
y：8 
}，
 {
名称：香蕉，
颜色：＃FFF55C，
y：11 
}，
 {
名称：葡萄，
颜色： ＃90007B，
y：9 
}，
 {
名称：梨，
颜色：＃F1FFB8，
y：3 
 
 
中心$ 150,100 b $ b大小150 
 
 
名称2012，
 data：[
 {
 name：Apple，
 color：＃FF3333，
y：5 
}，
 {
名称：香蕉，
颜色：＃FFF55C，
y：15 
}，
 {
名称：Pear，
颜色：＃F1FFB8，
y：8 
} 
]，
中心：[450,100]，
大小：150 
} 
 ] 
}）; 
  

但传说中的项目是重复的，因为它们在两个派中很常见，我该怎么做才能做到这些如果这是不可能的，我可以让两个传说分开吗？

谢谢！

解决方案

请看例子 http：// jsfiddle .net / u7FQS / 15 / 使用3个饼图并具有常见图例

  $（chart.series [ 0] .data）.each（function（i，e）{
 e.legendItem.on（'click'，function（event）{
 var legendItem = e.name; 
 
 event.stopPropagation（）; 
 
 $（chart.series）.each（function（j，f）{
 $（this.data）.each（function（k， z）{
 if（z.name == legendItem）
 {
 if（z.visible）
 {
 z.setVisible（false）; 
 } 
 else 
 {
 z.setVisible（true）; 
} 
} 
}）; 
}）; 
 
}）; 
}）; 
  

Is it possible to do two pies in one graphic and merge legends?

I did this : http://jsfiddle.net/Adysone/YpfBs/

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    title: {
        text: "Pie Charts",
        align: 'center'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top'
    },
    tooltip: {
        formatter: function () {
            return this.key + ': ' + this.y + ' (' + Math.round(this.percentage) + '%)';
        }
    },
    plotOptions: {
        pie: {
            showInLegend: true,
            size: 200
        }
    },
    series: [
        {
            name: "2011",
            data: [
                {
                    name: "Apple",
                    color: "#FF3333",
                    y: 8
                },
                {
                    name: "Banana",
                    color: "#FFF55C",
                    y: 11
                },
                {
                    name: "Grape",
                    color: "#90007B",
                    y: 9
                },
                {
                    name: "Pear",
                    color: "#F1FFB8",
                    y: 3
                }
            ],
            center: [150,100],
            size: 150
        },
        {
            name: "2012",
            data: [
                {
                    name: "Apple",
                    color: "#FF3333",
                    y: 5
                },
                {
                    name: "Banana",
                    color: "#FFF55C",
                    y: 15
                },
                {
                    name: "Pear",
                    color: "#F1FFB8",
                    y: 8
                }
            ],
            center: [450,100],
            size: 150
        }
    ]
});

But legend items are duplicated since they are common in the two pies, how can I do to make these unique?

If it's not possible, can I make two legends separate?

Thanks!

解决方案

Please take look at example http://jsfiddle.net/u7FQS/15/ which used 3 pie charts and has common legend

$(chart.series[0].data).each(function(i, e) {
        e.legendItem.on('click', function(event) {
            var legendItem=e.name;

            event.stopPropagation();

            $(chart.series).each(function(j,f){
                   $(this.data).each(function(k,z){
                       if(z.name==legendItem)
                       {
                           if(z.visible)
                           {
                               z.setVisible(false);
                           }
                           else
                           {
                               z.setVisible(true);
                           }
                       }
                   });
            });

        });
    });

这篇关于两个派，一个传奇与独特的项目（合并传说）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！