Question

我在这里有一个饼图，我正在研究它有两个“环”。内环只是该给定类别的外环的总和。

这是小提琴：http://jsfiddle.net/jeffvan576/a50859s7/1/

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

我一直在搞乱showInLegend功能，但是（因为它的意图）只会拉出饼图的给定部分。因此，例如，如果您点击谷歌，它会拉出饼图的那一块但留下外圈。要彻底消除谷歌，您需要点击谷歌的“谷歌”，“匹配”，“资金添加”和“有机”。

我的问题是，有没有办法立即从图表中删除整个切片（谷歌及其所有孩子）？

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

ShowInLegend代码：

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

我开始在小提琴的底部构建自定义可见性功能，但是将其拨回，直到我更好地理解showInLegend。

提前致谢！

Answer 1

你可以通过使用http://api.highcharts.com/highcharts#plotOptions.pie.events.click plotoptions - ＆gt;获取点击的系列名称来实现这一目标。饼。

之后调用可见性功能隐藏频道系列及其子节目隐藏/显示。

活动：

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

还将静态线放入可见性功能以隐藏/显示需要删除。

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

http://jsfiddle.net/a50859s7/27/

完整代码：

$(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);
    //});
});

Highcharts饼图与两个环过滤

1 个答案: