问题描述
我正在尝试为 Victory Native 饼图中的数据变化制作动画。我在 ComponentDidMount 方法中设置的重复超时上从 API 获取数据。检索到数据后,我将其设置为一个状态变量,该变量将传递给 VictoryPie 组件中的数据道具,并启用了文档所示的动画道具。
我正在关注此 article 和 Victory Chart docs for animations,但我的行为与这些示例不同。
目前它正确设置了数据,但没有任何平滑的动画。它立即从初始状态值跳转到获取的数据值。只有当我看到动画时,在前一次获取的值不为零之后,获取的数据返回零值。
export default class Haloxpchart extends Component {
constructor(props) {
super(props);
this.state = {
gamertag: this.props.gamertag ? this.props.gamertag : '',dateRetrievalInterval: 1,totalXp: 0,startXp: 0,spartanRank: 0,xpchartData: [
{x: 'xp earned',y: 0},{x: 'xp remaining',y: 1}
],loading: false
};
}
componentDidMount() {
this.setState({loading: true});
this.recursiveGetData();
}
async recursiveGetData(){
this.setState({indicator: true},async () => {
await this.getData()
this.setState({indicator: false});
let timeout = setTimeout(() => {
this.recursiveGetData();
},this.state.dateRetrievalInterval * 60 * 1000);
});
}
async getData(){
await Promise.all([
fetch('https://www.haloapi.com/stats/h5/servicerecords/arena?players=' + this.state.gamertag,fetchInit),fetch('https://www.haloapi.com/Metadata/h5/Metadata/spartan-ranks',fetchInit)
])
.then(([res1,res2]) => {
return Promise.all([res1,res2.json()])
}).then(([res1,res2) => {
const xp = res1.Results[0].Result.Xp;
const spartanRank = res1.Results[0].Result.SpartanRank;
this.setState({totalXp: xp});
const currentRank = res2.filter(r => r.id == this.state.spartanRank);
this.setState({startXp: currentRank[0].startXp});
this.setState({loading: false},() => {
this.setState({xpchartData: [
{x: 'xp earned',y: this.state.totalXp - this.state.startXp},y: 15000000 - (this.state.totalXp - this.state.startXp)}
]});
});
})
.catch((error) => {
console.log(JSON.stringify(error));
})
}
render() {
return(
<View>
<Svg viewBox="0 0 400 400" >
<VictoryPie
standalone={false}
width={400} height={400}
data={this.state.xpchartData}
animate={{
easing: 'exp',duration: 2000
}}
innerRadius={120} labelRadius={100}
style={{
labels: { display: 'none'},data: {
fill: ({ datum }) =>
datum.x === 'xp earned' ? '#00f2fe' : 'black'
}
}}
/>
</Svg>
</View>
);
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)