Question

我想在我的React Native应用中动态显示基于JSON数据的图表。如何将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变量（基于数据的labelsTest或valuesTest）中。在数据常量中，我创建了线图所需的数据集。 this.state.labelsTest工作正常，但是this.state.valuesTest给我一个错误：更新由RNSVGPath管理的视图的属性“ d”时发生错误

空

对于输入字符串：“ l”

我试图将我的this.state.valuesArray数据存储在本地数组中，但这给了我相同的确切错误。

硬编码数据可以正常工作。例如，如果我用我评论过的testArrayDing数组，它可以正常工作。

我也曾尝试将JSON数据转换为int，因为有人知道，出于某种原因，它可能会将它们作为字符串提取。这也不起作用。

我注意到的是我的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>
    )
  }
}

有没有办法将JSON数据提取到数据标签中以显示在React Native中的图表中？

0 个答案: