react-native-chart-kit

react-native-chart-kit 介绍

react Native图表工具包：折线图，贝塞尔曲线图，进度环，条形图，饼图，贡献图（热图）

安装

yarn add react-native-chart-kit

与ES6语法一起使用以导入组件

import {

LineChart,

BarChart,

PieChart,

ProgressChart,

ContributionGraph,

StackedBarChart

} from 'react-native-chart-kit'

实例

<View>

<Text>

Bezier Line Chart

</Text>

<LineChart

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}

yAxisLabel={'$'}

chartConfig={{

backgroundColor: '#e26a00',

backgroundGradientFrom: '#fb8c00',

backgroundGradientTo: '#ffa726',

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

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

style: {

borderRadius: 16

}

}}

bezier

{{

marginVertical: 8,

borderRadius: 16

}}

</View>

网站地址:https://expo.io/@indiespirit/react-native-chart-kit

GitHub:https://github.com/indiespirit/react-native-chart-kit

网站描述:React Native图表工具包