创建XY图表，React-Native

Question

如何在react-native中创建基本的xy图表？例如，我有数据：

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

这是一个正方形的点。大多数图书馆都提供创建折线图，这将创建其他线型图表，这些点的结果将是 - 空中飞人。请帮帮我

Answer 1

使用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，而react-native-chart支持Android和iOS。

示例图表：

Answer 2

您应该尝试MPAndroidChart，甚至是react native wrapper for it。

Answer 3

您可以尝试使用Canvas及其方法。在那里你可以绘制点线或形状......