带两个环过滤的Highcharts饼图

我正在制作一个饼图，里面有两个“环”。内环只是给定类别的外环的总和

这是小提琴：

（为代码道歉-现在有点乱）

我一直在摆弄showInLegend功能，但这（正如它的意图）只会拉出饼图的给定部分。举个例子，如果你点击谷歌，它会拉出饼图的那部分，但会留下外圈。要完全消除谷歌，你需要点击“谷歌”，“匹配”，“资金添加”和“有机”为谷歌

我的问题是，有没有办法一次从图表中删除整个部分（谷歌及其所有子项）

问题是为了在图表上获得我需要的功能/布局，这个饼图实际上是由两个系列组成的

显示登录代码：

        pie: {
            shadow: false,
            center: ['50%', '50%'],
            showInLegend: true
        }

我开始在小提琴的底部构建一个自定义可见性函数，但一直拨回，直到我更好地理解showInLegend

---

提前谢谢

您可以通过使用plotoptions->pie获取单击的系列的名称来实现这一点

之后，调用可见性函数隐藏频道系列及其子频道以隐藏/显示

活动：

    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%'],
            showInLegend: true,
            point: {
                events: {
                }
            }
        }
    }

此外，静态行放入可见性功能以隐藏/显示需要删除的内容

//chart.series[0]。数据[0]。visible=false

完整代码：

$(function () {
    var dataObject = {
        facebook: {
            'organic': 10.85,
                'match': 7.35,
                'fundsadded': 33.06,
                'total': 0,
                'status': 'disabled'
        },
        google: {
            'organic': 10.85,
                'match': 7.35,
                'fundsadded': 33.06,
                'total': 0,
                'status': 'disabled'
        },
        email: {
            'organic': 10.85,
                'match': 7.35,
                'fundsadded': 33.06,
                'total': 0,
                'status': 'enabled'
        },
        colorSelections: {
            'facebook': '#3b5998',
                'google': '#dd4b39',
                'disabled': '#c6c6c6'
        }
    }

    var sumObjects = function () {
        for (var channel in dataObject) {
            if (channel === 'colorSelections') continue;
            var sum = 0;
            for (var key in dataObject[channel]) {
                if (key === 'status') continue;
                sum += dataObject[channel][key];
            }

            dataObject[channel].total = sum;
        }

    }

    sumObjects();

    var colors = Highcharts.getOptions().colors,
        categories = ['Facebook', 'Google', 'Email'],
        data = [{
            y: dataObject.facebook.total + 1,
            //color: dataObject.facebook.status === 'disabled' ? dataObject.colorSelections.disabled : dataObject.colorSelections.facebook,
            color: 'rgba(59, 89, 152, 0.3)',
            drilldown: {
                name: 'Facebook',
                categories: ['organic', 'match', 'funds added'],
                data: [
                dataObject.facebook.organic,
                dataObject.facebook.match,
                dataObject.facebook.fundsadded],
                color: 'rgba(59, 89, 152, 0.3)'
            },
        }, {
            y: dataObject.google.total + 1,
            color: '#dd4b39',
            drilldown: {
                name: 'Google',
                categories: ['organic', 'match', 'funds added'],
                data: [
                dataObject.google.organic,
                dataObject.google.match,
                dataObject.google.fundsadded],
                color: '#e46f61'
            }
        }, {
            y: dataObject.email.total + 1,
            color: colors[2],
            drilldown: {
                name: 'Email',
                categories: ['organic', 'match', 'funds added'],
                data: [
                dataObject.email.organic,
                dataObject.email.match,
                dataObject.email.fundsadded],
                color: colors[2]
            }
        }],
        browserData = [],
        versionsData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness;


    // Build the data arrays
    for (i = 0; i < dataLen; i += 1) {

        // add browser data
        browserData.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });

        // add version data
        drillDataLen = data[i].drilldown.data.length;
        for (j = 0; j < drillDataLen; j += 1) {
            brightness = 0.2 - (j / drillDataLen) / 5;
            versionsData.push({
                name: data[i].drilldown.categories[j],
                y: ((data[i].drilldown.data[j] / browserData[0].y) * 100),
                color: Highcharts.Color(data[i].color).brighten(brightness).get()
            });
        }
    }

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Browser market share, April, 2011'
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%'],
                showInLegend: true,
                point: {
                    events: {
                        click: function (event) {
                            var seriesIndex;
                            var secondarySeriesIndex;
                            if (this.name == 'Facebook') {
                                seriesIndex = 0;
                                secondarySeriesIndex = 0;
                            } else if (this.name == 'Google') {
                                seriesIndex = 1;
                                secondarySeriesIndex = 3;
                            } else if (this.name == 'Email') {
                                seriesIndex = 2;
                                secondarySeriesIndex = 6;
                            }
                            var chart = $('#container').highcharts();
                            visibility(chart.series[0].data[seriesIndex]);
                            visibility(chart.series[1].data[secondarySeriesIndex]);
                            visibility(chart.series[1].data[secondarySeriesIndex + 1]);
                            visibility(chart.series[1].data[secondarySeriesIndex + 2]);
                        }
                    }
                }
            }

        },
        tooltip: {
            valueSuffix: '%'
        },
        series: [{
            name: 'Channel',
            type: 'pie',
            data: browserData,
            size: '120%',
            dataLabels: {
                formatter: function () {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }, {
            name: 'Added',
            type: 'pie',
            data: versionsData,
            size: '120%',
            innerSize: '80%',
            dataLabels: {
                formatter: function () {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
                }
            }
        }]
    });

    var visibility = function (series) {
        series.visible ? series.graphic.hide() : series.graphic.show();

       // chart.series[0].data[0].visible = false;
    }

    var chart = $('#container').highcharts();
    $('.update').click(function () {

        visibility(chart.series[0].data[0]);
        visibility(chart.series[1].data[0]);
        visibility(chart.series[1].data[1]);
        visibility(chart.series[1].data[2]);


        chart.redraw();
    });

    function synchronizePieSeries(event, slice) {
        debugger;
        $(chart.series[1].data).each(function (i, e) {
            if (slice.name === e.name) {
                slice.visible ? e.graphic.hide() : e.graphic.show();
            }
        });
    }


    //$('.update').click(function (event) {
    //    synchronizePieSeries(event, this);
    //});
});

