定製兩個系列的Highcharts圖例行爲

Question

在定製兩個系列餅圖的圖例時發現自己完全卡住了。

的jsfiddle和代碼：

http://jsfiddle.net/jschlick/cCXkj/

colors: ['#f00000', '#f8d10a', '#9edb70'], 
legend: { 
    layout: 'horizontal', 
    verticalAlign: 'bottom' 
}, 
plotOptions: { 
    pie: { 
    point: { 
     events: { 
     legendItemClick: function() { 
      this.select(); 
      elm.tooltip.refresh(this); 
      return false; 
     }, 
     mouseOver: function() { 
      this.select(); 
      elm.tooltip.refresh(this); 
      return false; 
     } 
     } 
    }, 
    showInLegend: true 
    }, 
    series: { 
    dataLabels: { 
     enabled: true, 
     format: '{point.percentage}%' 
    } 
    } 
}, 
series: [{ 
    type: 'pie', 
    center: [450, 150], 
    data: [ 
    ["Red", 2], 
    ["Yellow", 5], 
    ["Green", 3] 
    ], 
    size: '60%', 
    innerSize: '40%' 
}, { 
    type: 'pie', 
    linkedTo: ':previous', 
    center: [150, 150], 
    data: [ 
    ["Red", 1], 
    ["Yellow", 2], 
    ["Green", 7] 
    ], 
    size: '60%', 
    innerSize: '40%' 
}] 

1）我需要的電流傳說點擊行爲（切片數據點）到上懸停，而不是點擊執行。 2）我期望使用「linkedTo：'：previous'」也會將第二個圖表與圖例行爲綁定，但只有第一個圖表生效。 I.E.點擊「紅色」將切分兩個圖表上的紅色數據點。

感謝您的任何幫助。

Answer 1

這看起來像是一個迂迴的做法，但這是我首先想到的。我不認爲HighCharts提供圖例項目懸停事件，所以我做了一個自己：

[after creating the chart] 

$.each(Highcharts.charts[0].legend.allItems, function() { 
    var groupElem = this.legendGroup.element; // for each legend group 
    $.data(groupElem, 'info', {'series':[this.series, this.series.linkedSeries[0]],'point':this.x}); // store some data about the group for use in the mouseover call back 
    $(groupElem).mouseover(function(){ 
      $.data(this,'info').series[0].points[$.data(this,'info').point].select(true,false); // select the pie wedge 
      $.data(this,'info').series[1].points[$.data(this,'info').point].select(true,true); // select the linked pie wedge pass (true, true) to no deselect other. 
     }); 
}); 

小提琴here。