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 
    } 
    },