react-native-svg-charts 动画不起作用

Question

我想知道如何在使用本机 iOS 时对图表进行动画处理，react-native-svg-charts或者是否有人可以帮助我找到另一个带有可视化数据的库图表。我尝试使用 的animate道具，StackedAreaChart但没有结果！

这是我的代码：

export default class LinksScreen extends React.Component {
  static navigationOptions = {
    title: 'react chart',
  };

  render() {

      const data = [
          {
              month: new Date(2015, 0, 1),
              apples: 3840,
              bananas: 1920,
              cherries: 960,
              dates: 400,
          },
          {
              month: new Date(2015, 1, 1),
              apples: 1600,
              bananas: 1440,
              cherries: 960,
              dates: 400,
          },
          {
              month: new Date(2015, 2, 1),
              apples: 640,
              bananas: 960,
              cherries: 3640,
              dates: 400,
          },
          {
              month: new Date(2015, 3, 1),
              apples: 3320,
              bananas: 480,
              cherries: 640,
              dates: 400,
          },
      ]

      const colors = [ 'green', '#aa00ff', 'red', 'yellow' ]
      const keys   = [ 'apples', 'bananas', 'cherries', 'dates' ]
      const svgs = [
                  { onPress: () => console.log('apples') },
                  { onPress: () => console.log('bananas') },
                  { onPress: () => console.log('cherries') },
                  { onPress: () => console.log('dates') },
              ]

      return (
          <StackedAreaChart
              style={ { height: 200, paddingVertical: 16 } }
              data={ data }
              keys={ keys }
              colors={ colors }
              curve={ shape.curveNatural }
              showGrid={ false }
              svgs={ svgs }
              animate={true}
              animationDuration={300}
          />
      )
  }
}

任何的想法？

Answer 1

动画图表是什么意思？animate={true}如果您更改数据，将有影响！

让我们看一个例子：

import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";

class TestingCharts extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        {
          a: 3840
        },
        {
          b: 1920
        },
        {
          c: 960
        },
        {
          d: 400
        }
      ]
    };
  }

  render() {
    newData = [
      {
        a: 2000
      },
      {
        b: 4902
      },
      {
        c: 325
      },
      {
        d: 7812
      }
    ];

    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            alignSelf: "stretch"
          }}
        >
          <LineChart
            style={{
              flex: 1,
              alignSelf: "stretch",
              borderWidth: 1,
              borderColor: "rgba(255,255,255,0.5)",
              margin: 10
            }}
            data={this.state.data}
            svg={{
              strokeWidth: 2,
              stroke: Colors.WHITE
            }}
            animate
          />
        </View>

        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            alignSelf: "stretch"
          }}
        >
          <TouchableOpacity
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              alignSelf: "stretch"
            }}
            onPress={() => this.setState({ data: newData })}
          >
            <Text>Change Data!</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

export default TestingCharts;

更新

正如您在评论中提到的，您希望该图表以一条直线开始，然后为新数据设置动画：

import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { LineChart } from "react-native-svg-charts";

class TestingCharts extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        {
          a: 0
        },
        {
          b: 0
        },
        {
          c: 0
        },
        {
          d: 0
        }
      ]
    };

    this.changeData();
  }

  changeData() {
    newData = [
      {
        a: 2000
      },
      {
        b: 4902
      },
      {
        c: 325
      },
      {
        d: 7812
      }
    ];

    setTimeout(() => {
      this.setState({ data: newData });
    }, 1000);
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            alignSelf: "stretch"
          }}
        >
          <LineChart
            style={{
              flex: 1,
              alignSelf: "stretch",
              borderWidth: 1,
              borderColor: "rgba(255,255,255,0.5)",
              margin: 10
            }}
            data={this.state.data}
            svg={{
              strokeWidth: 2,
              stroke: Colors.WHITE
            }}
            animate
          />
        </View>

        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            alignSelf: "stretch"
          }}
        >
          <View
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              alignSelf: "stretch"
            }}
          >
            <Text>My Beautiful Chart :D</Text>
          </View>
        </View>
      </View>
    );
  }
}

export default TestingCharts;

考虑到您可以将超时持续时间从1000毫秒更改为任意数字！