HighCharts在鼠标悬停时改变dataLabel's字体大小

HighCharts on hover change dataLabel's font size

本文关键字：字体 dataLabel 鼠标 悬停 改变 HighCharts      更新时间：2023-09-26

我有一个饼状高图，我想要的是改变dataLabels字体大小当我悬停在饼的特定部分。

我发现悬停事件是这样建立的:

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

但是我不知道如何从mouseOver/Out内部访问dataLabel

您可以在series的point事件中通过this.dataLabel到达dataLabel:

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

是你在HTML中所指的数据标签吗?如果你想访问dataLabel，你可以在JavaScript中这样做(假设HTML元素是一个id):

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

这将设置dataLabel的字体大小为20px。您可以将其放入所需的鼠标事件函数中。

相关文章：