1

I'm using Victory Native charts in React Native and am attempting to animate the endAngle of Victory Pie chart from 0 to 360 to produce an effect similar to this.

I include a simplified version of my code. Simplified in the sense that I have hardcoded the dynamic data into the initial state. My code is as follows:

import React, {Component} from "react";
import {Animated, View} from "react-native";
import {VictoryPie} from "victory-native";

export default class PieGraph extends Component {
    state = {
        data: [
            {
                "color": "#D8BDC4",
                "y": 6,
            },
            {
                "color": "#D88196",
                "y": 1,
            },
            {
                "color": "#B73756",
                "y": 3,
            },
        ],
        total: 10,
        endAngle: new Animated.Value(0),
    };

    componentDidMount() {
        Animated.timing(this.state.endAngle, {toValue: 360, duration: 2000}).start();
    }

    render() {
        const {data, total, endAngle} = this.state;

        return (
            <View style={{paddingTop: 40}}>
                <VictoryPie
                    animate={{duration: 2000}}
                    data={data}
                    labels={datum => total ? `${Math.round((datum.y / total) * 100)}%` : ''}
                    colorScale={data.map(({color}) => color)}
                    startAngle={0}
                    endAngle={endAngle}
                />
            </View>
        )
    }
}

When animating the endAngle as above, the chart doesn't appear despite this.state.endAngle changing from 0 to 360. No errors or warnings were output.

When defining a static value for the endAngle prop less than 360 but above 0, the chart instantly appears in that state. When omitting the endAngle prop it instantly appears as a full circle.

I have also tried starting animation as a callback on the onLoad.before property on the animate prop, but still get the same result.

4

0 回答 0