recharts img 未在自定义点中呈现

Posted 2023-03-23

【中文标题】recharts img 未在自定义点中呈现

【英文标题】：recharts img not rendering in customized dot

【发布时间】：2019-06-18 19:40:32

【问题描述】：

我想将来自 URL 的图像呈现为折线图的点。

我添加了文档中显示的“CharacterDot”，但它没有呈现任何内容。如果我使用相同的代码但使用 SVG 而不是图像（确切地说它在文档中的使用方式）它可以工作。

这是文档中的一个示例。 https://jsfiddle.net/alidingling/9y9zrpjp/

class CharacterDot extends Component 
    render() 
        const  cx, cy  = this.props;

        return (
            <img cx=cx - 15 cy=cy - 15 width=30 height=30 src='https://via.placeholder.com/100x100'/>
        );
    


<ResponsiveContainer width='100%' height=400>
    <LineChart data=data2 margin= right: 50, left: 50 >
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="black" strokeWidth="3px" dot=<CharacterDot /> />
    </LineChart>
</ResponsiveContainer>

【参考方案1】：

需要为 Line 组件设置isAnimationActive 标志

<Line type='monotone'
    dataKey='value'
    stroke="black"
    isAnimationActive=false
    dot=<CharacterDot /> />