Victory: Animating Circular Progress Bar - not rendering chart

Question

I'm working to use Victory's charting library with React to render a Animating Circular Progress bar like so:

https://formidable.com/open-source/victory/gallery/animating-circular-progress-bar

Here is my code:

 import React from 'react'; import {connect} from 'react-redux'; import {VictoryPie, VictoryAnimation, VictoryLabel} from 'victory'; class YourRatings2 extends React.Component { constructor() { super(); this.state = { percent: 25, data: this.getData(0) }; } componentDidMount() { let percent = 25; } getData(percent) { return [{x: 1, y: percent}, {x: 2, y: 100 - percent}]; } render() { return ( <section className="YourRatings"> <h2>Core Skills</h2> <div> <svg viewBox="0 0 400 400" width="100%" height="100%"> <VictoryPie animate={{duration: 1000}} width={400} height={400} data={this.state.data} innerRadius={120} cornerRadius={3} labels={() => null} style={{ data: { fill: (d) => { const color = dy > 30 ? "green" : "red"; return dx === 1 ? color : "transparent"; } } }} /> <VictoryAnimation duration={1000} data={this.state}> {(newProps) => { return ( <VictoryLabel textAnchor="middle" verticalAnchor="middle" x={200} y={200} text={`${Math.round(newProps.percent)}%`} style={{ fontSize: 45 }} /> ); }} </VictoryAnimation> </svg> </div> </section> ); } } const mapStateToProps = state => { return { }; }; export default connect(mapStateToProps)(YourRatings2);

Unfortunately, this is only rendering the text, not the full graph. see:

Any pointers as to what I am doing wrong?

Answer 1

I'm not an expert on this library but the example that you gave has an interval function to update this.state.data with the new percentage. You are setting initial percentage to 0 and not updating.

Setting the interval like the example or setting the initial state with the example below should fix the problem.

Example

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

Answer 2

我认为您可能需要将道具 standalone={false} 添加到 VictoryPie