与HighCharts在同一图表中的多个饼图 [英] Multiple pie-charts in the same chart with HighCharts

问题描述

我试图用 HighCharts 在同一个图表中绘制多个饼图。

JSFIDDLE DEMO code>

我为每个饼图启用了图例。两个图表的两个图例显示在底部（注意，每个条目的2个项目在图例中可见）。当我点击一个图例的项目时，它会在一张饼图中显示/隐藏一块...

但是我想实现以下任何一种：

1. 我希望为这两个图表设置一个单个图例当我点击图例中的一个项目时，两个饼图消失/显示。

我想显示只有一个图例并将其禁用，以便点击不会隐藏/显示饼图。任何人都知道一种方法来实现吗？
感谢您提前...


解决方案

我添加了下面的代码来检测点击的图例项目。

 函数（图表）{
 $（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（真）; 
} 
} 
}）; 
}）; 
 
}）; 
}）; 
} 
  

这是 jsfiddle




I'm trying to draw multiple pie-charts in the same chart with HighCharts.

JSFIDDLE DEMO

I have enabled the legend for each pie-chart. Now two legends for the 2 charts are shown at the bottom (notice that 2 items for each entry are visible in the legend). When I click on an item of the legend it shows/hides a piece in one pie-chart...

But I want to achieve either of followings,

1. I want to have a single legend for both charts so that relevant piece of both pie-charts disappears/appears when I click on an item of the legend.

2. I want to show only one legend and disable it so that clicking doesn't hide/show pieces of pie-charts.

Anybody knows a way to achieve either?

Thank you in advance...

解决方案

I have added the below code to detect the legend item clicked.

function(chart) {
        $(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);
                               }
                           }
                       });
                });

            });
        });
    }

Here is the jsfiddle

这篇关于与HighCharts在同一图表中的多个饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！