悬停时的高图更改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。 您可以将其放入所需的鼠标事件函数中。