react-native-chart-kit入门攻略_React Native图表工具包

react-native-chart-kit入门攻略

官方网址:https://expo.io/@indiespirit/react-native-chart-kit

react-native-chart-kit入门攻略_React Native图表工具包

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>

 

海计划公众号
(0)
上一篇 2020/03/10 01:31
下一篇 2020/03/10 01:31

您可能感兴趣的内容