Question

我正在尝试使用https://github.com/oksktank/react-native-pure-chart将一些数据加载到图表中尝试从api加载Json数据，但似乎只是未定义，这可能是什么问题？

  constructor(props){
    super(props);
    this.state = { isLoading: true}
  }

  componentDidMount(){
      return fetch('https://api.mockaroo.com/api/12a7ead0?count=20&key=8ba88000')
        .then((response) => response.json())
        .then((responseJson) => {

          this.setState({
            isLoading: false,
            dataSource: responseJson.Weight,
          }, function(){

          });

        })
        .catch((error) =>{
          console.error(error);
        });
    }

  render() {
    return (
      <SafeAreaView style={{flex:1}}>
        <PureChart data={this.state.dataSource} type='line' />
      </SafeAreaView>
    );
  }
}

Answer 1

您提供给PureChart的数据不正确。这是工作示例：https://snack.expo.io/@msbot01/moody-orange

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import PureChart from 'react-native-pure-chart';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoading: true };
  }

  componentDidMount() {
    return fetch('https://api.mockaroo.com/api/12a7ead0?count=20&key=8ba88000')
      .then(response => response.json())
      .then(responseJson => {
        console.log(JSON.stringify(responseJson)) 
        var temp = [];
        for (var i = 0; i < responseJson.length; i++) {
            console.log(responseJson[i].Weight) 
            temp.push(responseJson[i].Weight)
          }

        this.setState({
          dataSource:temp
        })
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    return (
      <View style={styles.container}>
        <PureChart data={this.state.dataSource} type="line" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

反应本地纯图表动态数据问题

1 个答案: