javascript - Highcharts 仅显示一次图例

Question

听起来很奇怪，但我将这 3 个图表放在一个图表中。

问题是，如果我对每个系列使用 showInLegend:true，那么图例中就有 9 个项目。

我想每次只显示一次Urban, Rurban, Nothing。

这是我的代码: http://jsfiddle.net/HpdwR/1298/

 series: [{
        data: [{
            name: 'Urban',
            color: 'red',
            y: 4
        }, {
            name: 'Nothing',
            color: 'blue',
            y: 2
        }, {
            name: 'Rural',
            color: 'green',
            y: 4,
        }],
        size: '130px',
        innerSize: '115px',
        center: ['12%'],
        name: 'first',
        showInLegend: true
    }, {
        data: [{
            color: 'red',
            y: 1
        }, {
            color: 'blue',
            y: 4
        }, {
            color: 'green',
            y: 5
        }],
        size: '130px',
        innerSize: '115px',
        center: ['50%'],
        name: 'second',
        showInLegend: true
    }, {
        data: [{
            color: 'red',
            y: 6
        }, {
            color: 'blue',
            y: 2
        }, {
            color: 'green',
            y: 2
        }],
        size: '130px',
        innerSize: '115px',
        center: ['88%'],
        name: 'third',
        showInLegend: true
    }]

Answer 1

我找不到一种优雅的方法或内置的解决方案(也许有一个，但我找不到...)

这是隐藏额外图例并链接悬停事件的 hack。为简单起见，我禁用了点击事件。

// Legend Hack
$('g.highcharts-legend-item:nth-child(n+4)').css('visibility', 'hidden');
$('g.highcharts-legend-item').hover(function() {
    var i = $(this).index();
    $('g.highcharts-legend-item').eq(i+3).trigger('mouseover');
    $('g.highcharts-legend-item').eq(i+6).trigger('mouseover');
}, function() {
    var i = $(this).index();
    $('g.highcharts-legend-item').eq(i+3).trigger('mouseout');
    $('g.highcharts-legend-item').eq(i+6).trigger('mouseout');
});
$('g.highcharts-legend-item *').click(function() { return false; });

fiddle :http://jsfiddle.net/HpdwR/1303/