HighCharts on hover change dataLabel的字體大小

Question

我有一個餅圖highchart，我想要的是當我將鼠標懸停在餅圖的特定部分上時更改dataLabels字體大小。

我發現懸停事件建立這樣的：

plotOptions: { 

      series: { 
       shadow: { 
       color: '#000', 
       offsetX : 5, 
       offsetY : 5, 
       opacity : 0.5 
       }, 
       events: { 
        mouseOver: function(event) { 

        }, 
        mouseOut: function(event) { 

        } 
       } 

      } 

但我不知道如何從鼠標懸停/輸出內部訪問dataLabel。

Answer 1

可以達到通過this.dataLabel的point事件中的dataLabel爲series：

series: { 
    point: { 
     events: { 
      mouseOver: function (e) { 
       this.dataLabel.css({ 
        fontSize: "30px", 
       }); 
      }, 
      mouseOut: function (e) { 
       this.dataLabel.css({ 
        fontSize: "12px", 
       }); 
      } 
     } 
    } 
} 

Demo

Answer 2

是你在HTML中引用的dataLabel嗎？如果您要訪問dataLabel你可以在JavaScript中做這樣的（假設HTML元素的ID）：

document.getElementById("dataLabel").setAttribute("style", "font-size: 20px"); 

這將設置dataLabel的字體大小爲20px。你可以把它放在你想要的鼠標事件函數中。