0

在自定义两个系列饼图的图例时发现自己完全卡住了。

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'”也会将第二个图表与图例行为联系起来，但只有第一个图表会受到影响。IE 单击“红色”将在两个图表上分割红色数据点。

感谢您的任何帮助。

4

1 回答 1

0

这似乎是一种迂回的方式，但这是我想到的第一件事。我不认为 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.
        }); 
});

在这里拉小提琴。

于 2013-05-11T21:36:54.510 回答