Highcharts 甜甜圈悬停所有区域

Question

我用 highcharts 创建了一个 Pie Donut 图表，效果很好。现在我想做的是，当我将鼠标悬停在一个区域时，我想突出显示它的 parents 和 children，并将它们的所有数据都显示在工具提示中。

这是我的图表：

https://jsfiddle.net/whoknows/q9srL6o7/2/

这是我想做的事情：

http://i.imgur.com/AMr42dO.png

谢谢。

Answer 1

可以在点的mouseOver和mouseOut事件中使用setState来设置多个点的悬停状态。工具提示格式化程序还可以显示多个符合条件的点。我已将 hoverGroup 变量添加到每个点以找到用于设置状态和工具提示的那些点。示例：http://jsfiddle.net/q9srL6o7/4/

$(function () {
    var chart;
    $(document).ready(function () {
        var colors = ["#00bcd4", "#00838f", "#69f0ae", "#f4511e", "#d81b60", "#1e88e5"],
            categories = ['Site #1', 'Site #2', 'Site #3', 'Site #4', 'Site #5'],
            data = [{
                y: 55.11,
                color: colors[0],
                drilldown: {
                    name: 'Site #1',
                    categories: ['Leisure', 'Business'],
                    data: [45.01, 10.1],
                    drilldown: {
                        name: 'In/Out',
                        categories: ['In', 'In', 'Out', 'Out'],
                        data: [32.97, 12.04, 6.1, 4]
                    }
                }
            }, {
                y: 21.63,
                color: colors[1],
                drilldown: {
                    name: 'Site #2',
                    categories: ['Leisure', 'Business'],
                    data: [13.12, 8.51],
                    drilldown: {
                        name: 'In/Out',
                        categories: ['In', 'In', 'Out', 'Out'],
                        data: [8.53, 4.59, 3.12, 5.39]
                    }
                }
            }, {
                y: 11.94,
                color: colors[2],
                drilldown: {
                    name: 'Site #3',
                    categories: ['Leisure', 'Business'],
                    data: [9.91, 2.03],
                    drilldown: {
                        name: 'In/Out',
                        categories: ['In', 'In', 'Out', 'Out'],
                        data: [5.91, 4, 1, 1.03]
                    }
                }
            }, {
                y: 7.15,
                color: colors[3],
                drilldown: {
                    name: 'Site #4',
                    categories: ['Leisure', 'Business'],
                    data: [4.55, 2.6],
                    drilldown: {
                        name: 'In/Out',
                        categories: ['In', 'In', 'Out', 'Out'],
                        data: [4, 0.55, 0.75, 1.85]
                    }
                }
            }, {
                y: 4.17,
                color: colors[4],
                drilldown: {
                    name: 'Site #5',
                    categories: ['Leisure', 'Business'],
                    data: [2.49, 1.68],
                    drilldown: {
                        name: 'In/Out',
                        categories: ['In', 'In', 'Out', 'Out'],
                        data: [1.46, 1.03, 0.45, 1.23]
                    }
                }
            }],
            siteData = [],
            trafficData = [],
            inoutData = [],
            inoutColors = ['#faba59', '#f79f45', '#8cd260', '#5cc064'];

        for (var i = 0; i < data.length; i++) {
            siteData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color,
                hoverGroup: i
            });

            for (var j = 0; j < data[i].drilldown.data.length; j++) {
                trafficData.push({
                    name: data[i].drilldown.categories[j],
                    y: data[i].drilldown.data[j],
                    color: j === 0 ? '#f06e4a' : '#36a061',
                    hoverGroup: i
                });
            }

            for (var k = 0; k < data[i].drilldown.drilldown.data.length; k++) {
                inoutData.push({
                    name: data[i].drilldown.drilldown.categories[k],
                    y: data[i].drilldown.drilldown.data[k],
                    color: inoutColors[k],
                    hoverGroup: i
                });
            }
        }

        // Create the chart
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'pie'
            },
            showInLegend: false,
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            title: {
                enabled: false,
                text: ''
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },

            plotOptions: {
                pie: {
                    shadow: false,
                    point: {
                        events: {
                            mouseOver: function () {
                                var hoverGroup = this.hoverGroup,
                                    series = this.series.chart.series;
                                $.each(series, function (i, s) {
                                    $.each(s.points, function (j, p) {
                                        if (p.hoverGroup == hoverGroup) p.setState('hover');
                                    });
                                });
                            },
                            mouseOut: function () {
                                var series = this.series.chart.series;
                                $.each(series, function (i, s) {
                                    $.each(s.points, function (j, p) {
                                        p.setState('');
                                    });
                                });
                            }
                        }
                    }
                }
            },
            tooltip: {
                valueSuffix: '',
                formatter: function () {
                    var ret = '',
                        once = true,
                        hoverGroup = this.point.hoverGroup,
                        series = this.series.chart.series;

                    $.each(series, function (i, s) {
                        $.each(s.points, function (j, p) {
                            if (p.hoverGroup == hoverGroup) {
                                ret = '<span style="color:' + p.color + ';">●</span> ' + p.name + ' :' + p.y + '<br/>' + ret;
                            }
                        });
                    });
                    return ret;
                }
            },
            series: [{
                name: 'In/Out',
                data: inoutData,
                size: '85%',
                innerSize: '20%',
                dataLabels: {
                    formatter: function () {
                        return null;
                    }
                }
            }, {
                name: 'Type de trafic',
                data: trafficData,
                size: '90%',
                innerSize: '85%',
                dataLabels: {
                    formatter: function () {
                        return null;
                    }
                }
            }, {
                name: 'Site',
                data: siteData,
                size: '100%',
                innerSize: '90%',
                dataLabels: {
                    formatter: function () {
                        return null;
                    }
                }
            }]
        });
    });

});

Highcharts 甜甜圈悬停所有区域

Highcharts donut hover all area

highcharts

donut-chart