Question

在为两个系列饼图自定义图例时发现自己完全陷入困境。

JSFiddle和代码：

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。

自定义两个系列的Highcharts图例行为

1 个答案: