如何解决仅对新数据图表进行动画处理或对图表进行替代
我只想对图表中的新添加的数据点进行动画处理。现在,当出现新的数据点时,整条线将被重画。我该怎么实现呢?如果没有办法,有没有一个库可以做到这一点?
可复制示例
import React,{ useState,useEffect } from "react";
import { LineChart,XAxis,YAxis,Line } from "recharts";
function NewGraph() {
const data = useData()
return (
<LineChart
width={730}
height={150}
data={data}
margin={{ top: 5,right: 30,left: 20,bottom: 5 }}
>
<XAxis type="number" dataKey="time" domain={[0,20]} />
<YAxis dataKey="position" domain={[0,1]} />
<Line
strokeWidth="4"
type="normal"
dataKey="position"
stroke="#8884d8"
dot={false}
animationEasing="linear"
animationDuration={1000}
/>
</LineChart>
);
}
export default NewGraph;
为了创建一些随机数据,我在同一文件中创建了此自定义挂钩。但是,该挂钩不是我的问题,仅是为了方便重现该问题。
function useData(){
const [data,setData] = useState([{position: 0,time: 0}]);
useEffect(() => {
let interval = setInterval(()=> {
setData(prevData => [
...prevData,{ position: Math.random()*10,time: prevData.slice(-1)[0].time+1 },]);},1000)
return () => {
clearInterval(interval)
}
},[])
return data
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。