懸停時的高圖更改dataLabel的字體大小

Question

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

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

plotOptions: {

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

                    },
                    mouseOut: function(event) {

                    }
                }

            }

但我不知道如何從mouseOver / Out內部訪問dataLabel。

Answer 1

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

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

演示

Answer 2

您使用HTML引用的dataLabel是嗎？ 如果要訪問dataLabel，可以在JavaScript中執行以下操作（假設HTML元素是一個id）：

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

這會將dataLabel的字體大小設置為20px。 您可以將其放入所需的鼠標事件函數中。