reactjs - 将 HTML 或图像放在 xAxis 中

Question

有没有办法在简单条形图的 xAxis 中显示图像？

这是我迄今为止尝试过的：

我正在尝试使用自定义组件覆盖VictoryAxis的tickLabelComponent中显示的内容。

       <VictoryAxis
            // tickValues specifies both the number of ticks and where
            // they are placed on the axis
            tickValues={props.xTickValues}
            tickFormat={props.xTickFormat}
            // ChartBarCustomLabel is the name of my custom component
            tickLabelComponent={<ChartBarCustomLabel xAxisInformation={props.xAxisInformation} />}
        />

自定义组件在属性 xAxisInformation中接收一组图像。

这里是：

const ChartBarCustomLabel = (props) => {

return (
    <div>
        <img src={props.xAxisInformation[props.index].icon} alt="" key={props.xAxisInformation[props.index].id}/>
    </div>
);

};

在自定义组件中，我尝试使用为tickLabelComponent提供的道具索引来获取图标。但什么都没有显示。

事实上，如果我使用 React Developer Tools 检查代码，图像就在那里......

...但没有渲染任何内容。

我认为 html 或图像不能显示在tickLabelComponent中，我应该使用另一个 Victory 组件。但是哪一个是正确的？

或者也许还有另一种方法可以实现这一点。

很感谢任何形式的帮助！

Answer 1

事实证明，Victory 将其数据组件和标签组件呈现在 svg 标签内。因此，如果我想使用非 svg 元素，我需要将它们包装起来<foreignObject>

唯一的缺点是一些浏览器不支持foreignObject，我需要提供位置。

无论如何，自定义组件现在是这样的：

const ChartBarCustomLabel = (props) => {
    return (
        <foreignObject style={{ paddingTop: String(props.xAxisImagesTopPadding) + "px", paddingLeft: String(props.xAxisImagesLeftInitialPadding + (props.xAxisImagesTickSize * props.index)) + "px" }}>
            {
                props.xAxisInformation[props.index] !== undefined ?
                    <img style={{ minHeight: String(props.xAxisImagesMinHeight) + "px", minWidth: String(props.xAxisImagesMinWidth) + "px" }} src={props.xAxisInformation[props.index].icon} alt="" key={props.xAxisInformation[props.index].id} />
                    : null
            }
        </foreignObject>
    );
};

并且工作得很好！