将 HTML 或图像放在 xAxis 中

Question

有没有办法在简单条形图的 x 轴上显示图像？

这是我目前尝试过的方法：

我正在尝试使用自定义组件从 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} />}
        />

自定义组件在 prop xAxisInformation.

中接收图像数组

这里是：

const ChartBarCustomLabel = (props) => {

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

};

在自定义组件中，我尝试使用 index 获取图标，这是为 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>
    );
};

而且工作得很好！

将 HTML 或图像放在 xAxis 中

Put HTML or images in the xAxis

reactjs

victory-charts