recharts IMG在定制点不渲染
我想从一个URL作为线图点渲染图像。
我添加了“CharacterDot”就像它在文档中显示,但是不呈现任何内容。如果我使用相同的代码,但使用SVG而不是图像(其在文档究竟是如何使用的)的工作原理。
这是从文档的例子。 /
class CharacterDot extends Component {
render() {
const { cx, cy } = this.props;
return (
<img cx={cx - 15} cy={cy - 15} width={30} height={30} src=''/>
);
}
}
<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>
回答如下:
您需要设置线条元件isAnimationActive
标志
<Line type='monotone'
dataKey='value'
stroke="black"
isAnimationActive={false}
dot={<CharacterDot />} />