我想将 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>
最佳答案
您需要为 Line 组件设置 isAnimationActive
标志
<Line type='monotone'
dataKey='value'
stroke="black"
isAnimationActive={false}
dot={<CharacterDot />} />
关于javascript - 重新绘制 img 未以自定义点呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54357338/