Есть ли способ извлечь данные JSON в тег данных для отображения на диаграмме в React Native? - PullRequest
Новая
       39

Есть ли способ извлечь данные JSON в тег данных для отображения на диаграмме в React Native?

0 голосов
/ 11 июня 2019

Я хочу динамически отображать диаграмму на основе данных JSON в своем приложении React Native. Как мне разобрать мои данные JSON в атрибут данных?

Диаграмма работает с данными из массива, например: 

data={{
    labels: ["06-06-2019 17:17:58",
        "06-06-2019 17:19:06",
        "06-06-2019 17:20:07",
    datasets: [{
        data: [
            28.76,
            24.77,
            24.68,
        ]
    }]
}}

Я выяснил, как получить мои данные JSON в массиве. Я могу утешить. Предупредите об этом, и все в порядке. Тем не менее, он не работает в наборе данных.

В следующем коде я извлекаю свои данные JSON и помещаю их в переменную this.state (labelTest или valuesTest на основе данных). В константе данных я создаю набор данных, необходимых для lineChart. This.state.labelsTest работает нормально, но this.state.valuesTest выдает ошибку: Ошибка при обновлении свойства 'd' представления, управляемого: RNSVGPath

1010 * нуль *

Для входной строки: "l"

Я пытался сохранить свои данные this.state.valuesArray в локальном массиве, но это выдает мне точно такую ​​же ошибку.

Жестко закодированные данные работают нормально. Например, если я возьму закомментированный массив testArrayDing, он будет работать без проблем.

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

Что-то, что я заметил, - это то, что мой console.warn дает мне пустой массив, а затем секунду, правильно заполненные массивы. Понятия не имею, связано ли это с моей ошибкой. 

class GraphScreen extends React.Component {
    constructor() {
      super();
      this.state = {
        labelsTest: [],
        valuesTest: [],
      }
    }

    componentDidMount() {
      fetch("https://testrest1.herokuapp.com/testjson")
      .then((result)=>result.json())
      .then((res)=>{
        this.setState({

          labelsTest: res.map(obj => {
            return obj.label;
          }),

          valuesTest: res.map(obj => {
            return obj.value;
          }),
        });
      })
    }

  render() {
    var valuesArray = [];

    let iterable = this.state.valuesTest;
    for (let value of iterable) {
      valuesArray.push(value);
      console.warn(value);
    }

    console.warn("ARRAYYY = " + valuesArray);

    const data = {
      labels: this.state.labelsTest,
      datasets: [{
        data: testArrayDing,
      }]
    }

    // var testArrayDing = [20,125,10];

    return(
      <View>
        <LineChart
          data={data}
          width={Dimensions.get('window').width} // from react-native
          height={220}
          //yAxisLabel={'$'}
          chartConfig={{
            backgroundColor: '#fff',
            backgroundGradientFrom: '#fff',
            backgroundGradientTo: '#fff',
            decimalPlaces: 2, // optional, defaults to 2dp
            color: (opacity = 1) => `rgba(3, 169, 244, ${opacity})`,
            strokeWidth: 4,
          }}
          bezier
          style={{
            marginVertical: 8,
            color: "#000000",
          }}
        />
      </View>
    )
  }
}
...