Question

我是React Native和JavaScript的新手，已经完成了一些在线课程，但我似乎无法弄清楚如何创建图表。

这就是我所看到的以及我想要的结果：

这是我的代码：

import React, {Component} from 'react';
import {
  AppRegistry,
  PropTypes,
  View,
  StyleSheet,
  Text,
  Dimensions
} from 'react-native';

import Chart from 'react-native-chart';

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#E4F1FE',
    },
    chart: {
        width: 200,
        height: 5,
    },
});

const data = [[
    [1, 3],
    [3, 7],
    [4, 9],
]];

class App extends React.Component {
render() {
    return (
        <View style={styles.container}>
            <Chart
                style={styles.chart}
                data={data}
                verticalGridStep={1}
                type="line"
                showsDataPoint={true}
      axisColor='blue'
             />
        </View>
    );
   }
 }

以下是手机上的结果：

Answer 1

import React, { Component } from 'react'

import {
    PieChart,
} from 'react-native-chart-kit'

import { Dimensions } from 'react-native'

const screenWidth = Dimensions.get('window').width

const data = [

    { name:'Return Rate', Amount: 200, color: 'blue', legendFontColor: '#7F7F7F', legendFontSize: 12},

    { name:'Duration', Amount: 100, color: 'black', legendFontColor: '#7F7F7F', legendFontSize: 12,},
]

import { View, Text, TouchableOpacity, TextInput, StyleSheet, StatusBar } from 'react-native'

class chart extends Component {

    render() {

        return (

            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

                <Text style={{ fontSize: 14, textAlign: 'center', marginBottom: 20 }}>SIP 
                Calculator Chart </Text>

                <View >

                    <PieChart

                        width={screenWidth}

               height={220}

               accessor="Amount"

               backgroundColor="transparent"

               paddingLeft="1"

        // absolute

                        chartConfig={{

                            backgroundColor: '#e26a00',

                   backgroundGradientFrom: '#fb8c00',

                   backgroundGradientTo: '#ffa726',

                            decimalPlaces: 1, // optional, defaults to 2dp

                   color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,

      style: {         
                       borderRadius: 16

                            }
                        }}

                        width={Dimensions.get('window').width}

                        height={200}

                        yAxisLabel={'$'}

                        bezier

                        style={{

                            marginVertical: 4,

                            borderRadius: 16

                        }}
                        data={data}
                    />
                </View>

            </View>

        )
    }

}

export default chart

Answer 2

您应该关闭图表

的标记

                <Chart
                style={styles.chart}
                data={data}
                verticalGridStep={1}
                type="line"
                showsDataPoint={true}
      axisColor='blue'> </Chart>

应该工作

React Native Chart不显示数据

2 个答案: