創建XY圖表，React-Native

Question

如何在react-native中創建基本xy圖表？例如我有數據：

chart_data = [ 
[0,0],[0,1],[1,1],[1,0],[0,0] 
] 

這是一個正方形的點。大多數圖書館都提供創建折線圖，這將創建其他線型圖，並且這些點的結果將是 - 飛人。幫幫我，請

Answer 1

你應該嘗試MPAndroidChart，甚至有一個react native wrapper for it。

Answer 2

您可以嘗試使用Canvas及其方法。在那裏，你可以畫點線條或形狀......

Answer 3

使用react-native-chart

import React, { StyleSheet, View, Component } from 'react-native'; 
import Chart from 'react-native-chart'; 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: 'white', 
    }, 
    chart: { 
     width: 200, 
     height: 200, 
    }, 
}); 

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

class SimpleChart extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <Chart 
        style={styles.chart} 
        data={data} 
        verticalGridStep={5} 
        type="line" 
       /> 
      </View> 
     ); 
    } 
} 

注意MPAndroidChart支持Android只，而反應母語，圖表支持Android和iOS。

示例圖表：