条形图不显示

Question

我正在制作一个会显示一些统计数据的应用程序。我选择在 react-native-chart-kit 的帮助下制作 Barchart。但它给出了错误：TypeError: undefined is not an object (evaluate 'data.map')。当我使用条形图并且相同的代码与折线图正常工作时，会显示此错误。 这是我的代码：

import React, { useState } from "react";


import { StyleSheet, Dimensions, Alert, TouchableHighlight, Text, View, Button, TouchableOpacity } from 'react-native';
import {
    LineChart,
    BarChart,
    PieChart,
    ProgressChart,
    ContributionGraph
} from 'react-native-chart-kit'
export default function TrendsScreen() {
    const [handleClick, sethandleClick] = useState(false);
    // const [color,setColor]=useState('red');
    //const [textColor,setTextColor]=useState('white');


    if (handleClick) {
        alert("fgfhfhg");
    }



    return (
        <View style={styles.view}>
            <View style={styles.container}>
                <TouchableOpacity
                    style={styles.customBtnBG}
                    onPress={() => sethandleClick(true)}
                >
                    <Text style={styles.customBtnText}>Current month</Text>


                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.customBtnBG}
                    onPress={() => { }}
                >
                    <Text style={styles.customBtnText}>6 Month</Text>


                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.customBtnBG}
                    onPress={() => { }}
                >
                    <Text style={styles.customBtnText}>12 Month</Text>


                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.customBtnBG}
                    onPress={() => { }}
                >
                    <Text style={styles.customBtnText}>All Time</Text>


                </TouchableOpacity>
            </View>
            <View>
                <Text style={styles.Text}>
                    Trend
     </Text>
            </View>

            <View style={styles.chart}>

                <BarChart
                    data={{

                        labels: ["January", "February", "March", "April", "May", "June"],
                        datasets: [{
                            data: [
                                Math.random() * 100,
                                Math.random() * 100,
                            ]
                        }
                        ]


                    }}
                    width={Dimensions.get('window').width} // from react-native
                    height={220}
                    chartConfig={{
                        backgroundColor: 'red',
                        backgroundGradientFrom: 'white',
                        backgroundGradientTo: 'white',
                        color: (opacity = 1) => `rgba(20, 20, 20, ${opacity})`,
                        style: {
                            borderRadius: 16
                        }
                    }}
                    bezier
                    style={{
                        marginVertical: 8,
                        borderRadius: 16
                    }}
                />
            </View>

        </View>
    );
}




const styles = StyleSheet.create({
    view: {

        marginTop: 20
    },
    Text: {
        padding: 16,
        fontSize: 20,
        fontStyle: 'italic',
    },

    container: {

        flexDirection: 'row',
        justifyContent: 'space-around',

    },

    customBtnText: {

        fontSize: 14,

        color: "#D2D5D6",

        textShadowColor: '#585858',
    },

    /* Here style the background of your button */
    customBtnBG: {
        flexDirection: 'row',
        backgroundColor: "white",
        borderWidth: 1,
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 5,
        borderColor: "#29416F",


    }

});

Answer 1

更新到新版本后我遇到了同样的问题。

将您的 react-native-chart-kit 版本更改为 6.1.1

  react-native-chart-kit: "6.1.1"