我正在使用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);
不幸的是,这只是渲染文本,而不是完整的图形。见:
关于我做错了什么的指示?
答案 0 :(得分:1)
我不是这个图书馆的专家,但您提供的示例有一个间隔函数,用新百分比更新this.state.data
。您将初始百分比设置为0而不是更新。
设置如示例的间隔或使用下面的示例设置初始状态应解决问题。
示例强>
constructor() {
super();
this.state = {
percent: 25,
data: this.getData(25)
};
}
答案 1 :(得分:0)
我认为您可能需要将prop standalone = {false}添加到VictoryPie