Question

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

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

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

 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

我找不到一种优雅的方法来做到这一点，或内置的解决方案（也许有一个，但我找不到它......）

这是一个隐藏额外传说的黑客，并链接悬停事件。为简单起见，我已禁用点击事件。

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

小提琴：http://jsfiddle.net/HpdwR/1303/

Answer 2

我相信这里最好的选择会隐藏额外的传说，所以只会显示其中一个。为了使用显示的图例（当前仅控制一个图表）控制其他图表，您应该在单击图例时编写一个事件监听器，并要求它对其余图表生效。

但是，问题在于，使用饼图时，负责图例单击事件上的事件侦听器的“legendItemClick”不起作用。因此，您应该使用jquery来捕获它...这里可以看到一个示例https://stackoverflow.com/a/16099935/1138430

Highcharts只展示了一次传奇故事

2 个答案: