Highcharts甜甜圈图表文本居中悬停时更改

我正在寻找一种方法，使文本在一个圆环图的中心改变悬停。当没有悬停状态时，中心将显示总金额（这里我代表休假天数，所以可能是15个休假天数）。悬停时，中心的文本需要与悬停的段（可用、请求和休假日）匹配，但我无法确定如何根据悬停更改中心的文本。有人有什么想法吗？非常感谢您的帮助

$（函数（）{
变量颜色=['#8d62a0'、'#ceb3d8'、'#d5ddd']；
var图表=新的Highcharts.图表({
图表：{
renderTo:'container1'，
键入“pie”，
身高：250，
宽度：250，
边界半径：0
},
学分：{
已启用：false
},
标题：假，
工具提示：false，
打印选项：{
馅饼：{
边框宽度：6，
startAngle:90，
内部尺寸：“55%”，
大小：“100%”，
影子：没错，
// {
//颜色：'#000000'，
//抵销额：0，
//副职：2，
//不透明度：0.7，
//宽度：3
// },
数据标签：false，
粘滞跟踪：错误，
国家：{
悬停：{
已启用：true
}
}
}
},
系列：[{
数据：[
{y:65，color:colors[0]}，
{y:15，color:colors[1]}，
{y:20，color:colors[2]}
]
//数据：[
//['Firefox'，44.2]，
//[IE7'，26.6]，
//[IE6'，20]，
//[Chrome'，3.1]，
//[“其他”，5.4]
// ]
}]
},
函数（图表）{//已完成
var xpos='50%'；
var ypos='53%'；
循环变异系数=102；
//渲染文本
chart.renderer.text（'126.5'，103，127）.css({
宽度：圆形*2，
颜色：“#4572A7”，
fontSize:'16px'，
textAlign:“中心”
})艾特先生({
//为什么zIndex不把文本放在图表前面？
zIndex:999
}).add（）；
});
});

使用

points.events.mouseOver/mouseOut

，例如：

代码：

            point: {
                events: {
                    mouseOver: function(){
                        this.series.chart.innerText.attr({text: this.y});
                    }, 
                    mouseOut: function(){
                        this.series.chart.innerText.attr({text: 112});
                    }
                }
            }

其中innerText只是自定义属性，创建方式如下：

chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();

---

非常感谢！这很有魅力。我真的很感谢你的帮助！在JSFIDLE中，您提到了var circleradius=102；你是怎么弄到这个怪圈的？有什么方法可以动态地得到这个结果吗？最好向问题的作者提出这个问题。这不是我的代码。我会这样计算内部位置：（只需摆弄标签的边界框和饼的中心位置）。@PawełFus有没有想过让悬停效果在innerSize中也有效？在饼（由

innerSize

创建的空白）中，我们没有SVG形状，所以我们不能在HTML中触发

mouseover

事件。可能需要将

mouseover

绑定到容器，并计算（？）如果存在切片，将悬停哪个切片。。

chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();