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

Question

我正在努力将 Victory 的图表库与 React 结合使用来呈现动画循环进度条，如下所示：

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

这是我的代码：

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 = d.y > 30 ? "green" : "red";
                      return d.x === 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);

不幸的是，这只是呈现文本，而不是完整的图表。见：

关于我做错了什么的任何指示？

Answer 1

我不是这个库的专家，但你给出的例子有一个间隔函数来更新 this.state.data 新的百分比。您正在将初始百分比设置为 0 而不是更新。

像示例一样设置间隔或使用下面的示例设置初始状态应该可以解决问题。

例子

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

Answer 2

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

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

Victory: Animating Circular Progress Bar - not rendering chart

javascript

reactjs

victory-charts