Highcharts实现图例鼠标悬停时环形图中心显示文本

没问题！咱们来修改代码，实现鼠标悬停图例时，环形图中心显示和悬停扇区一致的文本效果。下面是完整的修改后的代码，我会拆解关键部分给你解释：

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'distrubution_of_funds',
    type: 'pie',
    borderRadius: 0
  },
  series: [
    {
      name: 'Versions',
      data: [
        { "name": "№ 123 (manager)", "y":2709.74, "color": "#E85620" },
        { "name": "№ 333", "y":885.5, "color": "#92B145" },
        { "name": "other (127)", "y": 3151.3274920329, "isOther": true, "color": "#B6B9BE" }
      ],
      size: '80%',
      innerSize: '60%',
      showInLegend: true,
      dataLabels: { enabled: false },
      // 添加扇区悬停/离开事件
      point: {
        events: {
          mouseOver: function() {
            // 悬停扇区时更新中心文本，格式和需求一致
            chart.innerText.attr({ 
              text: `${this.name}: ${this.y.toFixed(2)}` 
            });
          },
          mouseOut: function() {
            // 离开扇区时恢复默认文本
            chart.innerText.attr({ text: '$$$' });
          }
        }
      }
    }
  ],
  legend: {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical',
    useHTML: true,
    width: 160,
    // 添加图例悬停/离开事件
    events: {
      legendItemHover: function(e) {
        // 获取当前悬停的图例对应的点数据
        const targetPoint = e.target;
        // 更新中心文本，和扇区悬停效果完全一致
        chart.innerText.attr({ 
          text: `${targetPoint.name}: ${targetPoint.y.toFixed(2)}` 
        });
      },
      legendItemOut: function() {
        // 离开图例时恢复默认文本
        chart.innerText.attr({ text: '$$$' });
      }
    }
  }
}, function(chart) {
  // 初始化中心文本，用图表中心坐标定位，适配不同尺寸
  const centerX = chart.plotLeft + chart.plotWidth / 2;
  const centerY = chart.plotTop + chart.plotHeight / 2;
  
  chart.innerText = chart.renderer.text('$$$', centerX, centerY)
    .css({ color: '#0f1122', fontSize: '16px', textAlign: 'center' })
    .attr({ 
      zIndex: 999,
      align: 'center', // 确保文本在中心位置居中对齐
      verticalAlign: 'middle'
    })
    .add();
});

关键修改点说明： #

• 中心文本初始化优化：不再使用固定像素坐标，而是基于图表的plotLeft、plotWidth等动态计算中心位置，确保在图表尺寸变化时文本始终处于环形中心，同时添加align和verticalAlign属性保证文本居中对齐。
• 扇区交互事件：给系列的point添加mouseOver和mouseOut事件，实现悬停扇区时更新中心文本，离开时恢复默认内容。
• 图例交互事件：在legend配置中添加legendItemHover和legendItemOut事件，监听图例的悬停动作，获取对应的数据点后同步更新中心文本，离开图例时恢复默认内容。
• 格式统一：悬停扇区和图例时，文本格式保持一致（名称+保留两位小数的数值），确保交互体验统一。

如果需要调整文本样式（比如字体大小、颜色）或者默认显示文本，直接修改对应的css属性或初始化文本内容即可。

内容的提问来源于stack exchange，提问作者user8338151