React Native Chart不显示数据

b1payxdu 于 2023-10-18 发布在 Chart.js

关注(0)|答案(2)|浏览(226)

我是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>
    );
   }
 }

以下是手机上的结果：

chart.js

来源：https://stackoverflow.com/questions/44820693/react-native-chart-not-showing-data

2条答案

按热度按时间

qlckcl4x1#

你应该关闭标签为图表

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

应该工作

赞(0）回复(0）举报 2023-10-18

ghhaqwfi2#

尝试这个例子

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} 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

赞(0）回复(0）举报 2023-10-18

我来回答

React Native Chart不显示数据

2条答案

相关问题

热门标签

最新问答