React-native-svg-charts анимация не работает

Я хотел бы знать, как анимировать диаграмму при реагировании на родную 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.info('apples') },
                  { onPress: () => console.info('bananas') },
                  { onPress: () => console.info('cherries') },
                  { onPress: () => console.info('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}
          />
      )
  }
}

Любая идея?

Если на ваш вопрос был дан ответ, обязательно примите ответ для дальнейших ссылок.

— 22.11.2018 11:46

javascript react-native

22.11.2018 07:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 788

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Что вы имеете в виду под анимировать диаграмму? 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 на любое число в миллисекундах!

Спасибо за вашу помощь! собственно, я хочу сделать анимацию каждого графика при загрузке. Вид вначале все ровно и идет вверх. а также иметь возможность отображать данные на графике при нажатии на график.

— 22.11.2018 13:17

он работает на гистограмме, но если я попробую с другим, это не так

— 22.11.2018 13:51

— 22.11.2018 13:51

Вы имеете в виду: 1. Начните диаграмму с прямой линии, а затем она анимируется в соответствии с реальными данными? 2. Вы хотите изменить данные при нажатии на них?

— 22.11.2018 16:11

Я обновил свой ответ! Если это то, что вы хотите, проголосуйте за дальнейшие ссылки!

— 24.11.2018 08:05

22.11.2018 08:33

Не работала анимация с несколькими строками

 lineChartData: [
  {
    data: [50, 10, 40, 95, -4, -24, 85, 50, -20, -80],
    svg: { stroke: Colors.lightBlue, strokeWidth: 1, },
  },
  {
    data: [-87, 66, -69, 92, -40, 47, -89, -44, 18],
    svg: { stroke: Colors.graphLineForPurchases, strokeWidth: 1, },
  },
]
                <LineChart
                  style = {{ height: hp(25) }}
                  data = {lineChartData}
                  svg = {{ stroke: Colors.lightBlue, strokeWidth: 1, }}
                  contentInset = {{ bottom: 20 }}
                  animate = {true}
                  animationDuration = {500}
                >                     
                </LineChart>

15.01.2021 19:11