Highcharts - 当饼图切片移动时，如何移动每个饼图切片内的图标？

Question

我有一个饼图有一个图标（html标签定义类和位置）。当您将鼠标悬停在每个饼图切片上时，切片会正确移出，但该图标固定在位置上。有没有办法将图标移动到很好？

这正显示出最初的系列代号：

series: [{ 
 
    type: 'pie', 
 
    color: '#FFFFFF', 
 
    data: [{ 
 
    name: '<h3>Scheduling</h3>', 
 
    y: 60, 
 
    icon: '<i class="fa fa-book" style="cursor:pointer;font-size:80px;margin:-20px;"></i>' 
 
    }] 
 
}]

Answer 1

你需要移动悬停点的数据标签 - 在X，此举的Y可以从point.slicedTranslation

一把抓

示例：https://jsfiddle.net/036j2uLs/

在鼠标悬停时，您需要动画显示po int与切片相同的方向。

  mouseOver: function(event) { 
     var point = this; 

     if (!point.selected) { 
      timeout = setTimeout(function() { 
      const label = point.dataLabel; 
      point.firePointEvent('click'); 

      point.series.points.forEach(point => { 
       const label = point.dataLabel; 
       if (label.sliced) { 
       label.animate({ 
        x: label.originX, 
        y: label.originY 
       }); 
       label.sliced = false; 
       } 
      }); 

      if (!label.sliced) { 
       const { 
       translateX: tx, 
       translateY: ty 
       } = point.slicedTranslation; 

       label.animate({ 
       x: label.originX + tx, 
       y: label.originY + ty 
       }); 
       label.sliced = true; 
      } 

      chart.tooltip.shared = false; 
      chart.tooltip.refresh(point); 
      }, 0); 
     } 
     } 
    } 

记录起源数据标签上的负载位置/重绘：

function setLabelOrigins() { 
    this.series[0].points.forEach(point => { 
    const label = point.dataLabel; 
    label.originX = label.x; 
    label.originY = label.y; 
    }); 
} 

var chart = new Highcharts.Chart({ 
    chart: { 
    renderTo: 'modules', 
    plotBackgroundColor: null, 
    plotBorderWidth: null, 
    plotShadow: false, 
    type: 'pie', 
    backgroundColor: "transparent", 
    events: { 
     load: setLabelOrigins, 
     redraw: setLabelOrigins 
    } 
    },