环形图选中图例后悬停弧时内部值不更新问题求助

你的问题出在当前代码的条件判断逻辑上：当处于悬停状态（showHover为true）时，代码会直接返回初始的valueInsideDonut，完全忽略了已选中图例的状态，也没有处理悬停弧对应的数据值，导致悬停已选中弧时显示回初始值。

我们需要调整逻辑优先级，优先处理悬停状态，再处理选中图例的状态，确保两种交互场景下都能正确显示对应的数据值。

步骤1：补充悬停状态的数据源 #

首先确保你能获取到当前悬停的弧对应的图例名称（比如通过状态存储或回调函数获取），假设你有一个hoveredLegend状态或_getHoveredLegend()方法来获取当前悬停的图例。

步骤2：修改_valueInsideDonut回调函数 #

const _valueInsideDonut = React.useCallback(
  (valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) => {
    const highlightedLegend = _getHighlightedLegend();
    const hoveredLegend = _getHoveredLegend(); // 获取当前悬停的图例

    // 1. 优先处理悬停状态：有悬停图例时，返回对应弧的数据
    if (valueInsideDonut !== undefined && hoveredLegend) {
      const targetPoint = data.find(point => point.legend === hoveredLegend);
      return targetPoint ? (targetPoint.yAxisCalloutData ?? targetPoint.data!) : valueInsideDonut;
    }
    // 2. 处理选中图例状态：无悬停但有选中图例时，返回对应数据
    else if (valueInsideDonut !== undefined && highlightedLegend) {
      const targetPoint = data.find(point => point.legend === highlightedLegend);
      return targetPoint ? (targetPoint.yAxisCalloutData ?? targetPoint.data!) : valueInsideDonut;
    }
    // 3. 默认返回初始值
    else {
      return valueInsideDonut;
    }
  },
  [_getHighlightedLegend, _getHoveredLegend], // 更新依赖项
);

关键修改点 #

• 逻辑优先级调整：优先响应悬停操作，确保悬停任何弧时都显示对应的数据，包括已选中图例的弧
• 高效数据查找：用find替代map，只遍历数据找到目标项即可，避免不必要的遍历
• 简化语法：使用空值合并运算符??替代冗余的三元表达式
• 移除无效依赖：去掉showHover依赖，直接通过hoveredLegend是否为空判断悬停状态，逻辑更直接

补充：如果没有悬停图例的状态 #

如果你的组件还没有存储悬停图例的状态，可以添加以下状态和回调：

const [hoveredLegend, setHoveredLegend] = React.useState('');

// 绑定到环形图的鼠标进入/离开事件
const handleArcMouseEnter = (legend: string) => {
  setHoveredLegend(legend);
};

const handleArcMouseLeave = () => {
  setHoveredLegend('');
};

之后将代码中的_getHoveredLegend()替换为直接使用hoveredLegend状态即可。

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