将自定义标签添加到图表中的参考线时不显示任何组件

Question

我正在尝试在 ReferenceLine 右侧添加一个带有圆形边框的自定义标签，如下所示https://i.stack.imgur.com/b20eD.jpg，正如它所说，您可以在此处的文档中执行以下操作： ://recharts.org/en-US/api/ReferenceLine#label。

\n\n

我们\xe2\x80\x99遇到的问题是，每当我们尝试在此处传递一个组件时，<ReferenceLine {...props} label={<CustomizedLabel />} />无论我尝试什么，都不会渲染任何内容。

\n\n

我无法找到任何示例，其中他们专门对参考线标签执行了此操作，但已设法使组件传递功能适用于数据点，所以我不确定我们在哪里\xe2\x80\x99 这里出错了。

\n\n

目前，我们可以使用对象自定义标签，但是当传递我们自己的元素时，不会呈现任何内容。

\n\n

<ReferenceLine\n                  y={dataLimits.lL}\n                  stroke={Colors.red.hex}\n                  strokeDasharray="3 3"\n                  label={{\n                    position: "right",\n                    value: dataLimits.lL,\n                    fill: "#595959",\n                    fontSize: "0.75rem"\n                  }}\n                  ifOverflow="extendDomain"\n                />\n

\n\n

我们想将其转换为

\n\n

<ReferenceLine\n                  y={dataLimits.lL}\n                  stroke={Colors.red.hex}\n                  strokeDasharray="3 3"\n                  label={<LimitLabel />}\n                  ifOverflow="extendDomain"\n                />\n

\n\n

其中 LimitLabel 具有上述属性，但具有圆形边框。

\n\n

控制台上不会出现错误消息，DOM 中也不会出现任何组件。

\n\n

这是我们当前实现的 jsfiddle，没有自定义组件，如果这有助于演示\n https://jsfiddle.net/rbyztucn/1/

\n

Answer 1

recharts 上的文档对此确实有限制，但根据我的实验和 @rebecca 关于使用 SVG 元素的想法，我意识到这些 ReferenceLine 组件上的 label 属性需要 SVG 元素，而不是 React DOM 元素。

当我找到有关定位这些元素的更多信息时，我会更新此评论；我有一种感觉，我可以使用 Recharts 内置的定位实用程序来使这变得相当容易。

这样做的一个很好的副作用是您也可以轻松地将 SVG 图标传递给这些标签。