Highcharts只顯示一次圖例

聽起來很奇怪，但我在一個圖表中顯示了這3個圖表。Highcharts只顯示一次圖例

問題是，如果我使用showInLegend:true到每個系列，那麼我有9個項目的傳說。

我只想每次顯示Urban, Rural, 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 
    }]

來源

2015-05-05 Hiero

看到您可以評估這個例子抓住它。 –

我無法找到一個優雅的方式來做到這一點，或者一個內置的解決方案（也許有一個，但我找不到它。 ..）

這是一個隱藏額外圖例並鏈接懸停事件的黑客攻擊。爲了簡單起見，我禁用了點擊事件。

// 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/

來源

2015-05-05 15:40:28

我相信，在這裏最好的辦法隱藏額外的傳說所以只有其中一人將被顯示。爲了使用顯示的圖例（當前只控制一個圖表）控制其他圖表，您應該在單擊圖例時編寫一個事件偵聽器，並要求它對其餘圖表生效。

然而，問題是，「legendItemClick」，負責對傳說中的點擊事件中使用餅圖時不正常的事件監聽器。 http://jsfiddle.net/u7FQS/15/實現合併傳說：因此，你應該使用jQuery ..一個例子可以在這裏https://stackoverflow.com/a/16099935/1138430

來源

2015-05-05 15:41:06

Highcharts只顯示一次圖例

回答

相關問題