为标签重新绘制自定义工具提示而不是正常的重新聊天工具提示

Question

我正在使用重新图表构建雷达图，我想添加自定义工具提示，但不使用工具提示组件，因为它仅在我将鼠标悬停在雷达图的点上时显示。我想在标签旁边添加一个信息图标，然后将鼠标悬停在该图标上时会显示工具提示，如下图所示。

我有一个自定义刻度，但除了 tspan 之外，我似乎无法在其中添加太多内容，您知道如何实现上图所示的效果吗？或者如果这是完全不可能的

我的自定义勾选是这个

  function customTick({ payload, x, y, textAnchor, stroke, radius }) {
let numberX = x;
let numberY = y;
let textX = x;
let textY = y;
let score = 0;

if (payload.value === 'Talent Pipeline') {
  score = companyInfo.scoreSections.talentPipeline;
  numberY = y - 15;
  textY = y - 15;
}

if (payload.value === 'Retention') {
  score = companyInfo.scoreSections.retention;
  // numberX = x - 10;
  numberY = y + 35;

  textX = x - 20;
  textY = y - 15;
}

if (payload.value === 'Historical') {
  score = companyInfo.scoreSections.historical;
  // numberX = x + 5;
  numberY = y + 35;

  textX = x + 20;
  textY = y - 15;
}

if (payload.value === 'Access & Advancement') {
  score = companyInfo.scoreSections.accessAdvancement;
  numberX = x - 10;
  numberY = y + 20;

  textX = x + 70;
  textY = y + 20;
}

if (payload.value === 'Representation') {
  score = companyInfo.scoreSections.representation;

  numberX = x + 10;
  numberY = y + 20;

  textX = x - 20;
  textY = y + 20;
}

return (
  <g className="recharts-layer recharts-polar-angle-axis-tick">
    <text
      radius={radius}
      stroke={stroke}
      x={x}
      y={y}
      className="recharts-text recharts-polar-angle-axis-tick-value"
      textAnchor={textAnchor}
    >
      <tspan x={textX} y={textY} dy="0em" className="radarChart__labelText">
        {payload.value}
      </tspan>

      <tspan
        x={numberX}
        y={numberY - 20}
        dy="0em"
        className={`radarChart__labelNumber ${handleScoreColor(score)}`}
      >
        {score}
      </tspan>
    </text>
  </g>
);

}

提前谢谢您

Answer 1

我知道这是一个老问题，但我最近必须实现这样的目标。

Recharts 允许您使用

<Customized />

组件渲染任何 SVG。 SVG 可以使用

<foreignObject />

标签渲染 HTML。

您可以结合这两个功能并将自定义组件拖放到图表中的任何位置。可能需要进行额外的工作才能正确定位它：

<Customized component={(props) => <ComponentThatRendersForeignObject customizedProps={props} />

https://recharts.org/en-US/api/Customized https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject