react-native-chart-kit入门攻略
官方网址:https://expo.io/@indiespirit/react-native-chart-kit
GitHub:https://github.com/indiespirit/react-native-chart-kit
简介描述:React Native图表工具包
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,
Math.random() * 100,
Math.random() * 100,
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, 255, ${opacity})`,
style: {
borderRadius: 16
}
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
</View>