定制两个系列的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。