Javascript 胜利：动画循环进度条-不渲染图表

我正在使用Victory的图表库和React渲染动画循环进度条，如下所示：

这是我的密码：

从“React”导入React；
从'react redux'导入{connect}；
从“victory”导入{VictoryPie、VictoryAnimation、VictoryLabel}；
类YourRatings2扩展了React.Component{
构造函数（）{
超级（）；
此.state={
百分比：25，数据：this.getData（0）
};
}
componentDidMount（）{
百分比=25；
}
getData（百分比）{
返回[{x:1，y:percent}，{x:2，y:100-percent}]；
}
render（）{
返回(
核心技能
空}
风格={{
数据：{填写：（d）=>{
常数颜色=d.y>30？“绿色”：“红色”；
返回d.x==1？颜色：“透明”；
}
}
}}
/>
{（newProps）=>{
返回(
);
}}
);
}
}
常量mapStateToProps=状态=>{
返回{
};
};
导出默认连接（MapStateTops）（YourRatings2）

我不是这个库的专家，但您给出的示例有一个间隔函数，可以用新的百分比更新

this.state.data

。您正在将初始百分比设置为0，并且没有更新

像下面的例子那样设置间隔或者用下面的例子设置初始状态应该可以解决这个问题

示例

constructor() {
  super();
  this.state = {
    percent: 25,
    data: this.getData(25)
  };
}

---

我想您可能需要将prop standalone={false}添加到VictoryPie

谢谢，我试过了，但没有效果。在render方法中，如果我输出

this.state.data

我看到的是有效值：

（2）[{…}，{…}]0:{x:1，y:25}1:{x:2，y:75}长度：2

@AnApprentice很抱歉，你能再检查一下吗？我尝试了你在你给出的页面的可编辑示例中发布的代码，如果你像我说的那样设置百分比，它就可以正常工作。我想我可能有一个高度/宽度问题，这让我甚至看不到PieChart，我正在试着理解如何将它缩小到60px。。。如果我能弄明白，我会向你汇报：）很高兴我能帮忙。你能详细说明你的答案吗？给我们一些解释和代码示例将改进它。