$（函数（）{
var数据对象={
facebook：{
“有机”：10.85，
“匹配”：7.35，
“fundsadded”：33.06，
“总计”：0，
“状态”：“已禁用”
},
谷歌：{
“有机”：10.85，
“匹配”：7.35，
“fundsadded”：33.06，
“总计”：0，
“状态”：“已禁用”
},
电邮：{
“有机”：10.85，
“匹配”：7.35，
“fundsadded”：33.06，
“总计”：0，
“状态”：“已启用”
},
颜色选择：{
“facebook”：“3b5998”，
“谷歌”：“dd4b39”，
“已禁用”：“C6”
}
}
var sumObjects=函数（）{
for（数据对象中的var通道）{
如果（通道=='colorSelections'）继续；
var总和=0；
for（数据对象[通道]中的var键）{
如果（键==‘状态’）继续；
sum+=dataObject[channel][key]；
}
数据对象[通道]。总计=总和；
}
}
sumObjects（）；
var colors=Highcharts.getOptions（）.colors，
类别=['Facebook'、'Google'、'Email']，
数据=[{
y:dataObject.facebook.total+1，
//颜色：dataObject.facebook.status=='disabled'？dataObject.colorSelections.disabled:dataObject.colorSelections.facebook，
颜色：“rgba（59,89,152,0.3）”，
向下展开：{
姓名：“Facebook”，
类别：[“有机”、“匹配”、“添加资金”]，
数据：[
dataObject.facebook.org，
dataObject.facebook.match，
dataObject.facebook.fundsadded]，
颜色：“rgba（59,89,152,0.3）”
},
}, {
y:dataObject.google.total+1，
颜色：“#dd4b39”，
向下展开：{
名称：'谷歌'，
类别：[“有机”、“匹配”、“添加资金”]，
数据：[
dataObject.google.org，
dataObject.google.match，
dataObject.google.fundsadded]，
颜色：“#e46f61”
}
}, {
y:dataObject.email.total+1，
颜色：颜色[2]，
向下展开：{
名称：'电子邮件'，
类别：[“有机”、“匹配”、“添加资金”]，
数据：[
dataObject.email.org，
dataObject.email.match，
dataObject.email.fundsadded]，
颜色：颜色[2]
}
}],
browserData=[]，
versionsData=[]，
我
J
dataLen=data.length，
钻孔数据透镜，
亮度
//构建数据阵列
对于（i=0；i